Reality Composer Pro 3によるノーコードでのゲーム設計

こんにちは、Saschka Unseldといいます。 私はAppleのCreative Directorです。 アイデアに取り組む際は 私にとって本当に重要なことがあります。 すぐにモックアップを作って 繰り返し試せること 何度でも、また何度でも。 Reality Composer Pro 3なら まさにそれが可能です コードを一行も書かずに。 今日はScript Graphを使ってRealityKitの ゲームをゼロから作る方法をご紹介します Reality Composer Pro 3のScript Graphで。 まず基本を学びたい方には、 そのためのReality Composer Pro 3の セッションをご用意しています。 でも、クリエイティブな方や アイデアをすぐにモックアップしたい そんな方には このセッションがぴったりです。

Script Graphとは何かを説明します。 私がゲームを作る方法をご紹介します。 そして肉付けしながら… より高度なテクニックにも 深く踏み込んでいきます。

では、Script Graphとは何でしょう？ Reality Composer Proの ノードベースのVisual Scriptingです。 UnrealのBlueprintsや UnityのVisual Scriptingをご存知の方なら すぐに使いこなせるでしょう。 Script Graphを使えば、 イベント駆動のロジックでゲームを作れます。 それはどういう意味でしょうか？

このようなゲームを作れるということです。 ここではPinch Eventsを使って これらの葉を開閉するアニメーションを作っています。 Drag Gesture Eventsを使ってプレイヤーが ナッツをドラッグできるようにしています。 そしてカスタムイベントを作成して ゲームにレベルをスクロールするよう指示します キャラクターが特定の ウェイポイントに達したときに。 ただ、Script Graphで私が一番気に入っているのは 直接テストして繰り返し改善できること Reality Composer Proの中で そしてVision Proで。

新しいものを作るとき、 いつも「こんなものがあったらいいな」という 願いから始まります そして実現するまで作り続けます。 このゲームへの願いも 小さなことから始まりました。 始まりは… 小さなリスでした。 このリスはナッツを見つけて 幸せそうに眠っています。 でも、夜がもうすぐやってくることを 忘れていました。 そこで、プレイヤーが助けてあげられたらと思いました ナッツを盗んで でも、お家に帰る道案内のためだけに。 これ以上ぴったりのプラットフォームがあるでしょうか リスからナッツを盗むのに Vision Proより。 プレイヤーは文字通り手を伸ばして リスからナッツを盗み 自由にドラッグして 小さな友達が家に帰れるように導けます。 ゲームを作り始めましょう。 プレイヤーが リスのナッツを拾い上げて 動かせるようにしたいと思います。 リスとNut Entityを含む シーンはすでに作成済みです。 切り絵スタイルにすることにしました だからリスもナッツも テクスチャを貼った シンプルな平面です。 ナッツをドラッグできるようにするには いくつかのコンポーネントを追加します。 視線ターゲットにするために Input Target Componentを追加します。 視線ターゲットのサイズを定義するために Collision Componentを追加します。 また、プレイヤーが視線を向けたときに ハイライトしてほしいので Hover Effect Componentを追加します。 これで最初のScript Graphを 作成する準備ができました。 Project Browserで右クリックして Newを選択し Script Graphを選択します。 このScript Graphに すべてのロジックを作成します。

dragNutと名付けましょう。

Script GraphのロジックをNut Entity上で 実行させたいので Scripting Componentを追加して

InspectorでdragNut Script Graphを 割り当てます。

完璧です。 Script Graphを開いて ロジックを作り始めましょう。 Script Graphが実行するロジックは すべてロジックを起動する イベントから始まります。

様々なイベントを受け取れる ノードがたくさんあります。 今回はプレイヤーがナッツをピンチしてドラッグ しようとするイベントを受け取りたいと思います。 そのために "On Drag" Event nodeを使います。 あとは On Dragノードから得た情報を Nut Entityのトランスフォームに 適用するだけです。

