首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之在Unity中使用贝塞尔曲线(六)
2012
08-03

NGUI研究院之在Unity中使用贝塞尔曲线(六)

鼎鼎大名的贝塞尔曲线相信大家都耳熟能详。这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦。贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是起点,一个是终点。在这条曲线之上还会有两个可以任意移动的点来控制贝塞尔曲线的角度。如下图所示,点1 和点4 就是起点和终点,点2 和点3 就是控制曲线角度的两个动态点。

 

NGUI研究院之在Unity中使用贝塞尔曲线(六) - 雨松MOMO程序研究院 - 1

 

如下图所示。使用拖动条来让曲线发生旋转,大家会看的更加清晰。目前我们看到的被塞尔曲线是在平面中完成的,其实贝塞尔曲线是完全支持3D中完成,这里是为了让大家看的更加清楚MOMO将忽略Z曲线的Z轴。UnityAPI文档中有贝塞尔曲线的方法,可是只支持编辑器中使用,也就是说无法在程序中使用。那么本篇文章我们利用贝塞尔曲线的数学原理以及LineRenderer组件来完成在Unity中使用贝塞尔曲线。

 

NGUI研究院之在Unity中使用贝塞尔曲线(六) - 雨松MOMO程序研究院 - 2

 

创建一个U3D的工程,创建一个新游戏对象,绑定LineRenderer组件。

Bezier.cs 这里是贝塞尔曲线的公式C#版本

 

 

MyBezier.cs 把它直接挂在摄像机上 ,控制拖动条来控制贝塞尔曲线、

 

OK 这里贝塞尔曲线的原理就已经完毕。下面我们学习在NGUI中如何使用贝塞尔曲线。刚刚我们说过贝塞尔曲线是由2个固定点 加两个动态点来完成的,其实我们在开发中往往只需要3个点。1 起点 2 中间点 3 结束点 拖动这三个点都可以重新计算曲线的轨迹这样才比较完美。如下图所示,这三个点都是可以任意拖动的,拖动结束后,黑色的线为用户拖拽点连接的直角线段,我们根据这三个点组成的直角线段计算它们之间的贝塞尔曲线,也就是图中黄色的线段。

 

NGUI研究院之在Unity中使用贝塞尔曲线(六) - 雨松MOMO程序研究院 - 3

 

简单的进行拖拽一下,是不是感觉贝塞尔曲线很酷炫呢?哇咔咔。

 

NGUI研究院之在Unity中使用贝塞尔曲线(六) - 雨松MOMO程序研究院 - 4

 

我们来看看代码实现的部分,其实原理和上面完全一样。

BallMove.cs绑定在这三个可以拖拽的点上,让拖动小球后小球可跟随手指移动。

 

如此一来触摸小球后,小球将跟随用户手指移动。下面我们将监听用户触摸小球后的坐标来计算它们三点之间的贝塞尔曲线。

BallInit.cs挂在摄像机上

 

 

NGUI部分的源码就不放出来,MOMO将第一个例子的源码放出来,最近生活与工作都有点郁闷,哎~~~ 日子是熬出来,程序也是写出来的,走一步看一步,加油!雨松MOMO祝大家学习愉快,哇咔咔。

下载地址:http://vdisk.weibo.com/s/aceMi

参考文章:http://forum.unity3d.com/threads/5082-Bezier-Curve

 

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

