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

Question

我有一个 sprite 和它的路径 (path = [[1,1],[1,2],[1,3])，使用 [=13 的最佳做法是什么=] 而不是简单地更改 x,y 值？

Answer 1

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

直线移动

函数 returns 如果您需要旋转精灵到目标位置的角度。

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

如果您的 sprite 漂移过目标并且没有停下来，请务必在您的 update() 主循环中包含这样的内容：

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

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

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

巡视瓦片路径

如果您想让精灵 'patrol' 沿着一条路径移动，那么您可以使用补间动画，因为这样可以提供最佳性能。

基于平铺的复杂运动

如果您的 sprite 遵循更复杂的路径，例如避开 obsticles 或跟随另一个游戏对象，您可以使用 Phaser.Timer（对于 Pokemen 风格，逐块移动）或您的游戏更新() 循环（为了平滑移动），到运行一个函数，该函数计算移动的方向，然后使用 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
) };

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

Moving a sprite along a pre-defined path in Phaser.IO

javascript

html5-canvas

phaser-framework