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);
}
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);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<div id="phaser-parent"></div>