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

Ere*_*man 5 javascript html5-canvas phaser-framework

我有一个精灵和它的路径(路径= [[1,1],[1,2],[1,3]),使用game.physics进行它的最佳做法是什么,而不是简单的chage x,y值?

小智 11

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

直线移动

我建议使用Physics.Arcade.movetoXY().

如果需要旋转精灵,该函数会将角度返回到目标位置.

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

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

player.body.velocity.x = 0;
player.body.velocity.y = 0;
Run Code Online (Sandbox Code Playgroud)

由于你的例子只是直线移动,这种方法效果很好.您可以使用最终图块的xy位置并设置精灵移动.此方法不考虑您的游戏可能具有的阻力,加速度和一些其他变量.

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

巡逻瓷砖路径

如果你想让精灵沿路径"巡逻",那么你就可以使用补间,因为这样可以提供最佳性能.

基于瓷砖的复杂运动

如果您的精灵遵循更复杂的路径,例如避免使用obsticles或跟随另一个游戏对象,您将使用Phaser.Timer(用于Pokemen风格,逐个tile的移动)或游戏的update()循环(用于平滑移动),运行一个函数,计算要移入的方向,然后使用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
) };
Run Code Online (Sandbox Code Playgroud)