Domオブジェクトを使うまとめ(Phaser3)

やりたいこと

Phaser3上にHTMLのタグ(DOM)を配置するDomオブジェクトを使用すると、他のGameObjectとは使用方法が異なったため使用方法と注意点をまとめます。

使用方法

準備

DOMオブジェクトを使用するには以下のコンフィグをセットする必要があります。

    dom :{
        createContainer: true
    },

例えば以下のようにConfigを作成してセットします。

const config = {
    type: Phaser.AUTO,
    width: 300,
    height: 200,
    parent: 'game-container',
    backgroundColor: '#000000',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    dom :{
        createContainer: true
    },
    scene: scene_array
};

オブジェクトの作成

DOMオブジェクトはSceneクラスの中で以下のように作成します。

let el = document.createElement('div');
el.innerHTML = text
let dom = this.add.dom(x, y, el, style);

document.createElementはPhaser3の関数ではなく、通常のJavaScriptの関数です。

HTMLのElementを作成し、add.domに渡すことでPhaser3のオブジェクトにします。

メモ

追加したElementはChromeなどのDebug Viewでも確認することができます。

イベントの登録

作成したGameObjectがクリックされたときの動作を指定します。

しかし他のGameObjectと同様に以下のように書いても動作しませんでした。

dom.setInteractive()
dom.on("pointerdown", (event) => {alert()})

かわりに以下のようにGameObjectではなくElementにイベントを設定することでクリック時のイベントを設定することができました。

let el = document.createElement('div');
el.innerHTML = text

el.onclick = ()=>{alert()};

let dom = this.add.dom(x, y, el, style);