在 Phaser.IO 中沿预定义路径移动精灵

Question

我有一个精灵和它的路径（路径 = [[1,1],[1,2],[1,3]），使用 game.physics 的最佳做法是什么，而不是简单地改变 x,y 值？

Answer 1

假设您已启用物理并且已将路径中的每个坐标分配给舞台区域。

直线移动

我建议Physics.Arcade.movetoXY()。

如果您需要旋转精灵，该函数会返回到目标位置的角度。

sprite.rotation = game.physics.arcade.moveToXY(
    sprite, 
    target.x, 
    target.y, 
    300 // speed, 
    500 // maxTimeToFinish(ms)
);

如果您的精灵正在飘过目标并且没有停止，请确保在您的主 update() 循环中包含类似的内容：

player.body.velocity.x = 0;
player.body.velocity.y = 0;

由于您的示例仅沿直线移动，因此此方法效果很好。您可以只使用最终图块的 xy 位置并设置精灵移动。此方法不考虑您的游戏可能具有的拖动、加速度和其他一些变量。

很多推荐的内容取决于您的用例。

巡逻磁贴路径

如果您希望精灵沿着路径“巡逻”，那么您可以使用补间，因为这样可以提供最佳性能。

基于图块的复杂运动

如果您的精灵遵循更复杂的路径，例如避开障碍物或跟随另一个游戏对象，您将使用 Phaser.Timer（用于 Pokemen 风格的逐个地块移动）或游戏的 update() 循环（平滑移动），运行一个函数来计算向哪个方向移动，然后使用 Phaser.Arcade.Physics 方法（moveToXY、accelerateToXy 等）执行该移动以进行移动。

最好的方法是使用 A* 寻路算法，它会为您的精灵计算出一条路径，同时考虑到障碍物、死胡同和困难地形，以提供最快的路径.

rot.js 是一个基于图块的方法库，包括一个 A* 路径查找器。

基于图块的角色移动

在带有障碍物碰撞的基于图块的移动中要小心 - Phaser 中的街机碰撞会在与目标（包括角落像素）接触时触发，这可能会使在障碍物之间移动或通过开口变得困难。

你会发现简单地增加一个方向的速度不再起作用。

通过使用sprite.body.setBounds() 使您的角色的街机主体比图块小几个像素来解决这个问题，并使用出色的Math.snapTo() 将您的精灵保持在图块的中心。

您可以针对所有四个方向进行调整，并将其添加到您的 update() 循环中，以实现基于图块的平滑角色移动。

if (cursors.left.isDown) {
    game.physics.arcade.moveToXY(
    sprite, 
    sprite.body.x - 70, // target x position
    Phaser.Math.snapTo(sprite.body.y, 70), // keep y position the same as we are moving along x axis
    250 // velocity to move at
) };