ユーザーインターフェースの基礎

PlayCanvasではユーザインタフェースは2つのエレメントから構築されています。Screenコンポーネントはすべてのユーザインターフェースエレメントを含む領域を記述し、Elementコンポーネントを持つ複数のエンティティはヒエラルキーのScreen Entityの下に添付されます。Screenは、ユーザインタフェースの領域とそれがどのようにレンダリングされるかを(2Dまたは3D世界で)定義します。Elementsはインタフェースのイメージ (Image) とテキスト (Text)コンポーネントを構成します。

レイアウトとポジショニング

Elementコンポーネントをスクリーンの一部として使用するエンティティと通常のエンティティの大きな違いの1つは、それらが親に対して配置される方法です。Elementコンポーネントには、最終的な位置が計算される方法を変更する２つのプロパティがあります。anchorプロパティは子が親に対してどのように配置されるかを決定し、 pivotプロパティはelementの中心点がどこにあるかを決定します。詳細はElementページでご確認ください。

Draw Order

ユーザインターフェースの画像部分であるイメージエレメントおよびテキストエレメントは、階層内に現れる順序で描画されます。例えば、最初の子が最初に描画され、その子が次に描画されます。後で描かれた子は、先に描かれた子の上に表示されます。

描画順序を変更するには、Editor階層でエンティティを並べ替えるだけです。entity.reparent(...)を呼び出すことで、エレメントをプログラムで並べ替えることができます。 これは、Screenコンポーネント全体で描画順序を強制的に再計算することを意味しますのでご注意ください。

エレメントの9スライス化

9スライス（または9パッチ）は、ビットマップグラフィックスから拡張可能なユーザーインターフェイスエレメントを作成するためのグラフィカルなテクニックです。テクスチャアトラスとスプライトアセットを使用して9スライスを設定できます。こちらを読んでください。

Input

UIエレメントの入力を処理する別の方法があります。pc.ElementInputのインスタンスは、通常は this.app.elementInputとしてアクセス可能なApplicationオブジェクトで提供されます。これにより、elementコンポーネント上で直接入力をリッスンすることができます。例：this.entity.element.on('click', ...)。詳細はInputページでご確認ください。

ローカライゼーション (Localization)

PlayCanvasには、ローカライズされたText Elementsをサポートする組み込みのローカライズシステムがあります。こちらをご覧ください。