首页 > 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
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

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?你这个曲线的数学公式原型是什么?望赐教啊~

留下一个回复

你的email不会被公开。