【PlayCanvas】UI機能のテスト 2021 6/07 ゲーム 開発 2021年6月7日 PlayCanvasのUI機能を使ってみました。 あわせて読みたい UI機能については、日本語版のユーザーマニュアルにはページが無いようなので、英語版のマニュアルを参考にしました。 目次完成品 できあがったのがこちらです。 </noscript><iframe data-src="https://playcanv.as/p/9m63aMz5/" width="600" height="400" frameborder="0" marginwidth="0" marginheight="0" class="lazyload" > ヒエラルキー ヒエラルキーは以下のような構成になっています。 Camera PlayCanvasのUIはカメラに投影する仕組みになっているので、ワールド内に3D要素が無かったとしても、1つ以上のカメラが必要です。 特にパラメーターは設定せず、作って配置だけしている状態です。 2D Screen UIを表示する際に必要になります。 UI要素（エレメント）たちは、全て2D Screenの子として配置します。 UI全体の解像度もここで設定します。 Text テキストを表示するためのエレメントです。 表示する文字列フォント(.ttfファイルをASSETSにドロップしてから使う)フォントサイズ文字色 などを設定できます。 Image 画像を表示するためのエレメントです。 テキストの代わりにテクスチャを指定するだけの違いですね。 Opacityで透明度の指定もできます。 Group エレメントをグループとしてまとめるためのエレメントです。 通常のエンティティにも子の座標を追従させる機能がありますが、2D要素は追従しません。 今回の例では、テキストと画像をひとまとめにしています。 メニューウィンドウを一つのグループにすれば、ウィンドウを移動させれば内部のテキストが勝手に追従するみたいなこともできそうです。 Button 押されたら反応するボタンです。 通常のエレメントコンポーネントのほか、Buttonというコンポーネントが追加で設定されており、ここでボタンを押した時の色などを設定できます。 Translation Modeの設定をSprite Changeに変更すれば、押された時などの画像を差し替えられるので、より高度な演出ができそうです。 ボタンが押された時の処理はScriptコンポーネントを追加して設定します。 var Button = pc.createScript('button'); //--------------------------------------- // 初期化 //--------------------------------------- Button.prototype.initialize = function() { if(this.app.touch){ this.entity.element.on(pc.EVENT_TOUCHSTART, this.onButton); }else{ this.entity.element.on("click", this.onButton); } }; //--------------------------------------- // 更新 //--------------------------------------- Button.prototype.update = function(dt) { }; //--------------------------------------- // ボタンが押された //--------------------------------------- Button.prototype.onButton = function(event) { console.log("button clicked"); }; タッチが可能なデバイスかどうかで処理を分ける必要があります。 ScrollView スクロール可能な要素を配置するためのエレメントです。 Viewportの大きさに合わせて、Content以下の要素が表示されるようになっています。（Viewportからはみ出た部分がスクロールで表示される） アンカー 各UIエレメント共通の設定で重要なものに、アンカー設定があります。 アンカーは、親エレメントに対して子エレメントがどのように追従するかを指定します。 例えばウィンドウ内にボタンを配置する場合。 アンカーがTopLeft（左上）であれば、ウィンドウを移動させるとボタンも一緒に移動しますが、ウィンドウサイズを変更した場合は特に変わりません。 ウィンドウサイズがボタンよりも小さくなると、ボタンの右下が見切れるようになります。 逆に、画面の右下にアイコンを固定したい場合は、アンカーを右下に指定すれば、画面サイズが変化してもアイコンが見切れることはありません。 スマホでもPCでも遊べるゲームを作る場合は画面サイズが変化するので、アンカー設定を適切に行わないとレイアウトが崩れてしまう恐れがあります。 今回のサンプルでは、アンカーは全て左上に設定しています。 まとめ UI機能を一通り触ってみました。 次回はシーン遷移まわりを触ってみようと思います。 ゲーム 開発 PlayCanvas よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ ファーストお父さん 【耳コピ】ぎゅーっ はかせ 関連記事 【SunoAI】ゲームレビューソングまとめ 2024年3月6日 【SunoAI】『桃太郎電鉄ワールド』の感想を歌にしてみた 2024年3月3日 【ゲームレビュー】『桃太郎電鉄ワールド』 イベント過ぎれば毒となる？ 2024年2月7日 【ゲームレビュー】『イースX』 バトルだけじゃない？ RPG の一つの完成形～ 2024年1月20日 【Three.js】UI を Phaser で表示する 2024年1月11日 【ゲーム】モンハンから学ぶ、モノゴトの上達法 2023年12月1日 【ゲームレビュー】いい感じの落としどころ！『モンスターハンターNow』 2023年10月8日 【ゲームレビュー】エターナルサガ：亡国の傭兵団 2022年12月30日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
コメント