ユーザーインターフェース

ほとんどのアプリケーションには、HUD、メニュー、ボタン、ダイアログ、シーン内のラベル、XRのパネルといったインターフェースが必要です。PlayCanvasでは、インターフェースをキャンバスの内側でシーンの一部としてエンティティから構築することも、キャンバスの外側でHTMLとCSSを使って構築することもでき、多くのアプリケーションは両者を組み合わせています。

キャンバス内UIはコンポーネントから構築されます。スクリーンはインターフェースのルートで、その下にあるエレメントが、インターフェースを構成するイメージ、テキスト、グループです。ボタン、レイアウトグループ、スクロールビューなどのコンポーネントが、その上に振る舞いを追加します。これらは、エディター、エンジン直接、PlayCanvas React、Web Componentsのどの方法で構築しても利用できます。このセクションの各ページでは、概念を一度説明した後、それぞれの環境での適用方法を示します。

UIを構築する2つの方法

	キャンバス内UI	HTMLとCSS
ワールド空間とXR	スクリーンをシーン内に配置でき、XRでも動作する	キャンバスの上に重ねる形のみ
テキスト入力	組み込みのサポートなし	テキストフィールド、オートコンプリート、オンスクリーンキーボード
アクセシビリティ	スクリーンリーダーやキーボードナビゲーションからは認識されない	適切な要素を使えばアクセシブルにできる
スタイルとレイアウト	アンカー、レイアウトグループ、9スライスのスプライト	CSSと、ブラウザのレイアウトやアニメーション
フォントと絵文字	フォントファイルから作成するMSDFフォント、キャンバスフォントによる絵文字	あらゆるWebフォントと絵文字
エディター	エディターで構築・プレビューできる	HTMLとCSSのアセットまたはファイルとして記述する
キャンバスのキャプチャ	キャンバスのスクリーンショットや動画キャプチャに含まれる	キャンバスのキャプチャには含まれない
パフォーマンス	シーンと一緒に描画され、バッチングされる	キャンバスとは別に、ブラウザがレイアウトとペイントを行う

キャンバス内UIは、HUD、シーン内やXRのインターフェース、そしてキャンバスに表示される内容の一部でなければならないものに適しています。HTMLは、メニュー、設定、フォーム、長いテキストに適しています。両者はうまく組み合わせられます。例えば、HUDをキャンバス内に持つアプリケーションを、HTMLの設定画面から一時停止できます。HTMLとCSSを参照してください。

構成要素

コンポーネント	役割	Editor	React	Web Components	API
Screen	インターフェースのルート。画面に重ねるか、シーン内に配置する	Screen	<Screen>	<pc-screen>	ScreenComponent
Element	イメージ、テキスト、またはグループ	Element	<Element>	<pc-element>	ElementComponent
Button	ホバーと押下の状態、クリックイベント	Button	エンジンのコンポーネント	<pc-button>	ButtonComponent
Layout Group	子を行、列、グリッドに並べる	Layout Group	エンジンのコンポーネント	<pc-layout-group>	LayoutGroupComponent
Layout Child	レイアウトグループによる子のサイズの決め方を上書きする	Layout Child	エンジンのコンポーネント	<pc-layout-child>	LayoutChildComponent
Scroll View	マスクされたビューポート内でコンテンツをスクロールする	Scroll View	エンジンのコンポーネント	<pc-scroll-view>	ScrollViewComponent
Scrollbar	トラック上のドラッグできるハンドル。スクロールビューやスライダーに使う	Scrollbar	エンジンのコンポーネント	<pc-scrollbar>	ScrollbarComponent

PlayCanvas Reactには、スクリーンとエレメントのコンポーネントがあります。それ以外はエンジンのコンポーネントとして追加します。そのための小さなヘルパーは各ページで紹介しています。

このセクションの内容

• はじめに - 各環境でのUIのセットアップと、最初のインターフェース。
• レイアウト
  • スクリーン - スクリーン空間とワールド空間、あらゆるキャンバスに合わせたスケーリング、ピクセル比、優先度。
  • エレメント - アンカー、ピボット、マージン、サイズ、グループエレメント。
  • レイアウトグループ - 子を並べる行、列、グリッド。
  • セーフエリア - インターフェースがノッチや角丸にかからないようにする。
• イメージ
  • イメージエレメント - 色、テクスチャ、スプライト、9スライス、イメージ内の3D、カスタムマテリアル。
  • マスク - 子を矩形や形状でクリップする。
• テキスト
  • テキストエレメント - サイズ、折り返し、フィッティング、両端揃え、マークアップ、アウトライン、シャドウ。
  • フォント - フォントアセットの作成と読み込み、含める文字の選択。
  • ローカライズ - 翻訳、複数形、ロケール、言語ごとのフォント。
• インタラクション
  • 入力 - マウス、タッチ、XRのイベント、バブリング、UIの入力がゲームに届かないようにする方法。
  • ボタン - ホバーと押下の状態、ティント、スプライト、イベント。
  • スクロールビュー - ドラッグ、ホイール、スクロールバーによるコンテンツのスクロール。
• よく使うウィジェット - プログレスバー、スライダー、トグル、ダイアログ、リスト、ドラッグ＆ドロップなど。
• ワールド空間とXR
  • ワールド空間UI - シーン内のインターフェースと、キャラクターの頭上のラベル。
  • XRのUI - 没入型セッションでのパネル、ポインティング、ハンド、メニュー。
• HTMLとCSS - キャンバスの上にDOMで構築するインターフェース。
• 描画順とパフォーマンス - UIが描画される仕組みと、高速に保つ方法。
• トラブルシューティング - よくある問題とその原因。

関連情報

• ユーザーインターフェース - ボタン、リーダーボード、プログレスバー - エディターでインターフェースを構築するチュートリアル
• ユーザーインターフェース - テキスト入力 - テキストフィールドを構築するチュートリアル
• タッチスクリーンのジョイパッド操作 - 画面上のジョイスティックを構築するチュートリアル
• 2D - スプライト、テクスチャアトラス、9スライス
• PCUI - ツールやエディターを構築するためのHTMLコンポーネントライブラリ