Reality Composer Pro 3 でノーコードゲームをデザインする

ハイライト

Reality Composer Pro 3 の Script Graph、つまりビジュアルノードスクリプトは、デザイナーが Swift コードを書かずに visionOS の空間インタラクションプロトタイプを構築できるようにします。Vision Pro 実機上でリアルタイムにパラメータを調整しながら反復できます。

主要内容

「コードを書かないと動かない」から「線をつなげば遊べる」へ

以前 visionOS プロトタイプを作るとき、デザイナーがスケッチを終えた後、プログラマーはジェスチャ応答、物理衝突、アニメーショントリガーを実装するために RealityKit コードを大量に書く必要がありました。Vision Pro を装着してテストするとドラッグ感度が違うと分かり、Xcode に戻って数字を変え、再ビルドし、またヘッドセットをかぶる。このループは非常に非効率でした。

Reality Composer Pro 3 は Script Graph でこの流れを変えます。Script Graph はノードベースのビジュアルスクリプトシステムで、イベント駆動ロジックによってインタラクションを構築します。コードを 1 行も書かずに、エディタ内でノードをドラッグし、線をつなぐだけで、ジェスチャイベントの監視、エンティティプロパティの変更、物理エンジンの駆動ができます。

（01:02）

実機プレビューで「手触り」を調整できる

空間インタラクションで最も難しいのは、「手触りは 2D 画面では予測できない」ことです。Mac 上でマウスドラッグしてちょうどよく感じるパラメータでも、Vision Pro をかぶって手でつまんで投げると、体験はまったく違います。

Script Graph の変数は public に設定でき、エンティティの Scripting Component に公開できます。今年後半に提供予定の Live Preview と組み合わせると、デザイナーは Vision Pro を装着したまま、Mac の仮想ディスプレイ上で直接パラメータ値を変更できます。デモでは、発表者がドラッグ速度の係数を 1.3 から 1.5、さらに 1.1、最後に 1.15 へ調整しています。再コンパイルは一切不要です。

さらに重要なのが Override の仕組みです。同じ Script Graph を複数のエンティティに再利用でき、各エンティティは独立したパラメータ上書き値を持てます。つまりシーン内に複数の「ナッツ」があり、それらが同じドラッグロジックを共有しながら、それぞれ異なる反応速度を持つことができます。

（05:37）

物理エンジンもノード化できる

物体をドラッグするとき、単に位置を直接設定するだけでは、手触りが「浮いている」ようになります。Script Graph は RealityKit の物理エンジンに接続できます。エンティティに Physics Body Component を追加し、Add Force ノードでドラッグ変位量（dragDelta）を力に変換して物体へ加えます。

デモでは、発表者が Set Variable ノードで前フレームのドラッグ位置を保存し、現在位置から前フレーム位置を引いて変位差を得て、それに係数を掛けて Add Force ノードへ入力します。これにより物体には慣性と放物線の動きが生まれ、「投げる」ことができます。

同時に、Set PhysicsBodyComponent ノードを使えば、ドラッグ開始時に重力をオフにし、linear damping を高めて物体を制御しやすくし、放したときに重力を戻せます。物理インタラクションの調整はすべてノードグラフ内で完結します。

（08:34）

カスタムイベントで 3D と SwiftUI をつなぐ

プレイヤーがリスのナッツを盗むと、リスは文句を言う必要があります。この「話す」トリガーは Script Graph 内で完了しますが、吹き出し UI は SwiftUI で実装します。

Script Graph には Send Scene Event ノードがあり、パラメータ付きのカスタムイベントをシーンレベルへ送れます。Swift コードでは scene.subscribe(forEventName:) でイベントを監視し、状態変数を更新し、RealityView の attachments を通じて SwiftUI ビューを 3D エンティティへ取り付けます。

この設計では、「いつトリガーするか」はデザイナーがノードグラフで編成し、「UI がどう見えるか」はプログラマーが SwiftUI で実装します。両者はイベントによって疎結合になります。

（16:04）

詳細

エンティティをドラッグ可能にする：基本ノード構成

ドラッグを実装するには 3 つのコンポーネントが必要です。

Input Target Component：エンティティをジェスチャ対象にする
Collision Component：ジェスチャ検出の衝突体積を定義する
Hover Effect Component：注視時にハイライトフィードバックを表示する

その後 Script Graph で On Drag イベントノードを使ってドラッグジェスチャを監視し、イベントが出力する Scene Location を Set Transform ノードの translation 入力へ接続します。ドラッグイベントが発火するたびに、エンティティの位置はジェスチャがある空間座標へ更新されます。

（02:55）

変数と数学ノードでパラメータを調整する

On Drag ノードが出力する Scene Translation はそのまま位置を動かせますが、手触りが理想的でない場合があります。デモでは Multiply by Number ノードで変位量をスケールし、public な Input 変数 dragSpeed で係数を制御しています。

Inspector で Input 変数を作るとき、型（Number）、デフォルト値（1.3）、アクセス権限（public）を設定できます。public にすると、この変数はエンティティの Scripting Component パネルに現れ、実機テスト中の調整が簡単になります。

（06:28）

Prototyped Subgraph：ロジックを再利用する

ノードグラフが複雑になったら、Subgraph を使ってノード群を 1 つのノードにまとめられます。関連ノードを選択し、右クリックして Compose Subgraph を選び、子グラフに名前を付けます。

