如何在 Phaser 中在移动对象旁边添加对象？
Posted
技术标签:
【中文标题】如何在 Phaser 中在移动对象旁边添加对象？【英文标题】：How do I add an object next to a moving object in Phaser? 【发布时间】：2022-01-09 07:05:12 【问题描述】：在下面的 sn-p 中，我将两个红色方块并排放置。您可以看到它们之间没有间隙。
如果我尝试对移动的物体做同样的事情，会有一点差距。这样做的正确方法是什么？
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script>
var config =
type: Phaser.AUTO,
width: 800,
height: 600,
physics: default: 'arcade' ,
scene: create: create, update: update ,
;
var game = new Phaser.Game(config);
var red, red2, yellow, yellow2;
const velocity = -300;
function create()
red = this.add.rectangle(400, 200, 100, 100, 0xff0000).setOrigin(0, 0);
red2 = this.add.rectangle(red.x + 100, 250, 100, 100, 0xff6666).setOrigin(0, 0);
yellow = this.add.rectangle(400, 400, 100, 100, 0xffff00).setOrigin(0, 0);
this.physics.add.existing(yellow);
yellow.body.velocity.x = velocity;
function update()
if (yellow.x < 200 && !yellow2)
yellow2 = this.add.rectangle(yellow.x + 100, 450, 100, 100, 0xffff66).setOrigin(0, 0);
this.physics.add.existing(yellow2);
yellow2.body.velocity.x = velocity;
if (yellow.x < -200)
this.scene.restart();
yellow2 = undefined;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：我认为解决方案是：通过将yellow.x + 100 更改为yellow.body.x + 100 来使用物理体的位置。
（或者可能是yellow.body.position.x + 100？不确定有什么区别，或者body.x是否只是body.position.x的别名。）
相关：https://phaser.discourse.group/t/lag-in-dom-sprite-position-updates/798
【讨论】：
【参考方案2】：一个简单的方法是使用 Phaser 函数：Phaser.Display.Align.To.RightCenter 和事件：postupdate。
然后您只需计算对象之间的偏移量并将其添加到函数中。 （documentation to the Align function）。这是基于此解决方案：phaser forum
canvas
transform: translate(-40%, -40%) scale(.3);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body style="overflow:hidden">
<script>
var config =
type: Phaser.AUTO,
width: 800,
height: 600,
physics: default: 'arcade' ,
scene: create: create, update: update ,
;
var game = new Phaser.Game(config);
var red, red2, yellow, yellow2;
const velocity = -300;
var yOffSet = 0;
function create()
red = this.add.rectangle(400, 200, 100, 100, 0xff0000).setOrigin(0, 0);
red2 = this.add.rectangle(red.x + 100, 250, 100, 100, 0xff6666).setOrigin(0, 0);
yellow = this.add.rectangle(400, 400, 100, 100, 0xffff00).setOrigin(0, 0);
this.physics.add.existing(yellow);
yellow.body.velocity.x = velocity;
this.events.on("postupdate", function ()
if (yellow && yellow2)
Phaser.Display.Align.To.RightCenter(yellow2, yellow, 0, yOffSet);
);
function update(time, delta)
if (yellow.x < 200 && !yellow2)
yellow2 = this.add.rectangle(yellow.x + 100, 450, 100, 100, 0xffff66).setOrigin(0, 0);
this.physics.add.existing(yellow2);
yellow2.body.velocity.x = velocity;
yOffSet = yellow2.y - yellow.y
if (yellow.x < -200)
this.scene.restart();
yellow2 = undefined
</script>
</body>
</html>Alternativly 你可以更准确地计算x 的位置，但这并不容易，因为update 函数不会在同一时间间隔内调用.这可能会导致轻微的重叠或分裂。
// deltaTime being the the second paramenter of the update function
yellow2 = this.add.rectangle(yellow.x + 100 + (velocity * deltaTime), 450, 100, 100, 0xff0000).setOrigin(0, 0);
甚至更简单，您可以简单地在postUpdate event 中设置x（不带Align）
this.events.on("postupdate", function ()
if ( yellow2)
yellow2.x =yellow.x + 100;
);
【讨论】：
以上是关于如何在 Phaser 中在移动对象旁边添加对象？的主要内容，如果未能解决你的问题，请参考以下文章