【PlayCanvas】html,CSSを使ってUIを表示してみよう！【Web】

【PlayCanvas】html,CSSを使ってUIを表示してみよう！【Web】

福田です！
今回は、html,cssを用いてPlayCanvas上にUIを追加する方法について解説していきます！
今回は、ボタンを生成し、そのボタンを押すことでBoxのカラーが変わるようなものに挑戦しましょう！
ではよろしくお願いします！

必要ファイルの準備

ボタンを生成するのに必要なのは、html,css,jsの3つのスクリプトです。
とりあえずPlayCanvasのプロジェクト内に作りましょう！

BlankProjectを立ち上げた時にBoxが置いてあると思うんですが、これは後で色変えするときの対象にするので残しておきます。

各コードを記述しよう！

ではそれぞれに必要なコードを記述していきます。
まずhtmlです！

<button class="colorButton">Change Color</button>

はい、これだけです。
PlayCanvasで実行する時点で、すでにWebページの基礎部分は出来上がっています。
なので、単純に追加したい要素だけを記述すれば問題ないです！

次にcssです！
これはただ見た目を整えるだけなので好きに書いて大丈夫です！
一応、ボタンの配置位置の調整だけ下記に記します。

.colorButton {
position: absolute;
top: 20px;
left: 20px;
padding: 5px;
}

最後に実行時の読み込み処理をするJSを記述します！
また、ここに追加でカラーチェンジの処理も記述します！

var Script = pc.createScript('script');

Script.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
Script.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });

Script.prototype.initialize = function () {
    var style = document.createElement('style');

    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';

    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';

    document.body.appendChild(this.div);

    var buttons = document.getElementsByClassName('colorButton');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', this.changeColor.bind(this));
    }

};

Script.prototype.changeColor = function () {
    // "Box"という名前のエンティティを探す
    var boxEntity = this.app.root.findByName("Box");
    if (!boxEntity) {
        console.warn("Box entity not found.");
        return;
    }

    // 新しいマテリアルを作成
    var material = new pc.StandardMaterial();
    material.diffuse.set(Math.random(), Math.random(), Math.random());
    material.update();

    // エンティティのマテリアルを更新
    boxEntity.render.material = material;
};

この3つ作成したら、下図のように設定してください！

今回はRootにScriptをアタッチしましたが、どれでも大丈夫です！

実行してみよう！

さて、それでは実行してみます！

ボタンのUI要素がばっちり出ています！
PlayCanvas側のシーンとの同期が出来ていれば、Boxのカラーも問題なく変わります！

今回はＵＩ要素の作成と、シーンとの同期の部分の基礎がしっかりと分かったのではないでしょうか？
jsとWebGLが許す限りいくらでも機能を盛り込んでいけるのでぜひお楽しみください！
福田でした！

sherpa.staff