Images and DOM depth

Phaser 3
1

Hi guys,
I was playing around with DOM and depth in Phaser 3 and I’m not able to put an image over a DOM object. Looks like their have their own depth over the Game depth… any ideas on this?

Thanks in advance!

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, 300, div1);
element1.setDepth(2);

var element2 = this.add.dom(400, 350, div2);
element2.setDepth(1);

var img = this.add.image(350, 250, 'einstein');
img.setScale(0.5);
img.setTint(0xff0000);
img.setDepth(4);

var img2 = this.add.image(400, 300, 'einstein');
img2.setScale(0.5);
img2.setDepth(5);

imagen

2

Hi,
I can be wrong, but depth in game apply inside the canvas element, and depth in DOM apply under or over the canvas element.

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html

1 Like
3

Thanks for the quick answer!
I guess you are right because I read only setDepth method where is indicated “The depth of this Game Object within the Scene.” (probably copy-paste or reused) but is clear at the top of the doc saying Phaser will automatically create a DOM Container div that is positioned over the top of the game canvas

4

DOM elements are physically positioned over (or under) the game canvas itself. It’s not possible to cover them with another game object. Further down, the docs say:

It’s important to remember some limitations of DOM Elements: The obvious one is that they appear above or below your game canvas. You cannot blend them into the display list, meaning you cannot have a DOM Element, then a Sprite, then another DOM Element behind it.