ランタイムと分離されたWebベースエディターの提案
本稿では、ゲームエンジンのエディタをWebベースで実装し、エンジンランタイムと分離するアーキテクチャを提案する。従来のゲームエンジン(Unity, Unreal, Godot等)ではエディタとエンジンが密結合しているが、本設計ではEditor WebUIとEngine RuntimeをREST API/WebSocketで接続することで、障害分離・リモート編集・独立した更新サイクルを実現する。
はじめに
多くのゲームエンジンは、独自のエディタアプリを持つ。たとえば、Unity[1], Unreal Engine[2], Godot[3], Bevy[4]などが代表例である。
- エディタがエンジンと密接に結びついていることのメリット
- エディタとエンジンの連携が容易
- パフォーマンスが良い
- デメリット
- エディタの開発と保守が複雑
- エンジン開発者はエディタのUI機能の実装が必要
- エンジンユーザは独自のエディタ拡張方法を理解する必要がある
- エンジンのクラッシュがエディタに影響を与える可能性がある
- エディタの開発と保守が複雑
しかし、近年のWeb技術の進歩により、Webベースのエディタが現実的な選択肢となってきた。本ドキュメントでは、Webベースのエディタの利点と、その設計について提案する。
本稿の提案実装は、nodec game engineの一部として実装されている。
Webベースエディタの利点
- UIフレームワークの豊富さ
Web技術には、React, Vue, Angularなど成熟したUIフレームワークが存在する。Material-UIやdockviewなどのコンポーネントライブラリも豊富である。
- 安定したレンダリングとパフォーマンス
モダンブラウザは高度に最適化されたレンダリングエンジンを持つ。
- クロスプラットフォーム対応
ブラウザが動作する環境であれば、どこでもエディタが利用可能。
- リモートデバッグ・編集
マシンをまたいでのリモートデバッグやエディタ操作が可能。ゲームが動作するマシンと、エディタを操作するマシンを分離できる。
- エンジンはデプロイに集中した設計が可能
デプロイ時にエディタ機能は不要であり、エンジン本体はゲーム実行に必要な機能のみに集中できる。
- 障害分離
エンジンクラッシュ時にエディタの作業内容がロストしない。逆に、エディタ側の問題がエンジンに影響を与えることもない。
- エディタ更新の容易さ
エディタ更新にエンジン再コンパイルが不要。フロントエンド開発のホットリロードを活用できる。
設計
上記図は、Webベースエディタの基本的なアーキテクチャを示している。システムは大きくEditor WebUIとEngine Runtimeの2つのコンポーネントに分かれ、Editor APIを介して通信する。
Editor WebUI
Editor WebUIは、ブラウザ上で動作するエディタのフロントエンドである。
- 主な役割
- シーン階層の表示と操作 (Scene Hierarchy Window)
- エンティティのコンポーネント編集 (Entity Inspector Window)
- アニメーションの編集 (Animation Editor Window)
- その他のエディタウィンドウ
- 技術スタック
- Next.js 14 (React フレームワーク)
- TypeScript
- dockview (ドッキングレイアウトシステム)
- @xyflow/react (ノードベースグラフ可視化)
Editor WebUIは、編集中のエンティティやリソースのローカルコピーを保持する。これにより、エンジンとの通信遅延やエンジンクラッシュの影響を最小限に抑える。
Engine Runtime
Engine Runtimeは、ゲームロジック、レンダリング、物理演算などを実行する本体である。
- 主な役割
- ゲームロジックの実行
- レンダリング
- エンティティとリソースの管理
- Editor API Serverの提供
Engine Runtimeは、実際のゲームデータ(エンティティ、リソース)を保持し、Editor API Serverを通じてエディタからの要求に応答する。
Editor API
Editor APIは、Editor WebUIとEngine Runtime間の通信プロトコルである。
REST API
エンティティやコンポーネントの取得・更新にはREST APIを使用する。
- 主なエンドポイント
GET /api/entities/roots- ルートエンティティ一覧の取得GET /api/entities/ids/:id- 特定エンティティの詳細取得GET /api/entities/ids/:id/components- エンティティのコンポーネント取得POST /api/entities/ids/:id/components- コンポーネントの追加PATCH /api/entities/ids/:id/components- コンポーネントの更新DELETE /api/entities/ids/:id/components/:typeIndex- コンポーネントの削除
- リソース関連
GET /api/resources/:type/:name- リソースの取得PUT /api/animation-clips/:name- アニメーションクリップの更新
WebSocket
リアルタイム更新にはWebSocketを使用する。
- エンティティコンポーネントの変更通知をサブスクライブ
- 接続状態の監視と自動再接続
シリアライズ形式
エンティティ、コンポーネント、リソースのデータは、JSONベースのシリアライズ形式で通信される。C++側ではcereal[5]ライブラリのポリモーフィックシリアライゼーションを使用し、コンポーネントの型情報を保持する。
実装
本設計の実装は、nodec game engineで公開されている。
https://github.com/nodec-project/nodec_game_engine
Editor WebUI
パス: game_editor/web_ui/
- ディレクトリ構成
- app/
- layout.tsx (ルートレイアウト)
- page.tsx (メインページ)
- src/
- api/
- gameEngine.ts (Editor APIクライアント)
- components/
- SceneHierarchy.tsx (シーン階層ウィンドウ)
- ComponentInspector.tsx (コンポーネントインスペクター)
- api/
- app/
- セットアップ
- Node.js 18以上が必要
npm installで依存関係をインストールnpm run devで開発サーバー起動 (localhost:3000)- Engine RuntimeがEditor Server有効(ポート8080)で起動している必要がある
応用
リモートエディティング
本設計の最大の応用例は、リモートエディティングである。Editor WebUIとEngine RuntimeがHTTP/WebSocketで通信するため、同一マシンである必要がない。
ユースケース
- モバイルデバイスでの開発
iOSやAndroidデバイス上でEngine Runtimeを起動し、PC上のブラウザからエディタで編集できる。実機での動作確認をしながら、リアルタイムでパラメータ調整が可能。
- コンソール機での開発
PlayStation, Xbox, Nintendo Switch等のコンソール機上でEngine Runtimeを実行し、開発PCからエディタで操作できる。
- VR/ARデバイスでの開発
VRヘッドセット上でゲームを実行しながら、別のPCでエディタを操作してシーンを調整できる。VR空間内での見え方を確認しながらのイテレーションが可能。
- クラウドゲーミング環境
クラウドサーバー上でEngine Runtimeを実行し、ローカルPCからエディタで接続することで、高性能なクラウドリソースを活用した開発が可能。
構成例
[開発PC] [ターゲットデバイス]
ブラウザ Engine Runtime
Editor WebUI <--- HTTP ---> Editor API Server
localhost:3000 192.168.x.x:8080
Editor WebUIの接続先をlocalhost:8080からターゲットデバイスのIPアドレスに変更するだけで、リモートエディティングが可能になる。
考慮事項
- ネットワーク遅延
ローカル接続と比較してレイテンシが増加する。WebSocketによるリアルタイム更新で体感を軽減できる。
- セキュリティ
Editor API Serverは認証なしで公開される設計のため、信頼できるネットワーク内での使用を推奨する。本番環境では認証機構の追加を検討すべきである。
- ファイアウォール
ポート8080(Editor API Server)への接続を許可する必要がある。