在 egret 中 利用 tween 實現 二次貝塞爾運動
阿新 • • 發佈:2018-11-08
這篇文章使用了一個 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和二次貝塞爾曲線公式。