ヒエラルキーとインスペクター

シーン内のすべてのエンティティをツリーとして一覧し、データのみを持つトレイトを型付きウィジェットで確認・編集できます。編集内容はライブなゲームワールドへ直接書き込まれます。

作業の中心となる2つのパネル

Modoki は koota をベースにした Entity-Component-System エンジンです。ゲームは エンティティ の集合であり、各エンティティはデータのみを持つ トレイト(コンポーネント)を保持します。そして システム がそれらに対してロジックを実行します。エディタはこの構造を2つのパネルに分けて扱います。ヒエラルキー がエンティティを一覧し、インスペクター が選択中のエンティティのトレイトを表示します。片方でエンティティを選択すると、どこでも同じエンティティが選択されます。ヒエラルキーで行を選ぶと SceneView 上でも同じエンティティがハイライトされ、その逆も同様です。

ヒエラルキーで Light エンティティを選択した状態。その Transform トレイトと Light トレイトがインスペクターに表示されています。

ヒエラルキーパネル

ヒエラルキーはシーン内のすべてのエンティティを表すツリーです。実際のシーンでは 136 個 以上のエンティティに及ぶこともあります。各行にはレイヤータグが付いており、エンティティの種類をひと目で判別できます。

• 3D — Three.js エンティティ
• 2D — PixiJS の 2D エンティティ
• UI — DOM UI エンティティ
• R — Time などのリソースエンティティ

プレハブインスタンスには青い P のバッジが付きます。パネル上部の + ボタンで新しいエンティティを作成できます。

親子付けと並べ替え

ツリーは完全にドラッグ操作で扱えます。あるエンティティを別のエンティティの上にドラッグすれば子にできます(親子付け)。兄弟同士の間にドラッグすれば並べ替えられます。また、Assets パネルからプレハブをドラッグしてヒエラルキーにドロップすると、インスタンス化できます。新しいインスタンスは青い P バッジ付きで表示されます。

インスペクターパネル

インスペクターは、現在選択中のエンティティを表示します(アセットを選択した場合は、そのアセットを表示します)。エンティティの場合、パネル上部には Active チェックボックス、エンティティの 名前、ソート順 フィールド、そして 削除 ボタンがあります。その下には、各トレイトがそれぞれ折りたたみ可能なセクションとして表示され、型付きウィジェットでレンダリングされます。

• スカラー値には 数値フィールド
• 色には カラースウォッチ
• Transform や位置には ベクトル(x / y / z)
• 真偽値には チェックボックス
• 固定の選択肢には 列挙型ドロップダウン

たとえば Light トレイトは、lightType(ambient / directional / point / spot)、color、intensity、distance、angle、penumbra、castShadow を公開します。すべての編集はライブな ECS ワールドへ直接書き込まれ、同時に取り消し(undo)エントリが積まれます。そのため変更は即座に反映され、いつでも元に戻せます。

ライブ編集と自由な取り消し

別途「適用」の操作は必要ありません。新しい値を入力したりチェックボックスを切り替えたりすると、その場で実行中のワールドが書き換わり、各変更がそれぞれ個別の取り消しエントリとして記録されます。

トレイトの追加

インスペクター下部の Add Component… ドロップダウンから、選択中のエンティティに新しいトレイトを追加できます。利用できるトレイトには Transform、Renderable3D、Renderable2D、Light、Camera、Environment、UIElement、UIAnchor、UIAction、Animator、ParticleEmitter、SkinnedModel、Bone などがあります。

ウォークスルー:ライトを調整する

1. エンティティを探す — 調整したいライトをヒエラルキーから探し(3D タグの付いた行が目印です)、クリックします。
2. 選択を確認する — SceneView 上でも同じエンティティがハイライトされ、インスペクターがそのトレイト表示に切り替わります。
3. Light トレイトを開く — インスペクターで折りたたまれた Light セクションを展開します。
4. 値を調整する — intensity の数値フィールドを編集したり、スウォッチから新しい color を選んだり、列挙型ドロップダウンで lightType を変更したりします。各変更は即座にライブなワールドへ反映されます。
5. 必要なら追加する — 下部の Add Component… から、たとえば Animator など別のトレイトを追加できます。
6. ミスを取り消す — すべての編集は取り消しエントリを積んでいるため、気に入らない変更はいつでも戻せます。

補足

トレイトはデータにすぎません。エンティティに何かを させる には、システムがそのトレイトに対してロジックを実行する必要があります。インスペクターは、そうしたシステムが読み取る値を編集する場所です。

次へ: SceneView とギズモ →