そのためにSetノードを使います。 Setノードは、コンポーネントに データを書き込めるノードです その他にも様々なことができます。 今回はNutのtransform componentの 位置を調整したいので Set Transformノードを使います。 あとはこの2つを接続するだけです。 まずOn Drag EventをSet Transformノードに つないでトリガーします。 これによりSet Transformは On Drag Eventが発生するたびに 実行されます。 次にOn DragノードからのScene Locationを Set TransformのTranslation入力に接続します。 こうすることでナッツの位置は ドラッグジェスチャーから得られる ドラッグ変換に基づいて設定されます。 これだけです。 素早いテストと繰り返しは すべてのクリエイティブなワークフローの鍵です。 Reality Composer Pro 3の中で 直接できます。 ワークスペース上部の Playボタンを押すと ビューポートでロジックを直接 テストできます。 Script Graphで定義した通りに ナッツをクリックしてドラッグできます。 でも、もう一歩進めましょう Live previewを使えば 今年後半に利用可能になる この機能で。 インタラクションの感触を本当に確かめるために Vision Proで試したいと思います。

Simulation Modeを "Preview on Device"に切り替えて Vision Proを選択し Playを押します。

じゃじゃーん！ リスとそのナッツが すぐ隣に現れました。 アプリを動かしてうまく配置し Playを押せます。 ナッツを見てタップしてドラッグできます。 うーん…ナッツをドラッグするために 手を動かしすぎる気がします。 こういう調整をするのに、 Mac Virtual Displayを開くのが好きです 調整した結果を直接確認できるので。

Script Graphに数学やロジックを 適用できるノードがたくさんあります。 最初のジャンプを修正して ドラッグへのナッツの反応を もっと良くするために On DragのScene Translationと "Multiply by Number"ノードを使います。 きっと乗算係数をいろいろ試したくなる とわかっていますから。 そのためにInput variableを作ります。 Script GraphのInspectorで 追加します。 dragSpeedと名付けましょう

型をnumberにして publicに設定し、 デフォルト値を1.3にします。

次にInput nodeを追加して dragSpeed変数を multiplyノードに接続します。

dragSpeedをpublic変数に 設定したので NutのScripting Componentに 表示されます。 つまり Vision Proでテストしながら dragSpeedを調整して ちょうどいい値を見つけられます。

1.5？

いや…多すぎる… 1.1かな…

もう少し…

1.15...

うん。これだと思います。

もう一つ… dragSpeedの値を変えたとき、 その名前が太字で表示されるようになりました。 これはdragSpeedの値が スクリプト自体には適用されず Overrideとして適用されることを意味します。 Overrideとは変数の 固有のバリエーションで それぞれのScripting Componentに 固有のものです。 つまり、シーンに 複数のナッツを置いて 同じScript Graphのロジックを 共有しながら それぞれ異なるdragSpeed設定を 使えるということです。

このようにインタラクションの感触を 繰り返し試すのが好きです。 でも正直なところ、 動きがまだ少し単調でした。 ナッツをもっと動的に感じさせたい 何よりも 投げられるようにしたいのです。

これを実現するために、 物理演算を追加しましょう。 まずナッツを物理シミュレーションに 含める必要があります。 そのためPhysics Body Componentを 追加します。 次にScript Graphを変更する必要があります ドラッグジェスチャーが ナッツの物理演算を駆動するように。 Add Forceノードでできます。 このノードはナッツの物理シミュレーションに 力を加えます それによりナッツは 力の方向に動きます。 ただし、これは加算力なので 時間の経過とともにドラッグが どれだけ変化するかを知る必要があります。 これはドラッグジェスチャーから デフォルトでは取得できないデータです。 では追加しましょう。 ドラッグのtranslationを直接適用する代わりに それを保存します。 そのためtargetPositionという 変数を作成して Set Variable nodeを使って ドラッグのtranslationを その中に保存します。 次にドラッグがどれだけ変化したかを 計算します。 前回の位置から 今回の位置を引くだけです。 現在取得した位置から 以前取得した位置を引きます。 この変化を計算するロジックを組み上げ dragDeltaという変数に保存しています。

