この記事は、
事務所デジタルツインプロジェクト-PlayCanvas/Babylonjs | GWアドベントカレンダーの8日目の記事です。
弊社の事務所にDALIというオープンでデジタルな照明制御の機器を導入したので、PlayCanvasで仮想空間に同じ事務所を作成し、Web上でボタンを押すと仮想空間の照明器具も点灯すると同時に、現実空間の照明も点灯、その逆もしかりというデジタルツインをやろうとしています。
前回の記事ではPCのキーボードのキーを押すと、照明が点灯するというふうにしました。(題名はボタンになっていますが…)
PlayCanvasでボタンを押すと照明をOn/Offする方法|デジタルライト(Digital-light.jp)
今度は、PlayCanvasでボタンを表示させて、そこをマウスでクリックしてボタンを押すようなことをしたいとおもいます。
そうすることで、Buttonを押すというイベントから、外部APIを叩き、現実空間のDALI照明を点灯・消灯させることにつなげられるかなと。
参考にするプロジェクト
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-7.png)
参考にするプロジェクトはこちら。
User Interface – Buttons | Learn PlayCanvas
あと、2019年のPlayCanvasアドベントカレンダーで解説されている記事もよさそうです。
PlayCanvasでクリックできるボタンを設置する – Qiita
2D Screenの作成
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-8.png)
Tutorialでは2D Screenのセットアップをしていますので、自分でも新しくPlayCanvasのプロジェクトを作成し、Add Unser Interfaceから2D Screenを追加します。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-10.png)
HIERARCYから追加。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-11.png)
これで2Dスクリーンがはいりました。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-12.png)
スクリーンの解像度はここで設定できます。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-13.png)
カメラの位置は2D Screenが見えるところに移動させます。
テキストの挿入
![2022-05-05_22-19-03.png 2022 05 05 22 19 03](https://digital-light.jp/wp-content/uploads/2022/05/2022-05-05_22-19-03-1.png)
TEXTもいれてみました。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-15.png)
TEXTはフォントをいれないと表示されないので、TutorialプロジェクトにあったフォントをASSETSにコピペ。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-14.png)
TEXTのELEMENTのFONTにドラッグ&ドロップ。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-16.png)
位置を調整してTEXTが表示されました。
ボタンの挿入
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-17.png)
HIERARCYからButton Elementを挿入しました。
ボタンの使い方については、こちらの公式マニュアルを参照。
Transition ModeはTintとSprite Changeがありますが、Tintだと単純にマウスを上にした時や押したときに色を変える、Sprite Changeはスプライトを変えて複雑なことができる様子です。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-20.png)
今回はTintでいきます。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-21.png)
Launchしてみたところ、マウスを上にのせると赤、押すと青になりました。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-22.png)
いろいろボタンのテキストや位置・サイズを変更したら、Launchの画面で押しても反応しなくなりました。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-23.png)
確認の為、新しいButtonを追加し、Launchをやり直したところ、最初のボタンも反応するようになりました。変更があった場合には、再度、Launchをやり直すほうが良さそうです。
Buttonを押すとスクリプトが動くようにする
このボタンにスクリプトを組み込みます。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-24.png)
ButtonにADD COMPONENTでScriptを追加します。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-25.png)
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.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/05/UntitledImage-26.png)
ボタンをクリックすると、alertメッセージが表示されました。
まとめ
以上、ボタンを押すとイベントが発生するということができました。
次は、ボタンを押すと、照明が点灯・消灯するということをやっていきたいとおもいます。