这篇文章使用了一个 javascript 的小技巧,结合 egret.Tween ,实现了 贝塞尔曲线。
记录如下.
在制作游戏的过程中,经常有些需求要求我们实现一个二次贝塞尔曲线的运动,比如子弹的飞行轨迹之类的
那么如何使用egret来实现这类需求呢?其实非常简单,首先我们来看一下二次贝塞尔曲线的示意图:
- 由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。
- 由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。
- 由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。
之后我们来看一下二次贝赛尔曲线的公式:
好了,有了公式那么实现起来就容易多了,我们通过使用egret.Tween来实现:
1
egret.Tween.get(this).to({factor: 1}, 2000);
这表示,在2000毫秒内,this的factor属性将会缓慢趋近1这个值,这里的factor就是曲线中的t属性,它是从0到1的闭区间。
之后我们在this中加入一组getter和setter:1
2
3
4
5
6
7
8
public get factor():number {
return 0;
}
public set factor(value:number) {
this.ball.x = (1 - value) * (1 - value) * 100 + 2 * value * (1 - value) * 300 + value * value * 100;
this.ball.y = (1 - value) * (1 - value) * 100 + 2 * value * (1 - value) * 300 + value * value * 500;
}
这里的getter使factor属性从0开始,结合刚才tween中传入的1,使其符合公式中的t的取值区间。
而重点是这里的setter,里面的ball对象是我们要应用二次贝塞尔曲线的显示对象,而在setter中给ball对象的xy属性赋值的公式正是之前列出的二次贝塞尔曲线公式。这里的P0点是(100,100),P1点是(300,300),P2点是(100,500)。
到这里我们的二次贝塞尔曲线运动就完成了,核心思路就是基于egret.Tween和二次贝塞尔曲线公式。