【PlayCanvas】UI機能のテスト

ゲーム

PlayCanvasのUI機能を使ってみました。

User Interface Basics | Learn PlayCanvas

UI機能については、日本語版のユーザーマニュアルにはページが無いようなので、英語版のマニュアルを参考にしました。




完成品

できあがったのがこちらです。

ヒエラルキー

ヒエラルキーは以下のような構成になっています。

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機能を一通り触ってみました。

次回はシーン遷移まわりを触ってみようと思います。

コメント

タイトルとURLをコピーしました