一直以来都对Unity中的UGUI比较感兴趣，之前我学过点Android，Android中最让我惊喜就是其中的View 也就是呈现的界面UI，有太多的人发挥着自己的想象力创造了一个又一个酷炫的UI组件；现在学习着Unity中的UGUI，也是希望能造属于自己的轮子，所以了解UGUI源码是必要的，知道这其中最本质UI实现原理也是开始~~
大概的原理
在Unity的世界中，UI的基本组成就是界面和事件，像我们的按钮，有构成按钮的外观以及响应的事件，至此才说得上是个UI。
界面的构成
这里的界面不仅仅只是指2D，同样3D在Unity中也是相同的原理。我们能够在Unity中看到物体其实多亏了下面的这两个
MeshRender以及MeshFilter,有了它们才能让我们看到物体的样子，具体的细节我就不细说,大体就是一个物体模型构成需要网格以及UV贴图（这还是我学建模的时候接触到的，当然远不止这些），这样在导入Unity配合上面两个组件和灯光就能够让我们看到了。
界面的事件
说到事件究其本质应该是射线监测外加行为判断才有的，这让我想起了用Unity做的第一个项目，那时我用的就是射线来处理很多物体的交互，现在想来还是经验不够，完全可以通过委托事件来弄，会简化好多。
自己的UI自己造
说了那么多，其实只要有个像样的例子也就能理解了
首先上代码，也就这一个代码
MyUI.cs
using UnityEngine;
using UnityEngine.UI;
public class MyUI : MonoBehaviour {
//这是个帮助类，具体可以查看官方文档
VertexHelper vh = new VertexHelper();
private Mesh mesh;
public Color color;
public Texture2D texture2D;
private MeshFilter meshFilter;
private MeshRenderer meshRender;
private MeshCollider meshCollider;
public Camera cam;
private MeshFilter MeshFilter{
get{
if (meshFilter == null)
meshFilter = GetComponent<MeshFilter>();
return meshFilter;
}
}
private MeshRenderer MeshRenderer
{
get
{
if (meshRender == null)
meshRender = GetComponent<MeshRenderer>();
return meshRender;
}
}
private MeshCollider MeshCollider
{
get
{
if (meshCollider == null)
meshCollider = GetComponent<MeshCollider>();
return meshCollider;
}
}
// Use this for initialization
void Start () {
//初始化Mesh
InitMesh();
}
// Update is called once per frame
void Update () {
//通过屏幕鼠标点击点发射射线
var ray = cam.ScreenPointToRay(Input.mousePosition);
RaycastHit hitInfo;
Physics.Raycast(ray, out hitInfo);
if (hitInfo.collider != null && hitInfo.collider.gameObject != null)
{
//被射线射中且鼠标左键单击了产生单击事件
if (Input.GetMouseButtonDown(0))
{
Debug.Log("鼠标点击了");
}
}
//将颜色传入MeshRender,给UI增添颜色的变化
MeshRenderer.material.color = color;
//将UI图片放入UI的MeshRender中
MeshRenderer.material.mainTexture = texture2D;
}
void InitMesh()
{
//创建一个Mesh
mesh = new Mesh();
vh.Clear();
//对UI界面进行描绘，主要设置顶点和UV，这里是Vector2 当然也可以Vector3
vh.AddVert(new Vector2(0, 0), color, new Vector2(0, 0));
vh.AddVert(new Vector2(0, 1), color, new Vector2(0, 1));
vh.AddVert(new Vector2(1, 1), color, new Vector2(1, 1));
vh.AddVert(new Vector2(1, 0), color, new Vector2(1, 0));
//对顶点进行分序连接成三角形
vh.AddTriangle(0,1,2);
vh.AddTriangle(2,3,0);
//将顶点设置填充到mesh中
vh.FillMesh(mesh);
//将mesh填充进MeshFilter
MeshFilter.mesh = mesh;
//因为需要射线射中这里需要添加碰撞器，且把mesh传入
MeshCollider.sharedMesh = mesh;
}
}
代码挂载到一个空物体上，具体像下面这样
MyUI.png
具体的解释已经在代码中给出了，对了如果对其中的顶点设置有疑问的话可以移步 这里
当然也可以参看原文 here
还有一点我要说的是这并非我原创，我只是把理解写出来而已，详细可以参看 这里
基本实现以及原理说的差不多了，接下来就需要自己去源码中寻找更多的东西，或者之后的某一天我可以写出不同效果的UI出来，那会儿对UGUI的使用才能算熟~
