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

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

レイアウトと配置

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

描画の順序

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

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

要素の9スライス化

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

入力

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

ローカライゼーション

PlayCanvas has a built-in localization system which supports localized Text Elements. Read more here.