How can I create a group from a DOM object with Phaser 3?

Question

I am trying to create a group to an object that I have put in the DOM but I don't know how since it doesn't have a key to set it in the preload() function I have preloaded a span element, and in the create() I have created an element in the DOM.

preload(){
    this.span = document.createElement('span')
}

create(){
  this.img = '/assets/sprites/shouko.png'

    this.span.style = `background: url("${this.img}"); background-size: cover; width: 60px; height: 60px; font-weight: bold`;

    this.element = this.add.dom(400, 300, this.span)

    this.physics.add.existing(this.element, false);// add sptite

    this.element.body.setOffset(-(this.element.displayWidth / 2), -(this.element.displayHeight / 2));
    this.element.body.setVelocity(100, 200);
    this.element.body.setBounce(1, 1);
    this.element.body.setCollideWorldBounds(true);
}

user_1679286 · Answer

Your question is not very clear, but I assume you want a phaser - group, with dom elements.

So in this special case, I would create the dom element with the phaser method this.add.dom().createElement(...) (link to the documentation), and add them to a phaser group.

Here a working Demo:

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    parent: 'phaser-parent',
    dom: {
        createContainer: true
    },
    physics: {
        default: 'arcade',
    },
    scene: {
        create
    },
    banner: false
}; 

function create () {
    
    let imgUrl = 'http://labs.phaser.io/assets/sprites/copy-that-floppy.png';
    let style = `background: url("${imgUrl}"); background-size: cover; width: 60px; height: 60px`;
    var group = this.add.group();
    
    for(var i = 0; i < 3; i++){
      var element = this.add.dom().createElement('span', style);
      
      this.physics.add.existing(element, false);
      
      element.x = 50 * (i+1);
      element.y = 50 * (i+1);
      element.body.setOffset(-(element.displayWidth / 2), -(element.displayHeight / 2));
      element.body.setVelocity(100, 200);
      element.body.setBounce(1, 1);
      element.body.setCollideWorldBounds(true);
      
      group.add(element);
    }

}

new Phaser.Game(config);

How can I create a group from a DOM object with Phaser 3?

1 Answers