あとはAdd Forceノードをトリガーして dragDeltaを 少し乗算して重みを加えてから Add Forceノードに入力するだけです。 どのような動きになるか試してみましょう。

いいですね、よりフィジカルな感触で ナッツを投げれば 落下するようになりました。 でも上に持ち上げるのが 少し難しいですね。 重力は常に下に引っ張るものですから 常に引き下げられてしまいます。 ではナッツを持っている間だけ 重力を切りましょう。 そのために別のSetノード、 Set PhysicsBodyComponentノードを使います。 このノードを使えば設定を変更できます PhysicsBodyComponentの設定を 動的に変更できます。 今回はナッツがドラッグされている間は 重力の影響を受けないようにしたいのです ドラッグされている間。 またドラッグ時にナッツが ふらつかないようにしたいです。 そのためにlinear dampingの値を 上げます。 これでより多くの摩擦が加わり より速く減速するようになります。

Script Graphにこの変更を トリガーするロジックを追加しました PhysicsBodyComponentの変更を ナッツが拾い上げられたときと 置かれたときに。 試してみましょう。

完璧です、ずっと自然な感触になりました。 Script Graphの基本はこれです。 イベントノードを受け取り そこから得たデータで 何らかのロジックを行い Setノードを使って コンポーネントを変更します。 でも、その基本的なアイデアで とても多くのことができます。 より高度なテクニックに 踏み込んでみましょう。 人生の多くのことと同様に 時間が経つと 複雑になりがちです。 クリエイティブな作業に次いで もう一つ大好きなことがあります。 それは整理することです。

そこでPrototyped Subgraphsの出番です。 ロジックの整理だけでなく 再利用可能なロジックも作れます。

先ほど作ったScript Graphの この部分を見てみましょう。 これはすべて Drag EventのisEnd boolが 変化したかどうかを確認して 変化したら何らかのロジックを実行します。 でも見ていると… これ何をするんでしたっけ？ Subgraphで整理しましょう。 このロジック部分を構成する ノードをすべて選択して 右クリックして Compose Subgraphを選択します。

"Check for Change"と名付けましょう。 見た目がずっとシンプルになりました。 ちょっと待って… bool変数が変化したときにトリガーすることは いつも必要になります。

そこでPrototyped Subgraphsの出番です。 すべてのスクリプトで Subgraphsを再利用できます。

作成するのも簡単です。 右クリックしてConvert to Prototyped Subgraphを選択するだけ… アセットブラウザーに表示されます。 これ以降、ノード追加メニューでSubgraphが 他のノードと並んで表示されます。 このような再利用可能な ロジックのパーツを作ることで ワークフローをスピードアップし ロジックをすっきり保てます。 では、リスに戻りましょう。 今の状態では、リスのナッツを盗んでも リスはまったく反応しません。 それはおかしいですね。修正しましょう。 ナッツをドラッグしているとき、 リスがナッツを見るようにしたいです。 そのためにリスに 独自のScript Graphを付けます。 でも、ナッツがドラッグされていることを どうやって知るのでしょう？ 独自のCustom Eventを作れます。 そのためには Custom Node Libraryが必要です。

Project Browserで 作成できます。 そこにCustom Eventを追加します。 "nutIsDragged"と名付けましょう。 リスがナッツの位置を 知るためには イベントとともに ナッツの位置を送りたいと思います。 そのためCustom Eventに プロパティを追加します。 nutPositionと名付けましょう。 あとはSync Nodesをクリックするだけです カスタムノードを使用可能にするために。 やりたいことは NutのScript Graphから このイベントを送信して リスのScript Graphに届けることです。 Node Libraryに追加したので Send "nutIsDragged" node が 他のノードと並んで 使用できるようになりました。 ナッツがドラッグされたときに トリガーされるよう接続して ナッツのワールド座標を送ります。 リスのScript Graphでは On "nutIsDragged" Eventを作成して 受け取れるようにします。 そしてイベントのnutPositionを使って リスの回転を制御します。 Vision Proで どんな感触か確かめてみましょう。

