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
    input: {
        mouse: {
            target: divId
        touch: {
            target: divId
    // ...
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;


Interactive with other game objects

  1. DOM game object always put above game canvas, i.e. DOM game object will render above any other kind of game object.
  2. DOM game object will receive touch event even if it is not the first touched game object.
  3. P3's 'pointerdown', 'pointerup' events will be fired above/under DOM game object.
  4. P3's 'pointermove' event won't be fired above/under DOM game object, except
    • Setting DOM game object to be invisilbe.
    • Assign parameter of game config.
  5. DOM game object only can be displayed by main camera. i.e. dom game object can't add to other camera.

Other properties

See game object