如何在 Phaser 中在移动对象旁边添加对象？答案

【问题标题】：How do I add an object next to a moving object in Phaser?如何在 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>

【问题讨论】：

标签： phaser-framework

【解决方案1】：

我认为解决方案是：通过将yellow.x + 100 更改为yellow.body.x + 100 来使用物理体的位置。

（或者可能是yellow.body.position.x + 100？不确定有什么区别，或者body.x是否只是body.position.x的别名。）

【讨论】：

【解决方案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;
    }
});

【讨论】：