素晴らしい。 追加したロジックにより、リスがナッツを見るときに 小気味よいフリップ動作をします。 これはゲームの切り絵デザインを際立たせ より楽しくしてくれます。 そして、そっと付け加えた もう一つのことがあります。 ナッツを盗むと、リスが 適切に怒った表情をします。

簡単な追加でした。 Script GraphからリスのMaterialの変化を 制御することで。

リスのMaterialのShader Graphで isNutDraggedと名付けた public input variableを使います。 そしてそれを使って決定します 2つのリスのテクスチャのうち どちらをMaterialで使うかを。

リスのScript Graphに Set Material Parameter nodeを追加して ParameterのタイプをBoolに設定し isNutDraggedと名付けます。

次にリスのModel Componentを持つ Entityの場所を指定し 確実に発動するようにして ナッツがドラッグされているかどうかを渡します。 ドラッグされているかいないかを。 それだけです。 リスが本当に不満を表現できるようにするために 声を与えてしっかり文句を 言えるようにしたいです。 切り絵スタイルに合わせて その声はSpeech Bubbleにします。 このようなインターフェースには SwiftUIを使うのが大好きで 楽に実装でき、美しく見えます。 でもSwiftUIを使うには Xcodeでゲームを実行する必要があります。 簡単です…プレビューモードを "Run with Xcode"に切り替えるだけです。 でも待って…Xcodeプロジェクトがない… 大丈夫です。 Reality Composer Pro 3が 作ってくれます。 Xcodeでこの小さなSwiftUIの Speech Bubbleを作りました。 でも、どうすれば表示できるでしょう リスのナッツを盗んだときに。

ここでもScript Graph Eventsが 助けてくれます。 なぜならSwiftから受信して 送信もできるからです。

Script Graphでやることは Send Scene Event nodeを使って squirrelTalkと名付け リスに言わせたいことを送りたいので 変数を追加します。

sayThisと名付け String型に設定して リスに言わせたいことを設定します。 例えば「Hey, that's my nut!」のように。

次にXcodeでコードを 書く必要がありました。 デザイナーとして Coding Intelligenceにシンプルに プロンプトを送れるのが気に入っています このコードを書いてもらえる。

Scene Eventを受け取るには、 コーディングアシスタントに伝えるだけでした squirrelTalkというScene Eventを サブスクライブして sayThis変数を保存するよう。

そしてsquirrelTalkが呼び出されたら SwiftUIのSpeech Bubbleを表示する Squirrel EntityのAttachmentとして もちろんsayThis変数を テキストとして使用する。

これでリスが本当に伝えられるようになりました ナッツを盗まれたとき 私のことをどう思っているかを。 Script Graphではこれ以外にも ゲームに追加できることがたくさんあります リスが歩いたりジャンプして ナッツを取り返そうとするようにしたり ドラッグできる葉を作って リスが レベル全体を移動できるようにしたりできます。 visionOSのornamentも使えます 行き詰まったとき レベルの任意の場所に ジャンプできます。 だから心配しないで、小さなリスよ。 お家に連れて帰ってあげるから。

Script Graphをこんな風に使うのが大好きです。 アイデアをスケッチして 最高のナッツの盗み方をいろいろ試し そして何より 願いを現実にすることができます。 続けたい方は、 Reality Composer Pro 3をダウンロードしてください。 高度なワークフローを深掘りするか 完全なSquirrel Sample Projectを 確認してください Apple Developer Websiteから。