Egret社区
本帖最后由 egret-Jerry 于 2016-7-12 18:36 编辑

在制作游戏的过程中,经常有些需求要求我们实现一个二次贝塞尔曲线的运动,比如子弹的飞行轨迹之类的

那么如何使用egret来实现这类需求呢?其实非常简单,首先我们来看一下二次贝塞尔曲线的示意图:

二次贝塞尔曲线的结构

二次贝塞尔曲线的结构

二次贝塞尔曲线演示动画,t在[0,1]区间

二次贝塞尔曲线演示动画,t在[0,1]区间
由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。

之后我们来看一下二次贝赛尔曲线的公式:

gongshi.png

好了,有了公式那么实现起来就容易多了,我们通过使用egret.Tween来实现:


[mw_shl_code=javascript,true]egret.Tween.get(this).to({factor: 1}, 2000);[/mw_shl_code]


这表示,在2000毫秒内,this的factor属性将会缓慢趋近1这个值,这里的factor就是曲线中的t属性,它是从0到1的闭区间。

之后我们在this中加入一组getter和setter:

[mw_shl_code=applescript,true]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;
    }[/mw_shl_code]


这里的getter使factor属性从0开始,结合刚才tween中传入的1,使其符合公式中的t的取值区间。
而重点是这里的setter,里面的ball对象是我们要应用二次贝塞尔曲线的显示对象,而在setter中给ball对象的xy属性赋值的公式正是之前列出的二次贝塞尔曲线公式。这里的P0点是(100,100),P1点是(300,300),P2点是(100,500)。

到这里我们的二次贝塞尔曲线运动就完成了,核心思路就是基于egret.Tween和二次贝塞尔曲线公式。

下面附上我制作的demo

tween.zip (685.46 KB, 下载次数: 555, 售价: 1 银子)
分享到 :
65 人收藏
回复我的帖子时请点击“回复”按钮,要不我怕会漏掉大家的回复信息
邮箱:jerry.lin@egret.com

89 个回复

倒序浏览
xsstomy  渐入佳境 | 2014-11-13 15:08:59
好东西,要顶
jssnlw  登堂入室 | 2014-11-13 16:37:03
这个必须顶
张宇  官方团队 | 2014-11-13 21:59:02
真不错
Barry_yb  初学乍练 | 2014-11-15 10:04:50
学习学习
shawn0326  圆转纯熟 | 2014-11-15 12:13:22
学习了,getter和setter的方法很巧妙
xsstomy  渐入佳境 | 2014-11-18 09:49:40
牛逼,细看一下,用的确实巧妙啊,顺便问个问题,egret.Tween,会不会有性能优化,因为在512低端手机上面发现,egret.Tween的使用比较消耗性能
hling  初学乍练 | 2014-11-18 22:50:05
好东西,要顶
lixin2628  圆转纯熟 | 2014-11-19 10:46:18
好帖,顶一个
Channing  圆转纯熟 | 2014-11-25 10:21:20
要顶  =  =。。。。。。 验证码老错。。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部