赞
踩
这篇简单的纪录下利用Graphic类,实现UGUI圆环的绘制。效果图如下:
github目录:https://github.com/luckyWjr/Demo
我们知道一个图形是由N个顶点,互相连成线,然后填充起来。如三角形有三个顶点,四边形有四个,而圆形可以理解为很多很多个顶点。Unity绘制图形的时候同样需要知道这些顶点信息,而区别在于这些看起来无缝连接的形状,在Untiy中是由一个个三角形拼接起来的。
也就是说,Unity只能绘制出三角形,然后由一个个三角形来组成更复杂的形状。例如四边形是两个三角形组成(下图中是ABC和ADC两个三角形,当然也可以是ABD和BDC两个组成),五边形则是三个,而圆则可以由N个三角形组成,如下图:
要绘制三角形那就需要三个顶点,例如上图中的ABC,Unity提供了UIVertex类来纪录顶点的信息,例如坐标,颜色,uv,顶点法线等。除了三个顶点信息外,我们还需要知道其绘制顺序,如是A->B->C还是A->C->B或者其他。这个顺序会影响到三角形面的朝向(Unity是左手坐标系,绘制方向则是左手手指弯曲的方向,面的朝向即左手大拇指朝向,因此ABC的顺序面朝向屏幕前的我们,ACB的顺序则是朝向屏幕后)由于UGUI默认的Shader:UI/Default,设置了Cuff Off,也就是双面渲染,所以我们看不出差别。
注:Unity内置Shader下载路径:https://unity3d.com/get-unity/download/archive
前面讲了大致的理念,那么知道顶点信息后如何实现图形的绘制,就是由Graphic类来帮助我们实现。如下图,我们需要自定义一个类继承Graphic,然后重新其OnPopulateMesh方法。(UIGI中的Image也是继承于此)
- public class Triangle : Graphic
- {
- protected override void OnPopulateMesh(VertexHelper vh)
- {
-
- }
- }
注:文件名和类名必须相同,否则在给GameObject挂该组件的时候,会报错:cant add script component because the script class cannot be found...
注:若想要支持RectMask2D功能,则改为继承MaskableGraphic即可
在OnPopulateMesh方法中提供了VertexHelper参数,通过它我们就可以实现添加顶点等操作了。
VertexHelper.AddVert(Vector3 position, Color32 color, Vector2 uv0)
参数是顶点坐标,颜色以及uv,也可以直接添加我们前面提到的UIVertex:
VertexHelper.AddVert(UIVertex v)
在VertexHelper中会有如下List来存放这些顶点的相关信息,添加一个顶点对应的List.Count + 1
- List<Vector3> m_Positions;
- List<Color32> m_Colors;
- List<Vector2> m_Uv0S;
- List<Vector2> m_Uv1S;
- List<Vector2> m_Uv2S;
- List<Vector2> m_Uv3S;
- List<Vector3> m_Normals;
- List<Vector4> m_Tangents;
VertexHelper.AddTriangle(int idx0, int idx1, int idx2)
参数是三个顶点存储在VertexHelper中的下标,同时也代表了其绘制顺序,idx0 -> idx1 -> idx2。
在VertexHelper中有如下List来存放这些下标,添加一个三角面对应的List.Count + 3
private List<int> m_Indices;
VertexHelper.currentVertCount
对应 m_Positions.Count,添加了几个顶点数量就是几
VertexHelper.currentIndexCount
对应 m_Indices.Count,添加了几次三角面数量就是N * 3
因此正常的绘制一个四边形,有四个顶点,两个三角面,因此currentVertCount = 4,currentIndexCount = 6
VertexHelper.Clear()
除了重写OnPopulateMesh方法外,我们还可以重写mainTexture属性来设置贴图,例如
- [SerializeField] Sprite m_image;
- public override Texture mainTexture => m_image == null ? s_WhiteTexture : m_image.texture;
s_WhiteTexture即是Texture2D.whiteTexture,也就是纯白的图。
如果我们在运行时动态修改了一些属性,需要重新绘制。例如修改了贴图,或者绘制圆的时候,修改了填充比例。我们可以调用下面方法来触发。
- //调用后会在下一帧重新执行OnPopulateMesh
- SetVerticesDirty();
-
- //调用后会在下一帧重新设置material以及Texture
- SetMaterialDirty();
-
- //调用后会重新布局
- SetLayoutDirty();
-
- //以上全部调用
- SetAllDirty();
根据前面的介绍,要绘制一个三角形就很简单了,添加三个顶点,添加一个三角面即可
- [ExecuteInEditMode]
- public class Triangle : Graphic
- {
- public Vector2 positionA;
- public Vector2 positionB;
- public Vector2 positionC;
-
- protected override void OnPopulateMesh(VertexHelper vh)
- {
- vh.Clear();
-
- vh.AddVert(positionA, Color.white, Vector2.zero);
- vh.AddVert(positionB, Color.red, Vector2.zero);
- vh.AddVert(positionC, Color.green, Vector2.zero);
- vh.AddTriangle(0, 1, 2);
- }
- }
在Canvas中添加一个GameObject,挂上我们的组件,然后随便设置三个点的坐标即可,效果如下
同样的四边形也就很简单了,四个顶点,两个三角面。不过在这边顺便讲一下前面没有提到的uv属性,先来看完整的代码
- [ExecuteInEditMode]
- public class Quadrangle : Graphic
- {
- public Vector2 positionLeftTop;
- public Vector2 positionRightTop;
- public Vector2 positionRightBottom;
- public Vector2 positionLeftBottom;
-
- [SerializeField] Sprite m_image;
-
- public override Texture mainTexture => m_image == null ? s_WhiteTexture : m_image.texture;
-
- UIVertex[] m_vertexes = new UIVertex[4];
- Vector2[] m_uvs = new Vector2[4];
-
- protected override void Start()
- {
- m_uvs[0] = new Vector2(0, 1);
- m_uvs[1] = new Vector2(1, 1);
- m_uvs[2] = new Vector2(1, 0);
- m_uvs[3] = new Vector2(0, 0);
- }
-
- protected override void OnPopulateMesh(VertexHelper vh)
- {
- vh.Clear();
-
- for (int i = 0; i < 4; i++)
- {
- m_vertexes[i].color = color;
- m_vertexes[i].uv0 = m_uvs[i];
- }
-
- m_vertexes[0].position = positionLeftTop;
- m_vertexes[1].position = positionRightTop;
- m_vertexes[2].position = positionRightBottom;
- m_vertexes[3].position = positionLeftBottom;
-
- vh.AddVert(m_vertexes[0]);
- vh.AddVert(m_vertexes[1]);
- vh.AddVert(m_vertexes[2]);
- vh.AddVert(m_vertexes[3]);
-
- vh.AddTriangle(0, 2, 1);
- vh.AddTriangle(0, 3, 2);
- }
- }
相比之前,我们添加了Sprite的设置,同时也为顶点添加了uv属性,效果图如下
正方形(就像Image组件了): 不规则形状:
uv简单来说就是一个二维坐标(u和v的取值范围都是 0-1 ),代表着一张贴图每个像素的位置信息。uv(0,0)就代表图片的左下角,uv(1,1)代表图片的右上角。这样上述代码m_uvs中的四个uv值就很好理解了,分别是左上,右上,右下,左下。
接着我们的正方形正好是四个顶点,每个顶点设置相应的uv值,那么在该顶点上就会显示图片中相应uv的像素信息了。两个顶点之间的颜色同样也对应着图片中两点之间的像素信息。(顶点的color值要设置为Graphic中的color属性)
圆的话就是由N个三角形组成,圆环则是把这些组成圆的三角形切了一刀,也就是变成了一个四边形。由于代码写了注释,这里就不详细介绍了,效果图见文章最上方。
- [ExecuteInEditMode]
- // Changed to maskableGraphic so it can be masked with RectMask2D
- public class Annulus : MaskableGraphic
- {
- public enum ShapeType
- {
- Annulus,//圆环
- Circle,//圆
- }
-
- [SerializeField] Sprite m_image;
-
- public ShapeType shapeType;
-
- public float innerRadius = 10;//圆环内径,为0即是圆
- public float outerRadius = 20;//圆环外径
-
- [Range(0, 1)] [SerializeField] float m_fillAmount;//填充值
-
- [Range(0, 720)] public int segments = 360;//片数,越大锯齿越不明显
-
- [SerializeField] Image.Origin360 m_originType;//填充的起点
-
- public bool m_isClockwise = true;//填充方向,是否是顺时针填充
-
- public override Texture mainTexture => m_image == null ? s_WhiteTexture : m_image.texture;
-
- float m_originRadian = -1;//根据m_originType设置相关弧度(-1表示还没设置过对应的值)
-
- public float fillAmount
- {
- get => m_fillAmount;
- set
- {
- m_fillAmount = value;
- SetVerticesDirty();
- }
- }
-
- public Sprite image
- {
- get => m_image;
- set
- {
- if (m_image == value)
- return;
- m_image = value;
- SetVerticesDirty();
- SetMaterialDirty();
- }
- }
-
- public Image.Origin360 originType
- {
- get => m_originType;
- set
- {
- if (m_originType == value)
- return;
- m_originType = value;
- SetOriginRadian();
- SetVerticesDirty();
- }
- }
-
- public bool isClockwise
- {
- get => m_isClockwise;
- set
- {
- if (m_isClockwise != value)
- {
- m_isClockwise = value;
- SetVerticesDirty();
- }
- }
- }
-
- UIVertex[] m_vertexes = new UIVertex[4];
- Vector2[] m_uvs = new Vector2[4];
- Vector2[] m_positions = new Vector2[4];
-
- protected override void Start()
- {
- if (m_originRadian == -1)
- SetOriginRadian();
-
- m_uvs[0] = new Vector2(0, 1);
- m_uvs[1] = new Vector2(1, 1);
- m_uvs[2] = new Vector2(1, 0);
- m_uvs[3] = new Vector2(0, 0);
- }
-
- protected override void OnPopulateMesh(VertexHelper vh)
- {
- vh.Clear();
-
- //m_fillAmount == 0,什么也不绘制
- if (m_fillAmount == 0) return;
-
- #if UNITY_EDITOR
- SetOriginRadian();
- #endif
-
- //每个面片的角度
- float degrees = 360f / segments;
- //需要绘制的面片数量
- int count = (int)(segments * m_fillAmount);
-
- float cos = Mathf.Cos(m_originRadian);
- float sin = Mathf.Sin(m_originRadian);
-
- //计算外环起点,例如m_originRadian = 0,x = -outerRadius,y = 0,所以起点是Left(九点钟方向)
- float x = -outerRadius * cos;
- float y = outerRadius * sin;
- Vector2 originOuter = new Vector2(x, y);
-
- //计算内环起点
- x = -innerRadius * cos;
- y = innerRadius * sin;
- Vector2 originInner = new Vector2(x, y);
-
- for (int i = 1; i <= count; i++)
- {
- //m_positions[0] 当前面片的外环起点
- m_positions[0] = originOuter;
-
- //当前面片的弧度 + 起始弧度 = 终止弧度
- float endRadian = i * degrees * Mathf.Deg2Rad * (isClockwise ? 1 : -1) + m_originRadian;
- cos = Mathf.Cos(endRadian);
- sin = Mathf.Sin(endRadian);
-
- //m_positions[1] 当前面片的外环终点
- m_positions[1] = new Vector2(-outerRadius * cos, outerRadius * sin);
-
- //m_positions[2] 当前面片的内环终点
- //m_positions[3] 当前面片的内环起点
- if (shapeType == ShapeType.Annulus)
- {
- m_positions[2] = new Vector2(-innerRadius * cos, innerRadius * sin);
- m_positions[3] = originInner;
- }
- else
- {
- m_positions[2] = Vector2.zero;
- m_positions[3] = Vector2.zero;
- }
-
- // 设置顶点的颜色坐标以及uv
- for (int j = 0; j < 4; j++)
- {
- m_vertexes[j].color = color;
- m_vertexes[j].position = m_positions[j];
- m_vertexes[j].uv0 = m_uvs[j];
- }
-
- //当前顶点数量
- int vertCount = vh.currentVertCount;
-
- //如果是圆只需要添加三个顶点,创建一个三角面
- vh.AddVert(m_vertexes[0]);
- vh.AddVert(m_vertexes[1]);
- vh.AddVert(m_vertexes[2]);
- //参数即三角面的顶点绘制顺序
- vh.AddTriangle(vertCount, vertCount + 2, vertCount + 1);
-
- // 如果是圆环就需要添加第四个顶点,并再创建一个三角面
- if (shapeType == ShapeType.Annulus)
- {
- vh.AddVert(m_vertexes[3]);
- vh.AddTriangle(vertCount, vertCount + 3, vertCount + 2);
- }
-
- //当前面片的终点就是下个面片的起点
- originOuter = m_positions[1];
- originInner = m_positions[2];
- }
- }
-
- //m_originType改变的时候需要重新设置m_originRadian
- void SetOriginRadian()
- {
- switch (m_originType)
- {
- case Image.Origin360.Left:
- m_originRadian = 0 * Mathf.Deg2Rad;
- break;
- case Image.Origin360.Top:
- m_originRadian = 90 * Mathf.Deg2Rad;
- break;
- case Image.Origin360.Right:
- m_originRadian = 180 * Mathf.Deg2Rad;
- break;
- case Image.Origin360.Bottom:
- m_originRadian = 270 * Mathf.Deg2Rad;
- break;
- }
- }
- }
知道原理,我们就可以进行一些魔改,例如fillmount小于1的时候,用别的颜色来填充等,大家可以自由发挥。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。