XRiftとXRift Studioでできること

動画：未収録（文章で進められます）

このレッスンでできること

XRiftとXRift Studioの役割を知り、作りたいものに合う方法を選びます。コードを使う方法も、何を作れるのかから見ていきましょう。

始める前に

このページは、アプリを入れる前に読めます。プログラミングの知識も不要です。まずは、どんな作品を作ってみたいかを考えてください。

手順

1. XRiftとXRift Studioの関係を知る

XRiftは、ブラウザで3D空間に入り、人と交流できるサービスです。パソコン、スマートフォン、対応するVR端末から、公開されたワールドを体験できます。

XRift Studioは、そのXRiftで使うワールドやアイテムを制作するツールです。有志が開発する非公式ツールで、デスクトップ版とブラウザ版βがあります。扱うのは、素材の配置、色や動きの調整、動作確認、XRiftへの公開です。

制作は「Studioで作る → Playで確かめる → XRiftへ公開する → XRiftで入って確かめる」の順に進めます。Studioで保存すると、制作の続きを再開できます。ほかの人に体験してもらうには、公開の操作も必要です。

XRiftには、ワールドの中で物を配置する「ワールドビルダー」もあります。フレンドと一緒に編集できる作り方です。この講座では、XRift Studioを使って制作します。XRift公式の作り方の紹介でも、それぞれの制作方法を確認できます。

2. ワールドとアイテムの違いを知る

ワールドは、人が入って歩き回る3D空間です。展示会場、友達と集まる部屋、遊べる広場などを作れます。床や開始位置を用意し、訪れた人が何を見たり操作したりするかを考えます。

アイテムは、ワールド内で使う個別の物です。空間全体を作るワールドとは、プロジェクトの種類と公開先が分かれています。この講座で最初に作るのは、小さなワールドです。

3. 作り方とコードの種類を知る

最初はビジュアルエディターで物を置き、色や大きさを変えるだけで制作できます。画面では、配置した物の一つひとつをEntityと呼びます。動きや独自の見た目を加えたくなったら、次の方法を組み合わせてください。

Node Graphでは、文字のコードを入力せずに仕掛けを作れます。まずはノードをつないで箱を動かす例から、きっかけと処理の関係を試せます。

TypeScriptは、物の動きや条件分岐などを書く言語です。TSXは、TypeScriptのコードに、画面や3Dの構成も記述できる形式です。ReactやReact Three Fiberを使うときに登場します。Scriptは配置済みのEntityに機能を付け、コードエディターはワールドやアイテムの構成を編集するために使います。同じ言語でも、編集する範囲は別です。

Scriptを試すなら、回転テンプレートのレッスンから始めてください。ビジュアルエディターで作ったシーンを、コードプロジェクトへ書き出して制作を続けることもできます。書き出したコードの変更は、ビジュアルエディターへ自動では戻りません。

GLSLは、表面の色や模様などの見た目を書く言語です。ボタンの処理や作品全体の構成には、Node GraphやTypeScript／TSXを使います。見た目をコードで作りたいときは、GLSLの案内へ進んでください。

AIに配置やコードの編集を手伝ってもらう方法もあります。使う場合は、AI連携の案内を確認してください。最初の制作は、AIを接続せずに進められます。

4. 最初に作るものを決める

「床と展示物のある小さな部屋」を最初の目標にすると、配置、色の変更、保存、Play、公開を一通り試せます。コードは必要になったときに加えれば十分です。

ブラウザ版βでも配置やNode Graphから始められ、ワールドとアイテムを公開できます。Scriptを含む作品の公開、コードエディターへの書き出しには、デスクトップ版を使います。次のレッスンで、使う環境と保存先を決めましょう。

できたか確認する

• XRiftで作品を体験し、XRift Studioで制作する関係が分かる
• ワールドとアイテムの違いが分かる
• Node Graph、Script、コードエディター、GLSLで何を作れるか、一つずつ例を挙げられる
• 最初に作ってみたいワールドを一つ決めた

うまくいかないとき

コードの種類を一度に覚える必要はありません。最初はビジュアルエディターで配置と色を試し、押したときに動かしたくなったらNode Graphへ進んでください。分からない画面名は、用語集で調べられます。

次のレッスン

制作する環境と保存先を決めるへ進みます。

講座の一覧へ戻る