Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

このレッスンでは、Cave Engine の エンティティ親子システムがどのように機能するかを学びます。

この機能はシーン内の任意のタイプのエンティティで使用でき、オブジェクト間に整理された階層を作成することができます。

ユーザーインターフェイスを作成する際には、特に便利です。1 つの UI 要素 を他の UI 要素の親として定義することにより、位置スケール、および 可視性 などの変換が自動的に子要素に伝播されます。

これにより、インターフェイスの整理がはるかに簡単になり、メニューやパネルの編集が簡素化され、より複雑な UI 構造の管理がはるかに効率的になります。

1. UI ツールキット要素の作成

前に作成した UI 要素デフォルト に加えて、UI ツールキットを使用してさらに 3 つのインターフェイス要素を追加します:

  • 入力スライダー
  • 入力番号
  • 入力テキスト

これらの要素がゲームプレイ中にどのように動作するかを実際にテストします。

次に、これらのコンポーネントを使用して、UI 要素デフォルト の子としてエンティティ階層を作成し、親子システムがインターフェイスの整理にどのように役立つかを示します。

image.png

2. UI ツールキット要素のテスト

UI ツールキットで作成した要素をテストする前に、Cave Engine の 三人称ゲームテンプレート を使用している場合は、シーン内の プレイヤー車両 を無効にします。

これが重要なのは、これらのエンティティのいずれかがゲーム実行中にマウスカーソルを制御する可能性があるためです。

カーソルが自由であれば、入力スライダー入力番号、および 入力テキスト などのインターフェイス要素と正しく対話でき、干渉なしにそれらのすべての機能をテストできます。

image.png

F5 を押してゲームを実行します。

実行中に、作成した要素と対話できます。

入力スライダー入力番号 は、マウスの操作を通じて値を変更できるのに対し、入力テキスト はインターフェイスに直接テキストを入力できます。

これは、各要素をテストして、それらの目的を理解するのに良い時期です。

たとえば:

  • 入力スライダー は、音量や明るさなどの設定に最適です。
  • 入力番号 は、正確な数値を必要とする場面で便利です。
  • 入力テキスト は、プレイヤーが情報を入力する必要があるときに便利です。

image.png

3. 階層

さて、UI 要素間の階層がどのように機能するかを見てみましょう。

UI 要素デフォルト を選択し、プロパティパネルでその スケール 値を調整します。

これらの値を変更することで、要素のサイズを増減することができます。

image.png

エンティティ間に親子関係を作成するには、子にしたい UI 要素をクリックしてドラッグし、UI 要素デフォルト の上にドロップします。これが親エンティティになります。

これはエンジン全体で使用されるのと同じ階層概念です:子は親に取り付けられ、それに従い始めます。

image.png

この親子関係を作成した後、子要素は親要素の変換に自動的に従います。

つまり、UI 要素デフォルト に適用される 位置スケール、および 可視性 の変更は、すべての子要素にも影響します。

これは、メニューやインターフェイスパネルを構築する際に非常に便利です。

たとえば、親としてメニューパネルを作成し、複数のボタン、テキスト、および入力フィールドを子として配置すると、親要素のみを編集することで、全体のメニューを移動またはサイズ変更できます。

すべてのインターフェイス要素を 1 つずつ調整する代わりに、グループに整理することができ、全体の UI の編集と管理がはるかに簡単になります。

image.png

この時点で、UI ツールキット要素を作成してテストする方法だけでなく、階層を使用してそれらを整理する方法も学びました。

これは、Cave Engine でより大きなインターフェイスを構築する際の最も重要な概念の 1 つであり、UI をクリーンでモジュール化し、管理しやすくするのに役立ちます。