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

Question

我有一个精灵和一个路径 (路径 = [[1,1],[1,2],[1,3]])，使用game.physics而不是简单地更改x、y值的最佳实践是什么？

- Erez Hochman

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位置来使你的精灵运动。这种方法不考虑拖拽、加速度和其他可能存在于你的游戏中的变量。

很多推荐取决于你的用例。

巡逻路径

如果你想让精灵沿着一条路径“巡逻”，那么你将使用tween，因为它提供了最佳的性能。

基于图块的复杂运动

如果你的精灵按照更复杂的路径行进，例如避开障碍物或跟随另一个游戏对象，则应使用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
) };

- Jake Whiteley

---

physics.arcade.movetoxy需要在更多的教程中出现。动画会更加流畅。 - Matt West