この記事は「GW Advent Calendar PlayCanvasアドベントカレンダー」の5/1分の記事になります。
PlayCanvasで開発する時、UIなどを作る場合にはDOM Elementを使うんですが、どう使っているのかを個人的な独断と偏見で紹介したいと思います。
まずは前知識。
PlayCanvasは、デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。PlayCanvas社は2017年よりSnap.Incに買収されましたが、現在も開発は継続されています。
https://github.com/playcanvas/engine
いわゆる、WebGLのライブラリのようなもので、Three.jsなどを使ったことある方はとっつきやすいかもしれないです。エンジン自体はオープンソースです。
他ライブラリと違って、Web上で操作するエディターがあることが特徴ですね。 これのおかげで多少コードを書くのが苦手でも、UnityやPhotoshopのようなツールのように開発ができます。
今回の記事はこのPlayCanvas Editorを使う中でのお話をします。
PlayCanvasでUIを作る際には、PlayCanvasに備わっているScreen ComponentとElement Componentを使います。 画像を使ってボタンを作成したり、テキストはフォントをインポートして使うことができます。 しかし、これはHTMLのDOM Elementとは異なり、いい感じに扱いこなすことができないのが、もどかしいです。
そこで、Screen ComponentとElement Componentを使ったUIではなく、 HTMLのDOM Elementを使ってUIを作ることができます。
しかし、PlayCanvas EditorからHTMLのDOM Elementを使ったUIを作る場合、
createElement()や、PlayCanvasのアセットにHTMLファイルを作成し、appendChild()などで追加するのが主なやり方です。