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)