メインコンテンツまでスキップ

「ui」タグのついた21記事

全てのタグを見る

3DワールドをUIにレンダリング

専用カメラで 3D プレビューをレンダリングし、インベントリアイコンやキャラクター選択パネルなどの UI 要素に表示します。

HTML/CSS - ライブ更新

HTML と CSS の Asset をライブリロードで編集し、Scene が動いたまま HUD の変更を即座に反映します。

HTML/CSS UI

標準の HTML と CSS でレイヤー化した HUD とメニューを構築し、WebGL キャンバス上に合成します。

Multiple Camera Layers

複数のカメラとレンダリングレイヤーを組み合わせ、1 つの PlayCanvas の Scene でスクリーン空間の UI とワールド空間の要素を混在させます。

Tutorial: Layout Groups

Layout Group と子のレイアウトルールでボタンとパネルを配置し、レスポンシブな PlayCanvas の UI フローを構築します。

Tutorial: Shop User Interface

layout groups、Button、スプライト、アトラスでショップ画面を組み立て、アイテム一覧と購入操作をすっきり表示します。

UI - カウンター

プラスとマイナスボタンをプログレス表示と組み合わせ、ステータスを増やしUIでリアルタイムの数値を表示します。

UI - テキストインプット

HTMLのテキスト入力をキャンバス上に重ね、OSネイティブの入力、コピー&ペースト、IMEをPlayCanvas UIのフォーカスに連動させます。

UI - プログレスバー

ネストしたElementとアンカーで塗りつぶし可能なプログレスバーを作り、空から満杯まで時間とともにアニメートします。

UI - ボタン

Screen上のElementとButtonコンポーネントでクリック可能なボタンを作り、ホバー、押下、ナビゲーション状態のイベントを接続します。

UI - リーダーボード

JSONデータからスクロールするリーダーボードを埋め、Elementのテキスト行とスクリプトのソートでスコア表示を行います。

WebXR UI インタラクション

WebXRのレーザーポインターや視線でスクリーン空間のUIを指し、デスクトップ、モバイル、ヘッドセットのブラウザでクリックを処理します。

ジョイスティック操作

PlayCanvas の UI 要素でカスタマイズ可能なオンスクリーンのツインスティック風ジョイパッドを追加し、モバイルのキャラクター操作に使います。

モバイルUIセーフエリア

ノッチや角丸デバイスのセーフエリア内にスクリーン UI を配置し、コントロールをシステムバーやハードウェアの切り欠きから避けます。

ローディングサークルUI

マテリアルとアニメーションで放射状のローディングスピナー UI を実装し、コンテンツ受信中のフィードバックを明確にします。

右から左に書く言語のサポート

Element Component のテキストとレイアウト用の Script を、アラビア語などの右から左へ書く言語向けに正しい配置の流れで調整します。

実行時のQRコード生成

小さなライブラリでブラウザ上でランタイムに QR コードを生成し、UI やテクスチャに表示します。