Phaser 3 interacts with DOM Elements?

Phaser 3
1

Hello, there! I’m new here, and so forgive me if I post this in a wrong place. Anyway, my simple questions:

Can Phaser 3 interact with HTML elements outside the game, such as div, p, h1, etc.?
If it can, how can I do that? Is there an example for that?

For example, I wrote my game’s title inside a div, above the game’s canvas. In the middle of the game, I want to change the title. Can I do that?
Thank you!

I have to say, this community is very supportive and kind. Respect for those who are kindly answer this type of “dumb” questions. :smiley: . I hope samme answer see this post :laughing:

2

These might help, and the answer is “yes” and make sure you’re using v3.17+:
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/domelement/ (my favorite reference site! with examples)
https://phaser.io/examples/v3/category/game-objects/dom-element
https://phasergames.com/phaser-3-input-text-form-ui-part-1/ (from one of my favorite authors!)

and make sure you’re using v3.17+ (see devLog here)

Advice from other forum members about DOM elements here and another (very important) clue here

1 Like
3

If your game’s title is in a div that wasn’t created through Phaser DOM elements, the answer is still yes. You are just writing JavaScript that’s running on a webpage.

You can get a reference to that DOM element via document.querySelector and then change it’s textContent value.

Something like:

document.querySelector('#gameTitle').textContent = 'new game title';
1 Like
4

Thank you! I’ll check it out today, after I finish my classes. I might be back for more questions if later I get confused. I’m super excited with this engine :laughing:

5

Thanks for the reply!! I’ll try it out :grin: