如何使用Phaser3从DOM对象创建组

Question

我正试图为我放入DOM中的对象创建一个组，但我不知道如何创建，因为它在preload()函数中没有设置它的键，所以我预加载了一个span元素，在create()函数中我在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);
}

Answer 1

您的问题不是很清楚，但我认为您想要一个移相器-组，带有dom元素。

因此，在这种特殊情况下，我将使用相位器方法this.add.dom().createElement(...)(文档链接(创建dom元素，并将它们添加到相位器组中。

这里是一个工作演示：

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>