PlayCanvas

PlayCanvasでボタンを押すとイベントが発生する方法を調べてみた

この記事は、
事務所デジタルツインプロジェクト-PlayCanvas/Babylonjs | GWアドベントカレンダーの8日目の記事です。

弊社の事務所にDALIというオープンでデジタルな照明制御の機器を導入したので、PlayCanvasで仮想空間に同じ事務所を作成し、Web上でボタンを押すと仮想空間の照明器具も点灯すると同時に、現実空間の照明も点灯、その逆もしかりというデジタルツインをやろうとしています。

前回の記事ではPCのキーボードのキーを押すと、照明が点灯するというふうにしました。(題名はボタンになっていますが…)
PlayCanvasでボタンを押すと照明をOn/Offする方法|デジタルライト(Digital-light.jp)

今度は、PlayCanvasでボタンを表示させて、そこをマウスでクリックしてボタンを押すようなことをしたいとおもいます。

そうすることで、Buttonを押すというイベントから、外部APIを叩き、現実空間のDALI照明を点灯・消灯させることにつなげられるかなと。

参考にするプロジェクト

UntitledImage

参考にするプロジェクトはこちら。

User Interface – Buttons | Learn PlayCanvas

あと、2019年のPlayCanvasアドベントカレンダーで解説されている記事もよさそうです。

PlayCanvasでクリックできるボタンを設置する – Qiita

2D Screenの作成

UntitledImage

Tutorialでは2D Screenのセットアップをしていますので、自分でも新しくPlayCanvasのプロジェクトを作成し、Add Unser Interfaceから2D Screenを追加します。

UntitledImage

HIERARCYから追加。

UntitledImage

これで2Dスクリーンがはいりました。

UntitledImage

スクリーンの解像度はここで設定できます。

UntitledImage

カメラの位置は2D Screenが見えるところに移動させます。

テキストの挿入

2022 05 05 22 19 03

TEXTもいれてみました。

UntitledImage

TEXTはフォントをいれないと表示されないので、TutorialプロジェクトにあったフォントをASSETSにコピペ。

UntitledImage

TEXTのELEMENTのFONTにドラッグ&ドロップ。

UntitledImage

位置を調整してTEXTが表示されました。

ボタンの挿入

UntitledImage

HIERARCYからButton Elementを挿入しました。

Button | Learn PlayCanvas

ボタンの使い方については、こちらの公式マニュアルを参照。

Transition ModeはTintとSprite Changeがありますが、Tintだと単純にマウスを上にした時や押したときに色を変える、Sprite Changeはスプライトを変えて複雑なことができる様子です。

UntitledImage

今回はTintでいきます。

UntitledImage

Launchしてみたところ、マウスを上にのせると赤、押すと青になりました。

UntitledImage

いろいろボタンのテキストや位置・サイズを変更したら、Launchの画面で押しても反応しなくなりました。

UntitledImage

確認の為、新しいButtonを追加し、Launchをやり直したところ、最初のボタンも反応するようになりました。変更があった場合には、再度、Launchをやり直すほうが良さそうです。

Buttonを押すとスクリプトが動くようにする

このボタンにスクリプトを組み込みます。

UntitledImage

ButtonにADD COMPONENTでScriptを追加します。

UntitledImage

button.jsというスクリプトをASSETSに作成。

Buttonのスクリプトはこちらの記事を参考にしました。

PlayCanvasでクリックできるボタンを設置する – Qiita

var Button = pc.createScript('button');

Button.attributes.add("message", {type: "string", default: "message"})


// initialize code called once per entity
Button.prototype.initialize = function() {

     // タッチできる端末だったら
    if(this.app.touch){
         // element componentがタッチされたらattributes: messageアラートとして表示する
        this.entity.element.on(pc.EVENT_TOUCHSTART, () => this.show(this.message))
    }else{
         // element componentがクリックされたらattributes: messageアラートとして表示する
        this.entity.element.on("click", () => this.show(this.message))
    }

};

// update code called every frame
Button.prototype.update = function(dt) {

};

Button.prototype.show = (message) => alert(message)

これでLaunchしてみます。

実行画面

UntitledImage

ボタンをクリックすると、alertメッセージが表示されました。

まとめ

以上、ボタンを押すとイベントが発生するということができました。

次は、ボタンを押すと、照明が点灯・消灯するということをやっていきたいとおもいます。

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です