複数の Script Graph をまたいで再利用する必要がある場合は、さらに Prototyped Subgraph へ変換できます。変換後、子グラフはプロジェクトのアセットブラウザに現れ、ノード追加メニューで標準ノードとして使えるようになります。デモでは「Boolean 値が変化したかを検出する」ロジックを再利用可能なノードにまとめています。

（11:32）

カスタムイベントライブラリ：エンティティ間通信

2 つのエンティティ間で通信が必要な場合は、Custom Event を作成します。まず Project Browser で Custom Node Library を新規作成し、その中に Custom Event を追加して nutIsDragged のように命名します。次に nutPosition のような属性を追加し、型を Vector にします。Sync Nodes をクリックすると、このカスタムイベントがノードメニューに表示されます。

送信側は Send “nutIsDragged” ノードを使い、Nut のワールド座標をパラメータとして送ります。受信側は On “nutIsDragged” イベントノードで監視し、受け取った nutPosition で自分の回転やマテリアル変更を駆動します。

（13:27）

Script Graph から SwiftUI をトリガーする

Script Graph でシーンイベントを送ります。

// SwiftUI 内でシーンイベントを監視し、状態を更新する
if let scene = entity.scene {
    scene.subscribe(forEventName: "squirrelTalk", on: { event in
        if let sayThis: String = try? event.value("sayThis") {
            self.sayThis = sayThis
        }
    }).store(in: &cancellables)
}

要点：

subscribe(forEventName:on:) は指定名のシーンイベントに対する監視を登録します
event.value("sayThis") はイベントが持つパラメータ値を名前で取り出します。型は Script Graph で定義した型と一致する必要があります
.store(in: &cancellables) は購読を Combine のキャンセルトークン集合に保存し、メモリリークを避けます

SwiftUI ビューを 3D エンティティに取り付けます。

RealityView { content, attachments in
    // 3D シーンコンテンツを読み込む
} attachments: {
    Attachment(id: "squirrelTalk") {
        SquirrelTalkAttachmentView(text: sayThis)
    }
}

要点：

attachments クロージャは 3D エンティティに紐づけられる SwiftUI ビューを定義します
Attachment(id:) の ID は、コード内で entity.components.set(AttachmentComponent) により紐づけた ID と一致している必要があります
SquirrelTalkAttachmentView(text:) はシーンイベントから解析したテキストを受け取り、会話吹き出しを描画します

（17:15）

主要な学び

1. 空間インタラクションプロトタイプを素早く検証する

何をするか：Script Graph を使い、30 分でドラッグ可能で物理フィードバックのある 3D インタラクションプロトタイプを作り、Vision Pro 上で直接手触りをテストします。
なぜ価値があるか：Swift コードを書かずに中心的なインタラクションが成立するか検証でき、失敗コストが非常に低くなります。
どう始めるか：Reality Composer Pro 3 に 3D モデルを読み込み、Input Target、Collision、Hover Effect コンポーネントを追加し、On Drag と Set Transform ノードをつなぐ Script Graph を作ります。

2. 既存 App に物理フィードバックを追加する

何をするか：visionOS App 内のインタラクティブな物体に慣性と放物線効果を追加します。
なぜ価値があるか：位置を直接設定するだけでは手触りが不自然です。Add Force で駆動する物理運動はインタラクションに「重さ」を与えます。
どう始めるか：エンティティに Physics Body Component を追加し、Script Graph で Set Variable を使って前フレーム位置を保存し、dragDelta を計算し、Multiply by Number で力を調整して Add Force ノードへ入力します。

3. SwiftUI で 3D シーンの HUD と会話システムを作る

何をするか：RealityKit シーン内で SwiftUI を使い、体力バー、会話吹き出し、タスクヒントなどの 2D UI を実装します。
なぜ価値があるか：SwiftUI の宣言的構文は RealityKit の低レベル UI 構築よりずっと速く、既存コンポーネントも再利用できます。
どう始めるか：Script Graph で Send Scene Event ノードによりイベントを発火し、Xcode で scene.subscribe を使って監視し、RealityView の attachments で SwiftUI ビューを対応エンティティに結びつけます。

4. 再利用可能なインタラクションコンポーネントライブラリを作る

何をするか：「ダブルタップで拡大」「注視でハイライト」「ドラッグして吸着」など、よく使うインタラクションロジックを Prototyped Subgraph にまとめ、複数プロジェクトで再利用します。
なぜ価値があるか：毎回ゼロからノードをつなぐ必要がなくなり、プロジェクト間でインタラクションの一貫性を保てます。
どう始めるか：プロジェクト内に Custom Node Library を作り、検証済み Subgraph を Prototyped Subgraph に変換し、チームメンバーがノード追加メニューから直接呼び出せるようにします。

5. デザイナーとプログラマーの混合ワークフロー

何をするか：デザイナーは RCP3 内でインタラクションロジックとイベント発火タイミングを担当し、プログラマーは Xcode 内で UI 実装とデータ層を担当します。
なぜ価値があるか：デザイナーはプログラマーの開発順番を待たずにインタラクションを反復でき、プログラマーは微調整のたびに再コンパイルする必要がありません。
どう始めるか：Custom Event の命名規則とパラメータ型を決め、デザイナーは Script Graph でイベントフローを編成し、プログラマーはイベント監視と UI 描画コードを書きます。