3DワールドをUIにレンダリング
専用カメラで 3D プレビューをレンダリングし、インベントリアイコンやキャラクター選択パネルなどの UI 要素に表示します。
専用カメラで 3D プレビューをレンダリングし、インベントリアイコンやキャラクター選択パネルなどの UI 要素に表示します。
HTML と CSS の Asset をライブリロードで編集し、Scene が動いたまま HUD の変更を即座に反映します。
標準の HTML と CSS でレイヤー化した HUD とメニューを構築し、WebGL キャンバス上に合成します。
複数のカメラとレンダリングレイヤーを組み合わせ、1 つの PlayCanvas の Scene でスクリーン空間の UI とワールド空間の要素を混在させます。
Layout Group と子のレイアウトルールでボタンとパネルを配置し、レスポンシブな PlayCanvas の UI フローを構築します。
layout groups、Button、スプライト、アトラスでショップ画面を組み立て、アイテム一覧と購入操作をすっきり表示します。
プラスとマイナスボタンをプログレス表示と組み合わせ、ステータスを増やしUIでリアルタイムの数値を表示します。
HTMLのテキスト入力をキャンバス上に重ね、OSネイティブの入力、コピー&ペースト、IMEをPlayCanvas UIのフォーカスに連動させます。
ネストしたElementとアンカーで塗りつぶし可能なプログレスバーを作り、空から満杯まで時間とともにアニメートします。
Screen上のElementとButtonコンポーネントでクリック可能なボタンを作り、ホバー、押下、ナビゲーション状態のイベントを接続します。
JSONデータからスクロールするリーダーボードを埋め、Elementのテキスト行とスクリプトのソートでスコア表示を行います。
WebXRのレーザーポインターや視線でスクリーン空間のUIを指し、デスクトップ、モバイル、ヘッドセットのブラウザでクリックを処理します。
動画とプレイ可能なデモ付きで、物理、UI、主要ワークフローを網羅した PlayCanvas ゲーム制作の流れをたどります。
PlayCanvas の UI 要素でカスタマイズ可能なオンスクリーンのツインスティック風ジョイパッドを追加し、モバイルのキャラクター操作に使います。
ランタイムで Scroll View の子を追加・削除し、PlayCanvas のスクリーン空間 UI でリストやフィードを組み立てます。
ノッチや角丸デバイスのセーフエリア内にスクリーン UI を配置し、コントロールをシステムバーやハードウェアの切り欠きから避けます。
マテリアルとアニメーションで放射状のローディングスピナー UI を実装し、コンテンツ受信中のフィードバックを明確にします。
3Dワールド座標をスクリーン空間のアンカーに投影し、ラベルとマーカーが2Dオーバーレイ上で動くオブジェクトを追従します。
ワールド空間のElementパネルを重ね、UIクワッドが不透明ジオメトリの後に描画され、忙しい3Dシーンの上でも読みやすくします。
Element Component のテキストとレイアウト用の Script を、アラビア語などの右から左へ書く言語向けに正しい配置の流れで調整します。
小さなライブラリでブラウザ上でランタイムに QR コードを生成し、UI やテクスチャに表示します。