我有以下代码:
var lion = game.add.sprite(2, 2,'lion');
var jump = game.add.tween(lion);
jump.to({x: 1000, y: 1000 }, 10000, Phaser.Easing.Linear.None);
// ...
jump.start();
我创建了一个 Sprite ,想让它在两点之间移动,这里我将狮子从左上角移动到右下角的某个点(1000,1000)。是否可以在这个 Action 中添加弹跳 Action ?
目前狮子正在直线移动,但我想让它看起来像是狮子在跳跃,如下所示:
我该如何实现这一目标?补间真的能够生成这样的复杂路径吗?
最佳答案
虽然 API 很棘手并且记录得很详细(恕我直言),但我还是设法找到了实现此行为的好点。我花了 2 天的时间来了解补间的工作原理以及在哪里应用我的更改。
创建补间时,您可以向其传递缓动函数。我想要的缓动仅适用于 Y 轴(弹跳运动),向右移动仅适用于 X 轴。因此我必须使用两个单独的补间:
function vanHalen (v) { // Might as well jump
game.debug.spriteInfo(lion, 32, 32);
return Math.sin(v * Math.PI) * 1;
};
function goLion() {
var move = game.add.tween(lion);
var jump = game.add.tween(lion);
// "Move" is a linear easing function that will move the sprite to (1000,y). It takes the Lion 2 Seconds to get there.
move.to({x: 1000}, 2000);
// The Jump is a function that works on the y axis, uses a customized easing function to "bounce".
jump.to({y: 30}, 500, vanHalen, true, 0, Number.MAX_VALUE, 0);
move.start();
};
跳跃会自动开始并且永远不会结束。当向右的运动结束后,狮子会继续在一处弹跳。
缓动函数接收一个进度值(介于 0 和 1 之间),该值指示补间已移动的距离(以百分比表示)。
关于animation - 如何使用 Phaser.io 在 Tween 中创建弹跳或跳跃 Action ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25324234/