【PlayCanvas】UI機能のテスト

ゲーム

2021.06.07

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");    
};

タッチが可能なデバイスかどうかで処理を分ける必要があります。