首页 > 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块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

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

  2. 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四点式

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

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

  5. 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)。谢谢

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