Using dom class to create html overlay

Phaser 3
1

Hello everyone,

Me and two of my classmates are working on a game project. We are attempting to use the dom class to add the html overlay, but nothing we have done seems to work. Whether its a form or just a string of test, it doesn’t display. We have gone through the API documentation, the phaser examples on github and have found other posts here and on stack overflow with no luck. We’ve been spinning our wheels on this for the last week so we would be greatly appreciative of any assistance.

All three of us are using Chrome browser. I have been working locally with XAMPP. Below is my most recent attempt where I was trying a different approach by using the div tutorial located at Phaser - Examples - Div Depth

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Fractured Worlds</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'divId',
    dom: {
        createContainer: true
    },
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
this.load.image('title', 'assets/Title1.png');
}

function create ()
{
this.add.image(200, 100, 'title');

    var div1 = document.createElement('div');
    div1.style = 'background-color: lime; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
    div1.innerText = 'Phaser 3';

    var div2 = document.createElement('div');
    div2.style = 'background-color: yellow; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
    div2.innerText = 'Phaser 3';

    var element1 = this.add.dom(300, 0, div1);
    var element2 = this.add.dom(400, 0, div2);

    element1.setDepth(2);

}
</script>

</body>
</html>
2

:wave:

Make sure game config has

{ dom: { createContainer: true } }
2 Likes
3

Thank you, Sam. It’s not showing my full code that I had included. So, I don’t know if you saw it. inside var config{} I have parent: divID, then next line is dom: {createContainer: true}, then config is passed into new phaser.game(). Is that incorrect?

Again, thank you for your time.

4

hey CJ,
the ‘parent’ is the HTML element where the phaser canvas will be rendered to. i usually have one in my html like that:

<div id="phaser-game"></div>

and then in the config it needs to be:

parent: 'phaser-game'

try uploading your code somewhere so we can see what might go wrong

5

Change the Phaser script to https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js.

There’s no DOM game object before v3.17.0.

6

I did the script change, but nothing displays still. I uploaded a page, just trying to get the example to work off of the API documentation. The link is: http://rfdisplay.com/phasergame/phasertest.html

7

Open the browser dev tools console and look for errors.

There’s an extra . in the script URL, remove it.

Change createContainer = true to createContainer: true.

8

It is now working, thank you. Such beginner oversights.