NGUI研究之在Unity中使用贝塞尔曲线
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详。这两天由于工作的原因须要将贝塞尔曲线加在project中。那么我迅速的研究了一下成果就分享给大家了哦。贝塞尔曲线的原理是由两个点构成的随意角度的曲线，这两个点一个是起点，一个是终点。在这条曲线之上还会有两个能够随意移动的点来控制贝塞尔曲线的角度。例如以下图所看到的。点1 和点4 就是起点和终点，点2 和点3 就是控制曲线角度的两个动态点。
上一章分享了开发项目的一些使用心得比較细节对新手非常实用能够看下。
" src="http://www.cgzhw.com/wp-content/uploads/2014/07/158.png" style="">
例如以下图所看到的。使用拖动条来让曲线发生旋转，大家会看的更加清晰。
眼下我们看到的被塞尔曲线是在平面中完毕的。事实上贝塞尔曲线是全然支持3D中完毕。这里是为了让大家看的更加清晰我将忽略Z曲线的Z轴。
UnityAPI文档中有贝塞尔曲线的方法，但是仅仅支持编辑器中使用，也就是说无法在程序中使用。那么本篇文章我们利用贝塞尔曲线的数学原理以及LineRenderer组件来完毕在Unity中使用贝塞尔曲线。
创建一个U3D的project，创建一个新游戏对象，绑定LineRenderer组件。
Bezier.cs 这里是贝塞尔曲线的公式C＃版本号
[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 <= 1.0
public Vector3 GetPointAtTime( float t )
{
this.CheckConstant();
float t2 = t * t;
float t3 = t * t * t;
float x = this.Ax * t3 + this.Bx * t2 + this.Cx * t + p0.x;
float y = this.Ay * t3 + this.By * t2 + this.Cy * t + p0.y;
float z = this.Az * t3 + this.Bz * t2 + this.Cz * t + p0.z;
return new Vector3( x, y, z );
}
private void SetConstant()
{
this.Cx = 3f * ( ( this.p0.x + this.p1.x ) - this.p0.x );
this.Bx = 3f * ( ( this.p3.x + this.p2.x ) - ( this.p0.x + this.p1.x ) ) - this.Cx;
this.Ax = this.p3.x - this.p0.x - this.Cx - this.Bx;
this.Cy = 3f * ( ( this.p0.y + this.p1.y ) - this.p0.y );
this.By = 3f * ( ( this.p3.y + this.p2.y ) - ( this.p0.y + this.p1.y ) ) - this.Cy;
this.Ay = this.p3.y - this.p0.y - this.Cy - this.By;
this.Cz = 3f * ( ( this.p0.z + this.p1.z ) - this.p0.z );
this.Bz = 3f * ( ( this.p3.z + this.p2.z ) - ( this.p0.z + this.p1.z ) ) - this.Cz;
this.Az = this.p3.z - this.p0.z - this.Cz - this.Bz;
}
// Check if p0, p1, p2 or p3 have changed
private void CheckConstant()
{
if( this.p0 != this.b0 || this.p1 != this.b1 || this.p2 != this.b2 || this.p3 != this.b3 )
{
this.SetConstant();
this.b0 = this.p0;
this.b1 = this.p1;
this.b2 = this.p2;
this.b3 = this.p3;
}
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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 <= 1.0
public
Vector3 GetPointAtTime( float t ) {
this.CheckConstant();
float
t2 = t * t; float
t3 = t * t * t; float
x = this.Ax * t3 + this.Bx * t2 + this.Cx * t + p0.x; float
y = this.Ay * t3 + this.By * t2 + this.Cy * t + p0.y; float
z = this.Az * t3 + this.Bz * t2 + this.Cz * t + p0.z; return
new Vector3( x, y, z ); }
private
void SetConstant() {
this.Cx
= 3f * ( ( this.p0.x + this.p1.x ) - this.p0.x ); this.Bx
= 3f * ( ( this.p3.x + this.p2.x ) - ( this.p0.x + this.p1.x ) ) - this.Cx; this.Ax
= this.p3.x - this.p0.x - this.Cx - this.Bx; this.Cy
= 3f * ( ( this.p0.y + this.p1.y ) - this.p0.y ); this.By
= 3f * ( ( this.p3.y + this.p2.y ) - ( this.p0.y + this.p1.y ) ) - this.Cy; this.Ay
= this.p3.y - this.p0.y - this.Cy - this.By; this.Cz
= 3f * ( ( this.p0.z + this.p1.z ) - this.p0.z ); this.Bz
= 3f * ( ( this.p3.z + this.p2.z ) - ( this.p0.z + this.p1.z ) ) - this.Cz; this.Az
= this.p3.z - this.p0.z - this.Cz - this.Bz; }
// Check if p0, p1, p2 or p3 have changed
private
void CheckConstant() {
if(
this.p0 != this.b0 || this.p1 != this.b1 || this.p2 != this.b2 || this.p3 != this.b3 ) {
this.SetConstant();
this.b0
= this.p0; this.b1
= this.p1; this.b2
= this.p2; this.b3
= this.p3; }
}
}
|
MyBezier.cs 把它直接挂在摄像机上 ，控制拖动条来控制贝塞尔曲线、
public class MyBezier : MonoBehaviour
{
//贝塞尔曲线算法类
public Bezier myBezier;
//曲线的对象
public GameObject Yellowline;
//曲线对象的曲线组件
private LineRenderer YellowlineRenderer;
//拖动条用来控制贝塞尔曲线的两个点
public float hSliderValue0;
public float hSliderValue1;
void Start()
{
//得到曲线组件
YellowlineRenderer = Yellowline.GetComponent<LineRenderer>();
//为了让曲线更加美观。设置曲线由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 <= 100; i++)
{
//參数的取值范围 0 - 1 返回曲线没一点的位置
//为了精确这里使用i * 0.01 得到当前点的坐标
Vector3 vec = myBezier.GetPointAtTime( (float)(i *0.01) );
//把每条线段绘制出来 完毕白塞尔曲线的绘制
YellowlineRenderer.SetPosition(i -1,vec);
}
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
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<LineRenderer>();
//为了让曲线更加美观，设置曲线由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 <= 100; i++)
{
//參数的取值范围 0 - 1 返回曲线没一点的位置
//为了精确这里使用i * 0.01 得到当前点的坐标
Vector3
vec = myBezier.GetPointAtTime( (float)(i *0.01) );
//把每条线段绘制出来 完毕白塞尔曲线的绘制
YellowlineRenderer.SetPosition(i
-1,vec);
}
}
}
|
OK 这里贝塞尔曲线的原理就已经完毕。以下我们学习在NGUI中怎样使用贝塞尔曲线。刚刚我们说过贝塞尔曲线是由2个固定点 加两个动态点来完毕的，事实上我们在开发中往往仅仅须要3个点。
1 起点 2 中间点 3 结束点 拖动这三个点都能够又一次计算曲线的轨迹这样才比較完美。例如以下图所看到的。这三个点都是能够随意拖动的。拖动结束后，黑色的线为用户拖拽点连接的直角线段。我们依据这三个点组成的直角线段计算它们之间的贝塞尔曲线，也就是图中黄色的线段。
简单的进行拖拽一下，是不是感觉贝塞尔曲线非常酷炫呢？哇咔咔。
" src="http://www.cgzhw.com/wp-content/uploads/2014/07/423.png" style="">
我们来看看代码实现的部分，事实上原理和上面全然一样。
BallMove.cs绑定在这三个能够拖拽的点上，让拖动小球后小球可尾随手指移动。
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);
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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挂在摄像机上
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<LineRenderer>();
lineRenderer1 = GameObject.Find("line1").GetComponent<LineRenderer>();
BezierRenderer = GameObject.Find("Bezier").GetComponent<LineRenderer>();
//黑色直角是有两个线段组成
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 <= 100; i++)
{
Vector3 vec = myBezier.GetPointAtTime( (float)(i * 0.01) );
BezierRenderer.SetPosition(i -1,vec);
}
//绘制直角黑色标志线段
lineRenderer0.SetPosition(0,mark0.transform.position);
lineRenderer0.SetPosition(1,mark2.transform.position);
lineRenderer1.SetPosition(0,mark0.transform.position);
lineRenderer1.SetPosition(1,mark1.transform.position);
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
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<LineRenderer>();
lineRenderer1
= GameObject.Find("line1").GetComponent<LineRenderer>(); BezierRenderer
= GameObject.Find("Bezier").GetComponent<LineRenderer>();
//黑色直角是有两个线段组成
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 <= 100; i++) {
Vector3 vec
= myBezier.GetPointAtTime( (float)(i * 0.01) ); BezierRenderer.SetPosition(i
-1,vec);
}
//绘制直角黑色标志线段
lineRenderer0.SetPosition(0,mark0.transform.position);
lineRenderer0.SetPosition(1,mark2.transform.position);
lineRenderer1.SetPosition(0,mark0.transform.position);
lineRenderer1.SetPosition(1,mark1.transform.position);
}
}
|
NGUI研究之在Unity中使用贝塞尔曲线的更多相关文章
- NGUI研究院之在Unity中使用贝塞尔曲线（六）[转]
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- 在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现
RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...
- Unity3d游戏中自定义贝塞尔曲线编辑器[转]
关于贝塞尔曲线曲线我们再前面的文章提到过<Unity 教程之-在Unity3d中使用贝塞尔曲线>,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...
- svg path中的贝塞尔曲线
首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...
- Unity游戏中使用贝塞尔曲线
孙广东 2015.8.15 比方在3D rpg游戏中.我们想设置弹道,不同的轨迹类型! 目的:这篇文章的主要目的是要给你关于在游戏怎样使用贝塞尔曲线的基本想法. 贝塞尔曲线是最主要的曲线,一般用在 ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- AI: 字体设计中的贝塞尔曲线
http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-cur ...
- 关于Unity中的NGUI和UGUI
一.用Unity开发2D游戏,有三套关系 1.GUI:Unity本身自带的GUI 2.NGUI:以前在Unity中广泛来做2D的,是第三方的包,需要安装 3.UGUI:Unity5.X后(其实是Uni ...
随机推荐
- CSS中的几个概念--------Day39
世界杯疯狂来袭,让这个原本就高温的夏季瞬间被引爆了,这肆虐的激情仿佛让一切都灼热了起来,绽放着刺目的光,工作之余总有那么一群人在那激烈的讨论着争辩着,抑不住的亢奋. 非常不巧,往往这群身影中总有我的存 ...
- Q10Ⅱ 双核 - 产品中心 - 海美迪
海美迪Q系列视频文明书 Q10Ⅱ 双核 - 产品中心 - 海美迪
- HDU 2152 Fruit (母函数)
# include<stdio.h> # include <algorithm> # include <string.h> # include <iostre ...
- DataSnap起源于MIDAS（十几篇博客）
作为MIDAS起始于Delphi3,Delphi4是MIDAS II,Delphi5中是MIDASIII,而后基于COM远程数据模块方式使用TCP/IP,HTTP,(D)COM构建出强大的通讯能力.从 ...
- PHP正则表达式完全手册
原文:PHP正则表达式完全手册 php的正则表达式完全手册 前言 正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感.只要认真去阅读这些资料,加上应用的时候进行 ...
- 指尖上的电商---(12)SolrAdmin中加入多核的还有一种方法
这一节中我们演示下solr中创建多核的还有一种方法. 接第10讲,首先关闭tomcatserver 1.解压solr-4.8.0后,找到solr-4.8.0以下的example目录下的multicor ...
- 字符串转换为整数”123“->123
字符串转换为整数"123"->123 题目描写叙述: 输入一个由数字组成的字符串.把它转换成整数并输出. 比如:输入字符串"123".输出整数123. 给 ...
- Iron Foundry
Iron Foundry Provided by Tier 3 Iron Foundry is a project initiated by the engineers of Tier 3, an e ...
- JAVA WEB开发环境搭建教程
一.下载安装JDK,配置好环境变量.(例如我JDK安装的目录为:C:\Program Files (x86)\Java\jdk1.6.0_10 ) 点击我的电脑-属性-系统设置(高级系统设置) ...
- C语言数据结构----递归的应用（八皇后问题的具体流程）
本节主要讲八皇后问题的基本规则和递归回溯算法的实现以及具体的代码实现和代码分析. 转载请注明出处.http://write.blog.csdn.net/postedit/10813257 一.八皇后问 ...