NGUI研究院之在Unity中使用贝塞尔曲线（六） |
您所在的位置：网站首页 › gta5太久没玩了进不去 › NGUI研究院之在Unity中使用贝塞尔曲线（六） |
NGUI研究院之在Unity中使用贝塞尔曲线（六）
|
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详。这两天因为工作的原因需要将贝塞尔曲线加在工程中，那么MOMO迅速的研究了一下成果就分享给大家了哦。贝塞尔曲线的原理是由两个点构成的任意角度的曲线，这两个点一个是起点，一个是终点。在这条曲线之上还会有两个可以任意移动的点来控制贝塞尔曲线的角度。如下图所示，点1 和点4 就是起点和终点，点2 和点3 就是控制曲线角度的两个动态点。
如下图所示。使用拖动条来让曲线发生旋转，大家会看的更加清晰。目前我们看到的被塞尔曲线是在平面中完成的，其实贝塞尔曲线是完全支持3D中完成，这里是为了让大家看的更加清楚MOMO将忽略Z曲线的Z轴。UnityAPI文档中有贝塞尔曲线的方法，可是只支持编辑器中使用，也就是说无法在程序中使用。那么本篇文章我们利用贝塞尔曲线的数学原理以及LineRenderer组件来完成在Unity中使用贝塞尔曲线。
创建一个U3D的工程，创建一个新游戏对象，绑定LineRenderer组件。 Bezier.cs 这里是贝塞尔曲线的公式C＃版本 C# 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 using UnityEngine; [System.Serializable] public class Bezier : System.Object { public Vector3 p0; public Vector3 p1; public Vector3 p2; public Vector3 p3; public float ti = 0f; private Vector3 b0 = Vector3.zero; private Vector3 b1 = Vector3.zero; private Vector3 b2 = Vector3.zero; private Vector3 b3 = Vector3.zero; private float Ax; private float Ay; private float Az; private float Bx; private float By; private float Bz; private float Cx; private float Cy; private float Cz; // Init function v0 = 1st point, v1 = handle of the 1st point , v2 = handle of the 2nd point, v3 = 2nd point // handle1 = v0 + v1 // handle2 = v3 + v2 public Bezier( Vector3 v0, Vector3 v1, Vector3 v2, Vector3 v3 ) { this.p0 = v0; this.p1 = v1; this.p2 = v2; this.p3 = v3; } // 0.0 >= t C# 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 using UnityEngine; public class MyBezier : MonoBehaviour { //贝塞尔曲线算法类 public Bezier myBezier; //曲线的对象 public GameObject Yellowline; //曲线对象的曲线组件 private LineRenderer YellowlineRenderer; //拖动条用来控制贝塞尔曲线的两个点 public float hSliderValue0; public float hSliderValue1; void Start() { //得到曲线组件 YellowlineRenderer = Yellowline.GetComponent(); //为了让曲线更加美观，设置曲线由100个点来组成 YellowlineRenderer.SetVertexCount(100); } void OnGUI() { //拖动条得出 -5.0 - 5.0之间的一个数值 hSliderValue0 = GUI.HorizontalSlider(new Rect(25, 25, 100, 30), hSliderValue0, -5.0F, 5.0F); hSliderValue1 = GUI.HorizontalSlider(new Rect(25, 70, 100, 30), hSliderValue1, -5.0F, 5.0F); } void Update() { //在这里来计算贝塞尔曲线 //四个参数 表示当前贝塞尔曲线上的4个点 第一个点和第四个点 //我们是不需要移动的，中间的两个点是由拖动条来控制的。 myBezier = new Bezier( new Vector3( -5f, 0f, 0f ), new Vector3( hSliderValue1, hSliderValue0 , 0f ), new Vector3( hSliderValue1, hSliderValue0, 0f ), new Vector3( 5f, 0f, 0f ) ); //循环100遍来绘制贝塞尔曲线每个线段 for(int i =1; i C# 123456789101112131415161718 using UnityEngine;using System.Collections; public class BallMove : MonoBehaviour{ void OnDrag (Vector2 delta) { float movex = transform.localPosition.x + (delta.x / 3); float movey = transform.localPosition.y + (delta.y / 3); //避免越界操作，这里可以进行一些判断 transform.localPosition = new Vector3(movex,movey ,transform.localPosition.z); } }
如此一来触摸小球后，小球将跟随用户手指移动。下面我们将监听用户触摸小球后的坐标来计算它们三点之间的贝塞尔曲线。 BallInit.cs挂在摄像机上 C# 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 using UnityEngine;using System.Collections; public class BallInit : MonoBehaviour { //黑色直角线段 LineRenderer lineRenderer0; LineRenderer lineRenderer1; //贝塞尔曲线 LineRenderer BezierRenderer; //三个小球触摸对象 public GameObject mark0; public GameObject mark1; public GameObject mark2; //算法公式类 private Bezier myBezier; void Start () { //分别得到黑色直角线段 与黄色贝塞尔曲线的 线段组件 lineRenderer0 = GameObject.Find("line0").GetComponent(); lineRenderer1 = GameObject.Find("line1").GetComponent(); BezierRenderer = GameObject.Find("Bezier").GetComponent(); //黑色直角是有两个线段组成 lineRenderer0.SetVertexCount(2); lineRenderer1.SetVertexCount(2); //为了让贝塞尔曲线细致一些 设置它有100个点组成 BezierRenderer.SetVertexCount(100); } void Update () { //mark0 表示中间的小球 //mark1 表示右边的小球 //mark2 表示左边的小球 //中间的标志点分别减去左右两边的标志点，计算出曲线的X Y 的点 float y = (mark0.transform.position.y - mark2.transform.position.y) ; float x = (mark0.transform.position.x - mark2.transform.position.x) ; //因为我们是通过3个点来确定贝塞尔曲线， 所以参数3 设置为0 即可。 //这样参数1 表示起点 参数2表示中间点 参数3 忽略 参数4 表示结束点 myBezier = new Bezier( mark2.transform.position, new Vector3(x,y,0f), new Vector3(0f,0f,0f), mark1.transform.position ); //绘制贝塞尔曲线 for(int i =1; i |
【本文地址】
今日新闻 |
推荐新闻 |