在Unity中使用UGUI绘制自定义图形
在商店看到这样一个例子,表示很有兴趣,他们说是用UGUI做的。我想,像这种可以随便变形的图形,我第一个就想到了网格变形。
做法1:
细心的朋友应该会发现,每个UGUI可见元素,都有一个‘Canvas Render‘组件,就跟3D世界模型有‘Mesh Render‘以及2D Sprite
有’Sprite Render‘一样,UGUI的UI元素也需要一个Render渲染出来,那么第一时间想到的就是修改Render的Mesh。
private CanvasRenderer render; void Update() { Mesh mesh = new Mesh(); mesh.SetVertices(); // 设置顶点,这里缩略没写出顶点数组 mesh.SetUVs(); // 同上 mesh.SetTriangles(); render = GetComponent<CanvasRenderer>(); render.SetMesh(mesh); }
不过不知道为何,这种做法失败了,不知道是哪里出错,待我再研究下。
本来想直接获取render的mesh,然后在此mesh的基础上修改顶点的,可惜render并没有获取mesh的方法,或许是我还未发现。
做法2:
然后我想到UGUI是开源的,然后就跑去看源码,研究Image控件的实现原理,发现了Image是继承Graphic,
而Graphic里有OnPopulateMesh这个函数,查官方API:
protected void OnPopulateMesh(UI.VertexHelper vh);
Description
Callback function when a UI element needs to generate vertices.
Used by Text, Image, and RawImage for example to generate vertices specific to their use case.
说的是当该控件(例如Text,Image,RawImage)需要改变顶点的时候,就会自动调用。
在传入的vh参数里修改顶点,三角形,UV等,同样可以达到修改mesh的目的。
不过该函数是只有在该Craphic组件需要修改的时候才会调用,比如你修改Image的大小,或者它加载的时候才会。
这样就导致我们没法及时看到我们对mesh的修改,比如用是将一张Image的四个角分别用四个对象表示,这四个对象的
移动,会让这种Image发生形变。但是没法及时更新就没办法了。
还好有SetNativeSize()这个方法,其实跟刷新差不多。
上代码:
// 自己手动刷新
void Update()
{
SetNativeSize();
}
protected override void OnPopulateMesh(VertexHelper vh) { Color32 color32 = color; vh.Clear();
// 这里我用5对GameObject的坐标来与该Image对象的五个顶点绑定起来
// AddVert的最后一个参数是UV值
vh.AddVert(pos[0].position, color32, new Vector2(0f, 0f)); vh.AddVert(pos[1].position, color32, new Vector2(0f, 1f)); vh.AddVert(pos[2].position, color32, new Vector2(1f, 1f)); vh.AddVert(pos[3].position, color32, new Vector2(1f, 0f)); vh.AddVert(pos[4].position, color32, new Vector2(0.5f, 0f)); vh.AddTriangle(0, 1, 2); vh.AddTriangle(2, 3, 4); vh.AddTriangle(2, 4, 0); }
做法3:
想起我之前为了让Text实现渐变效果写的一个扩展方法,就是创建一个组件脚本,这个组件继承BaseMeshEffect,
然后在里面覆写ModifyMesh(Mesh mesh)方法,在该方法内部实现修改mesh即可。
这种理论可以实现的,等我实验完回来更新。