Adding HTML elements

Phaser 3
1

Hello,
Is it already possible to add HTML elements because i can’t find any examples for it?
I’m trying to add a dropdown where users can choose a particular item, nothing special, just don’t know how to add it.

Thanks,
Pietje

2

I don’t think that’s something that Phaser can handle. Phaser is designed for creating HTML 5 games in a <canvas> element. There’s a variety of other libraries you could use to add or interact with HTML elements though. jQuery would be the one that I recommend.

3

Actually you can! In a recent release, Phaser added support for dom elements.

Take a look at the examples in this folder: https://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q=.

4 Likes
4

DOM Elements are still experimental and, according to Phaser’s production build configuration, excluded from any of the release builds. You’d have to use a development build or build Phaser on your own, keeping in mind that they could malfunction.

As far as I’ve heard, they’ll be finalized after the Scale Manager is implemented but don’t quote me on it.

2 Likes
5

I’m working on a series of blog posts on this topic right now, because I ran into the same problem at work.

It works by creating and hiding the HTML elements in your index.html and then accessing them from Phaser

this.formUtil = new FormUtil({
scene: this,
rows: 11,
cols: 11
});
this.formUtil.showNumbers();
//
//
//scale the element to a percentage of the game’s width
this.formUtil.scaleToGameW(“myText”, .3);
this.formUtil.placeElementAt(16, ‘myText’, true);