【PlayCanvas】UI機能のテスト 2021 6/07 ゲーム 開発 2021年6月7日 PlayCanvasのUI機能を使ってみました。 あわせて読みたい User Interface Basics | Learn PlayCanvas 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をコピーしました！ ファーストお父さん 【耳コピ】ぎゅーっ はかせ 関連記事 【ゲームレビュー】エターナルサガ：亡国の傭兵団 2022年12月30日 【ゲームレビュー】これさえなければ…あと一歩のリメイク『タクティクスオウガ リボーン』 2022年12月13日 iframeを使わずにPhaserゲームをWordPress記事に埋め込む方法 2022年8月15日 【JavaScript】クリックパワーを溜めろ！（コード付き） 2022年8月14日 【PyScript】三目不並 2022年8月13日 【ゲームレビュー】カップルでプレイできる協力ゲーム？「It Takes Two」でしょ！ 2022年3月5日 【ゲームレビュー】はじめてじゃなくても学びアリ？〜現役ゲームプログラマーが『はじめてのゲームプログラミング』を分析してみた〜 2022年2月19日 ローカル開発環境の構築 2021年11月21日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
コメント