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

时间:2015-01-05 18:11:20

标签: javascript html5-canvas phaser-framework

我有一个sprite和一个路径(path = [[1,1],[1,2],[1,3]),使用game.physics做的最佳做法是什么,而不是简单地改变x,y值?

1 个答案:

答案 0 :(得分:11)

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

直线行驶

我建议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位置并设置精灵移动。此方法不考虑您的游戏可能具有的阻力,加速度和其他一些变量。

很多建议取决于您的使用案例。

巡逻磁贴路径

如果您希望精灵沿路径“巡逻”,那么您将使用补间,因为这提供了最佳性能。

基于平铺的复杂运动

如果您的精灵遵循更复杂的路径,例如避免使用obsticles或跟随其他游戏对象,您将使用Phaser.Timer(用于Pokemen风格,逐个瓷砖的移动)或游戏的更新()循环(用于平滑移动),运行一个函数,计算要移入的方向,然后使用Phaser.Arcade.Physics方法(moveToXY,accelerateToXy等)移动来执行该移动。

执行此操作的最佳方法是使用 A *路径搜索算法,它会为您的精灵制作路径,同时考虑到obsticles,死角和困难的地形以提供最快的路径

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
) };