Hi,
I want to interact with the DOM and JavaScript functions outside of the Phaser game. The following link was great - [Is there a Phaser event for when you type in dom inputs?](// Is there a Phaser event for when you type in dom inputs?) but it unfortunately spawned some more questions when I tried some examples.
- How do you give a scene a name?
- The add.dom() method did not work when the code was inside the Scene class (it did work if phaser was just setup in a set of script tags). Why is that?
- What is the preferred method to call Scene functionality from an external javascript method - should you use events or just invoke the method?
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"></script>
<script src="phaser.js"></script>
</head>
<body>
<div id='phaser-example'></div>
<input type="hidden" id="domArea" />
<div id='divArea'>
<br/>
<h1>DOM Elements that need to interact with the Phaser Game</h1>
<button onclick="moveGameLogo()">MOVE LOGO BY FINDING CHILD ELEMENT</button>
<br/>
<button onclick="moveGameLogoEvents()">MOVE LOGO USING EVENTS</button>
</div>
<script>
function moveGameLogo()
{
console.log("moveGameLogo() called");
// https://phaser.discourse.group/t/is-there-a-phaser-event-for-when-you-type-in-dom-inputs/10333
var gameElements = window.game.scene.scenes[0].children.list;
for (let i = 0; i < gameElements.length; i++) {
console.log("Name: " + gameElements[i].name)
if (gameElements[i].name == "logo") {
var logo = gameElements[i];
if (logo.x == 210) {
logo.x = 400;
logo.y = 320;
}
else {
logo.x = 210;
logo.y = 540;
}
break;
}
}
// https://phaser.discourse.group/t/is-there-a-phaser-event-for-when-you-type-in-dom-inputs/10333
// Call a method in the phaser.scene.
var scene = window.game.scene.keys.default; // How do you give a scene a name?
scene.arbitrarySceneMethod(300,400,"logo");
}
function moveGameLogoEvents()
{
console.log("moveGameLogoEvents() called");
var phaserGame = window.game;
var emitter = phaserGame.scene.scenes[0].emitter; // This requires that emitter be global in the Example Scene class.
// Move image to bottom right.
emitter.emit('moveImage', 800, 525, "logo");
}
domArea.addEventListener("phaserEvent", function(event) {
respondToPhaserEvent(event, this);
});
function respondToPhaserEvent(event, listeningObject) {
console.log(event.detail.name + " " + listeningObject.id);
document.getElementById("divArea").style.backgroundColor = "lightblue"; // Turns the DIV light blue if the logo is clicked.
}
</script>
</body>
</html>
phaser.js
class Example extends Phaser.Scene
{
// Create our own EventEmitter instance
emitter = new Phaser.Events.EventEmitter();
constructor ()
{
super();
}
preload ()
{
this.load.css('80s', 'assets/loader-tests/80stypography.css');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}
create ()
{
// DOM Elements - floating over the top of your game per https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html
// Try - https://phaser.io/examples/v3/view/game-objects/dom-element/css-text#
var h1 = this.add.dom(450, 100, 'h1', null, 'TEXAS');
h1.setClassName('chrome');
var h2 = this.add.dom(570, 180, 'h2', null, 'Holdem');
h2.setClassName('dreams');
h2.setAngle(-15);
this.add.text(0, 300, "DOM 'Texas Holdem' Text IS NOT SHOWING when extending the Phaser.Scene class", { fontSize: '20px', fontFamily: 'Arial' });
// Setup the image at the bottom right and make it interactive.
var logo = this.add.image(750, 540, 'logo').setInteractive();;
logo.name = "logo";
logo.once('pointerup', this.handleClick, this);
// Set-up an event handler
this.emitter.on('moveImage', this.handler, this);
// Emit it a few times with varying arguments
this.emitter.emit('moveImage', 210, 50, "logo"); // Send image to top left.
}
handler (x, y, name)
{
console.log("handler() name=" + name + " x=" + x + " y=" + y);
var objectToMove = this.children.getByName(name);
objectToMove.x = x;
objectToMove.y = y;
}
handleClick()
{
console.log("handleClick() fired");
var eventDetail = {
detail: {
name: "PhaserClick"
}
};
domArea.dispatchEvent(new CustomEvent("phaserEvent", eventDetail));
}
arbitrarySceneMethod(x,y,name)
{
console.log("handler() name=" + name + " x=" + x + " y=" + y);
var objectToMove = this.children.getByName(name);
objectToMove.x = x;
objectToMove.y = y;
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 1000,
height: 600,
backgroundColor: '#009B3A',
scene: [ Example ]
};
var game = new Phaser.Game(config);