Can I fire Phaser 3 events from DOM?-CodePudding

I'm trying to fire a Phaser 3 event from DOM like I read on this example I found on internet: "The game instance is accessible when you create the game, with something like const game = new Phaser.Game(config); And you can access everything from your desired scene from this instance const scene = game.scene.keys.sceneName And do something like

textareaElement.addEventListener("change", function(event) {
    const text = textareaElement.value;
    scene.updateGameTextFromTextarea(text);
});

This is my project config:

const config = {
    // Phaser.AUTO, intenta usar WebGL y si el navegador no lo  tiene, usa canva.
    type: Phaser.AUTO,
    parent: 'game-container',
    width: 650,
    height: 522,
    scene: [MainScene], 
    scale: {
        mode: Phaser.Scale.FIT
    },
    dom: {
        createContainer: true
    },
    physics: {
        default: 'arcade',
        arcade: {
        // debug: true,
        // gravity: { y: 350 }
        }
    }
}

// Inicializacion del objeto
game = new Phaser.Game(config)`

I actually can access to game from console, but can´t fire events.

const scene = game.scene.keys.MainScene
scene.greeting()

get:

Uncaught TypeError: Cannot read properties of undefined (reading 'greeting') at :1:7

Code: https://github.com/Neffer2/bull-rompecabezas.git

CodePudding user response：

There are two issues:

The first issue is, that the name of the scene is gameScene not MainScene , this is the value from the constructor.

The second issue is the Scene/Game Instance is not populated right away, you would have to wait abit. I simulated this in the demo with the setTimeout, or you can also click the Button to call the same function from the scene.

Here a short Demo:

document.body.style = 'margin:0;';

class MainScene extends Phaser.Scene {
    constructor(){
        super('gameScene');
    } 
    
    test(){
        console.info('Hello From Scene');
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:{ y: 100 },
            debug: true
        }
    },
    scene: [ MainScene ],
    banner: false
}; 

var game = new Phaser.Game(config);

setTimeout( () => game.scene.keys.gameScene.test(), 1000);  // Wait for generation

document.querySelector('button').addEventListener('click', () => game.scene.keys.gameScene.test())

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

<button id="button"> Fire from the DOM </button><br>