【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をコピーしました！ ファーストお父さん 【耳コピ】ぎゅーっ はかせ 関連記事 【Unity】『斜方蹴射』をリファクタリングしてみた 2024年9月27日 【Unity】『斜方蹴射』をちょっと豪華にしてみる 2024年9月22日 【Unity】斜方蹴射 2024年9月21日 【Unity】神経衰弱ゲーム 2024年9月11日 【Unity】機能別サンプル：マテリアル（Standard Shader） 2024年9月5日 【Unity】機能別サンプル：Particle System 2024年9月2日 【Unity】機能別サンプル：uGUI 2024年8月31日 【Unity】機能別サンプル：2D物理 Joint 2024年8月30日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
コメント