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

PlayCanvasでクリックに反応するボタンを追加する方法

今回のプロジェクトの詳細はこちらになります

• 動作（デモ）
  https://playcanv.as/p/eWCvBycn/

• プログラム
  https://playcanvas.com/project/657221

PlayCanvasでクリックできるボタンを4つ追加するには、このヒエラルキーになります。

• 2D Screen
  • Button
    • Text
  • Button
    • Text
  • Button
    • Text
  • Button
    • Text

2D Screenとボタンをエディターから追加する

2D Screenを「Add Entity」　→ 「User Interface 」 → 「2D Screen」から追加します。

クリックに反応させる

ボタン(Element Component)にクリックを検出するには、 this.entity.element.onでクリックイベントを取得します。

var Popup = pc.createScript('popup');
// エディターから変更できるようにattribteusを追加する
Popup.attributes.add("message", {type: "string", default: "message"})

// 起動時
Popup.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))
    }
    
};

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

PlayCanvas開発で参考になりそうな記事の一覧です。 入門

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

応用

• PlayCanvasのコードエディターでes6に対応する
• Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
• PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む

その他の記事はこちらになります。

• React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
• PlayCanvasのエディター上でHTML, CSSを組み込む方法
• 【iOS13】新しくなったWebVRの使い方

その他関連 - [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)

PlayCanvasのユーザー会のSlackを作りました！

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

日本PlayCanvasユーザー会 - Slack