Resumo da utilização do objeto DOM (Phaser3)

Coisas que eu quero fazer

Como o objeto Dom, que insere tags HTML (DOM) no Phaser3, é usado de forma diferente de outros GameObjects, vou resumir seu uso e os pontos a serem observados.

Como usar

Preparar

Para usar objetos DOM, você precisa definir a seguinte configuração:

    dom :{
        createContainer: true
    },

Por exemplo, crie e defina a seguinte configuração.

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
};

Criação de objetos

Os objetos DOM são criados dentro da classe Scene da seguinte forma:

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

`document.createElement` é uma função padrão do JavaScript, não uma função do Phaser3.

Criamos um elemento HTML e o passamos para add.dom para transformá-lo em um objeto Phaser3.

Memorando

O elemento adicionado também pode ser visualizado no Modo de Depuração em navegadores como o Chrome.

Inscrição no evento

Isso especifica a ação que ocorre quando o GameObject criado é clicado.

No entanto, assim como aconteceu com outros GameObjects, escrever o código da seguinte forma não funcionou.

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

Em vez disso, conseguimos definir o evento de clique configurando o evento no Elemento em vez do GameObject, como mostrado abaixo.

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

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

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