NGUI研究院之在Unity中使用贝塞尔曲线(六)》有 49 条评论

  1. Building-楼 说:

    大神的公式有错(把4个点放在同一直线可以验证得到的线是错的) 不过给了我思路 可以用的待定系数法把1-3阶的贝塞尔曲线都推导出来~

  2. 猫同人 说:

    请问如果我直接用dotween之类的插件和这个比,效率哪个高呢?

  3. Rico 说:

    这公式和不化简贝塞尔公式算出来的值不一样 NGUI研究院之在Unity中使用贝塞尔曲线(六) - 雨松MOMO程序研究院 - 1

  4. 化一 说:

    cx = 3 * ( x1 – x0 )bx = 3 * ( x2 – x1 ) – cxax = x3 – x0 – cx – bxcy = 3 * ( y1 – y0 )by = 3 * ( y2 – y1 ) – cyay = y3 – y0 – cy – by四点式

  5. 徐柯 说:

    http://zh.wikipedia.org/wiki/貝茲曲線 维基百科上讲的还是挺清楚的,上文推导出来的常量Ax明显是不正确的,画出来的曲线形状也不对,可以自己推导看看,虽说有点小错误,但是文章还是很棒的,学习了

  6. 匿名人 说:

    有个错误 ! MyBezier.cs脚本 不是绑在摄像机上 而是绑在 有LineRenderer控件的物体上

  7. BloodyYoLmer 说:

    update里不断new是几个意思? 为什么不在Awake()里面new?

  8. Guccang 说:

    生活的意义在于创造,MOMO做的非常好了,每天来这里逛逛,感觉不错,哈哈哈。

  9. shim 说:

    日子是熬出来,程序也是写出来的。同感,原来大牛也有工作和生活上的烦恼哈

  10. 张嘉林 说:

    请问 this.Cx = 3f * ( ( this.p0.x this.p1.x ) – this.p0.x ); 为什么不直接等于3f * this.p1.x?你这个曲线的数学公式原型是什么?望赐教啊~

  11. 张嘉林 说:

    请问 this.Cx = 3f * ( ( this.p0.x + this.p1.x ) – this.p0.x ); 为什么不直接等于3f * this.p1.x?你这个曲线的数学公式原型是什么?望赐教啊~

  12. 赵川 说:

    雨大问你个事 曲线的数组长度和 后面Vector3 vec = myBezier.GetPointAtTime( (float)(i * 0.01) );这句里面的.01有什么关系,因为曲线的代码没注释 也不懂,所以没有研究Bezier 类,如果要把数组长度定为50后面.01要改成多少,还请不吝赐教

  13. 游客 说:

    private void SetConstant() 中 this.Cx = 3f * ( ( this.p0.x this.p1.x ) – this.p0.x );==》this.Cx = 3f * this.p1.x ; this.Cy = 3f * ( ( this.p0.y this.p1.y ) – this.p0.y );==》this.Cy = 3f * this.p1.y ; this.Cz = 3f * ( ( this.p0.z this.p1.z ) – this.p0.z );==》this.Cz = 3f * this.p1.z ; 是不?假设画一个圆,那么4个点应该是怎样的?应该是两组吧?假设r为半径,圆心(0,0)。谢谢

  14. 游客 说:

    private void SetConstant() 中 this.Cx = 3f * ( ( this.p0.x + this.p1.x ) – this.p0.x );==》this.Cx = 3f * this.p1.x ; this.Cy = 3f * ( ( this.p0.y + this.p1.y ) – this.p0.y );==》this.Cy = 3f * this.p1.y ; this.Cz = 3f * ( ( this.p0.z + this.p1.z ) – this.p0.z );==》this.Cz = 3f * this.p1.z ; 是不?假设画一个圆,那么4个点应该是怎样的?应该是两组吧?假设r为半径,圆心(0,0)。谢谢

  15. 恒进 说:

    上面的系数怎么算出来的

  16. nslooken 说:

    你好请问[System.Serializable], [System.NonSerialized]到底是什么意思?我一直都不太明白,谢谢

  17. 非常感谢,但是怎么得到贝塞尔曲线方向向量,比如我有一个弓箭使用被塞尔曲线来做曲线运动,但是箭头肯定要指向运动的切线方向,请问这个怎么得到?

  18. 寻影不遇 说:

    雨松老师 请问一下可以多个贝塞尔曲线来组成一条不规则的路径吗 具体思路是什么

  19. 游戏开发 说:

    感谢经验分享,祝好人一生平安!

  20. 失语患 说:

    非常有帮助,感谢

  21. 雨松MOMO 说:

    最近一段时间没有看U3D哈

  22. 雨松MOMO 说:

    直接让美术改一下不就得了

  23. 郭袁.unity 说:

    为什么我直接copy过来就总是显示错误Assets/JS/BallMove.cs(11,23): warning CS0219: The variable `movey’ is assigned but its value is never used等等

  24. 秃了爪子的猫 说:

    momo大神,可以给个用UIFilledSprite做技能冷却的教程么?哇咔咔

  25. NGUI中能有方法把彩色的图片转换为黑白图像的方法吗?

  26. 好久没来啦,支持下MOMO,嘿嘿,3D有贝塞尔,过些天我也出个安卓版的贝塞尔文章,哈哈…..利用你说的原理,盗用学习!!!

  27. 伴奏 说:

    牛人啊

留下一个回复

你的email不会被公开。