Skip to content

DOM element


Carry DOM element, built-in game object of phaser.


Dom elements 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.

  • Author: Richard Davey



  • Set parent to divId
  • Set dom.createContainer to true.
var config = {
    // ...
    parent: divId,
    // fullscreenTarget: divId, // For fullscreen
    dom: {
        createContainer: true
    // ...
var game = new Phaser.Game(config);

Add DOM element object

Add html string

  1. Load html string in preload stage
    scene.load.html(key, url);
    Reference: load html
  2. Add DOM element object with html string from cache
    var domElement = scene.add.dom(x, y).createFromCache(key);  // elementType = 'div'
    // var domElement = scene.add.dom(x, y).createFromCache(key, elementType);
    • Add DOM element object with html string
      var domElement = scene.add.dom(x, y).createFromHTML(htmlString);  // elementType = 'div'
      // var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType);
      • `elementType : The tag name of the element into which all of the html will be inserted. Defaults to a plain div tag.

Create element

scene.add.dom(x, y).createElement(tagName);
// scene.add.dom(x, y).createElement(tagName, style, innerText);
  • tagName : A string that specifies the type of element to be created. For example, 'div'
  • style : Either a DOMString that holds the CSS styles to be applied to the created element, or an object the styles will be readyfrom. Optional.
  • innerText : A DOMString that holds the text that will be set as the innerText of the created element. Optional.

Add existing DOM

  1. Create DOM element
    var el = document.createElement('div');
    // = '...';
    // el.innerText = '...';
  2. Add to scene
    var domElement = scene.add.dom(x, y, el);
    // var domElement = scene.add.dom(x, y, el, style, innerText);

Custom class

  • Define class
    class MyDOMElement extends Phaser.GameObjects.DOMElement {
        constructor(scene, x, y, element, style, innerText) {
            super(scene, x, y, element, style, innerText);
            // ...
        // ...
        // preUpdate(time, delta) {
        //     super.preUpdate(time, delta);
        // }
    • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
      • If the Game Object renders, it will be added to the Display List.
      • If it has a preUpdate method, it will be added to the Update List.
  • Create instance
    var domElement = new MyDOMElement(scene, x, y, element);

Event of DOM element

  • Add listener
    • eventName : Event name
      • Single string. ex. 'click'
      • Event name joined with ' '
  • Add event handler
    var callback = function(event) {
    domElement.on(eventName, callback, scope);
    // domElement.once(eventName, callback, scope);
    Reference: event emitter
  • Remove listener
    • eventName : Event name
      • Single string. ex. 'click'
      • Event name joined with ' '

Get child

  • Get child by name
    var child = domElement.getChildByName(name)
  • Get child by id
    var child = domElement.getChildByID(id)
  • Get child by property
    var child = domElement.getChildByProperty(property, value)

Set inner html string




DOM Element

Each DOM element object has 1 DOM element.

  • Set
    // domElement.setElement(el, style, innerText);
  • Get
    var el = domElement.node;



Set size

var style =;
style.width = width + 'px';
style.height = height + 'px';


domElement.setSkew(x, y);


domElement.skewX = x;
domElement.skewY = y;

Rotate 3d

The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.

domElement.rotate3d.set(x, y, z, a);


domElement.rotate3d.x = x;
domElement.rotate3d.y = y;
domElement.rotate3d.z = z;
domElement.rotate3d.w = a;


Other properties

See game object