index.htmlとそれ以外のファイル・フォルダを別ディレクトリ(サーバー)に配置する
PlayCanvasではHTML, CSSを使って手軽にUIの作成等を行うことが可能です。
ここでは簡単な情報の入出力を行うサンプルと共に使い方を紹介します。また、コード全文を記事の最後に記載しておりますので参考までにお使いください。
HTMLに必要となる要素を記述します。デフォルトでは画面の見えない位置に挿入されてしまうため、すべてをまとめたdiv要素をCSSから配置を変更します。
上記のコードをinitializeメソッド内で実行することでHTML, CSSがシーンにロードされます。
ゲームのスコアや、ステートなど、画面へのテキスト出力が必要となるシチュエーションは多くあります。
モバイル端末ではconsole.log()を確認することができないので、HTMLの利用が便利です。
HTMLはinput要素を使用することで多くの入力インタフェースを実装することが可能です。このサンプルでは、select, button要素をそれぞれ紹介します。
出力時と同じように、document.getElementById()でエレメントを取得しそのなかのvalueプロパティに入力された値が可能されています。
button要素は上記のように記述することでイベントを取得できます。