UGUI源代码之Image-Sliced模式

2024-01-06 08:35:40

UGUI源代码之Image-Sliced模式

1、目的
2、参考
3、代码阅读
4、思考
5、自定义实现九宫图
6、与NGUI对比
7、最终效果

1、目的

本文主要以研究UGUI中九宫图的实现过程，以及考虑能否优化（效果上的优化以及性能上的优化），最终实现出来的效果还需要进一步测试才能用于实际项目中。

2、参考

本文参考Unity官方的UGUI源代码
Github地址：https://github.com/Unity-Technologies/uGUI

3、代码阅读

Image组件有4种模式，在这里我们只解析九宫模式的Image。

static readonly Vector2[] s_VertScratch = new Vector2[4];
	static readonly Vector2[] s_UVScratch = new Vector2[4];
	private void GenerateSlicedSprite(VertexHelper toFill)
	{
	    if (!hasBorder)
	    {
	        GenerateSimpleSprite(toFill, false);
	        return;
	    }
	
	    Vector4 outer, inner, padding, border;
	
	    if (activeSprite != null)
	    {
	        outer = Sprites.DataUtility.GetOuterUV(activeSprite);
	        inner = Sprites.DataUtility.GetInnerUV(activeSprite);
	        padding = Sprites.DataUtility.GetPadding(activeSprite);
	        border = activeSprite.border;
	    }
	    else
	    {
	        outer = Vector4.zero;
	        inner = Vector4.zero;
	        padding = Vector4.zero;
	        border = Vector4.zero;
	    }
	
	    Rect rect = GetPixelAdjustedRect();
	    Vector4 adjustedBorders = GetAdjustedBorders(border / pixelsPerUnit, rect);
	    padding = padding / pixelsPerUnit;
	
	    s_VertScratch[0] = new Vector2(padding.x, padding.y);
	    s_VertScratch[3] = new Vector2(rect.width - padding.z, rect.height - padding.w);
	
	    s_VertScratch[1].x = adjustedBorders.x;
	    s_VertScratch[1].y = adjustedBorders.y;
	
	    s_VertScratch[2].x = rect.width - adjustedBorders.z;
	    s_VertScratch[2].y = rect.height - adjustedBorders.w;
	
	    for (int i = 0; i < 4; ++i)
	    {
	        s_VertScratch[i].x += rect.x;
	        s_VertScratch[i].y += rect.y;
	    }
	
	    s_UVScratch[0] = new Vector2(outer.x, outer.y);
	    s_UVScratch[1] = new Vector2(inner.x, inner.y);
	    s_UVScratch[2] = new Vector2(inner.z, inner.w);
	    s_UVScratch[3] = new Vector2(outer.z, outer.w);
	
	    toFill.Clear();
	
	    for (int x = 0; x < 3; ++x)
	    {
	        int x2 = x + 1;
	
	        for (int y = 0; y < 3; ++y)
	        {
	            if (!m_FillCenter && x == 1 && y == 1)
	                continue;
	
	            int y2 = y + 1;
	
	
	            AddQuad(toFill,
	                new Vector2(s_VertScratch[x].x, s_VertScratch[y].y),
	                new Vector2(s_VertScratch[x2].x, s_VertScratch[y2].y),
	                color,
	                new Vector2(s_UVScratch[x].x, s_UVScratch[y].y),
	                new Vector2(s_UVScratch[x2].x, s_UVScratch[y2].y));
	        }
	    }
	}

在这里简单介绍一下Unity GUI渲染的流程：
1、与渲染模型类似，实际上UGUI也是通过计算顶点和三角形生成网格（Mesh），再通过Renderer渲染出来
2、顶点数据中最主要的是位置，颜色，纹理坐标，法线等。也就是说顶点信息中保存着顶点位置、颜色、纹理坐标、法线信息等。
3、Unity中的图片渲染，实际上也是通过生成顶点信息，以及生成三角形等，再把生成的信息转换为Mesh，再进行渲染的过程

从代码可以看出，传进来的是一个VertexHelper的参数，VertexHelper是顶点辅助类，VertexHelper类封装了生成mesh的基本信息以及常用的方法。

if (!hasBorder)
{
    GenerateSimpleSprite(toFill, false);
    return;
}

这段代码的意思是，如果Sprite没有设置九宫范围，则直接生成Simple模式的图

Vector4 outer, inner, padding, border;

if (activeSprite != null)
{
    outer = Sprites.DataUtility.GetOuterUV(activeSprite);
    inner = Sprites.DataUtility.GetInnerUV(activeSprite);
    padding = Sprites.DataUtility.GetPadding(activeSprite);
    border = activeSprite.border;
}
else
{
    outer = Vector4.zero;
    inner = Vector4.zero;
    padding = Vector4.zero;
    border = Vector4.zero;
}

Rect rect = GetPixelAdjustedRect();
Vector4 adjustedBorders = GetAdjustedBorders(border / pixelsPerUnit, rect);
padding = padding / pixelsPerUnit;

s_VertScratch[0] = new Vector2(padding.x, padding.y);
s_VertScratch[3] = new Vector2(rect.width - padding.z, rect.height - padding.w);

s_VertScratch[1].x = adjustedBorders.x;
s_VertScratch[1].y = adjustedBorders.y;

s_VertScratch[2].x = rect.width - adjustedBorders.z;
s_VertScratch[2].y = rect.height - adjustedBorders.w;

for (int i = 0; i < 4; ++i)
{
    s_VertScratch[i].x += rect.x;
    s_VertScratch[i].y += rect.y;
}

s_UVScratch[0] = new Vector2(outer.x, outer.y);
s_UVScratch[1] = new Vector2(inner.x, inner.y);
s_UVScratch[2] = new Vector2(inner.z, inner.w);
s_UVScratch[3] = new Vector2(outer.z, outer.w);

这段代码实际上的操作是，计算图片的位置信息，然后把4个顶点位置信息按顺序写进s_VertScratch数组中，还有，计算当前sprite的uv信息（包括图集中的uv和自身的uv），然后把4个顶点的uv信息按顺序写进s_UVScratch数组中，其顺序如图所示：

因此，知道这4个点的位置信息和UV信息即可知道全部点的位置和UV信息了

toFill.Clear();

for (int x = 0; x < 3; ++x)
{
    int x2 = x + 1;

    for (int y = 0; y < 3; ++y)
    {
        if (!m_FillCenter && x == 1 && y == 1)
            continue;

        int y2 = y + 1;


        AddQuad(toFill,
            new Vector2(s_VertScratch[x].x, s_VertScratch[y].y),
            new Vector2(s_VertScratch[x2].x, s_VertScratch[y2].y),
            color,
            new Vector2(s_UVScratch[x].x, s_UVScratch[y].y),
            new Vector2(s_UVScratch[x2].x, s_UVScratch[y2].y));
    }
}

最后，先清空VertexHelper里的顶点信息，然后把计算出来的顶点信息通过AddQuad方法加入到VertexHelper中

其中，VertexHelper是一个用于保存顶点和三角形的类，相当于顶点和三角形信息的容器，常用方法有AddVert添加顶点，以及AddTriangle添加三角形

static void AddQuad(VertexHelper vertexHelper, Vector2 posMin, Vector2 posMax, Color32 color, Vector2 uvMin, Vector2 uvMax)
{
    int startIndex = vertexHelper.currentVertCount;

    vertexHelper.AddVert(new Vector3(posMin.x, posMin.y, 0), color, new Vector2(uvMin.x, uvMin.y));
    vertexHelper.AddVert(new Vector3(posMin.x, posMax.y, 0), color, new Vector2(uvMin.x, uvMax.y));
    vertexHelper.AddVert(new Vector3(posMax.x, posMax.y, 0), color, new Vector2(uvMax.x, uvMax.y));
    vertexHelper.AddVert(new Vector3(posMax.x, posMin.y, 0), color, new Vector2(uvMax.x, uvMin.y));

    vertexHelper.AddTriangle(startIndex, startIndex + 1, startIndex + 2);
    vertexHelper.AddTriangle(startIndex + 2, startIndex + 3, startIndex);
}

AddQuad方法是为VetexHelper增加一个矩形，实际上是增加4个顶点，以及两个三角形面。如果不需要填充中心（FillCenter）的话，就不为中心的矩形添加顶点和三角形面就可以了
至此，一张九宫图就实现出来了。

4、思考

从第三部分源代码阅读可以看出，实现九宫图一共需要执行9次AddQuad方法，即一共会产生4x9=36个顶点，以及2x9=18个三角形面，就是说，每次使用九宫图都会比使用Simple模式的图增加32个顶点。（Simple模式的图只需要执行以此AddQuad方法，需要4个顶点和2个三角形）
但是，根据我画的示意图，实际上最少只需要16个顶点就能实现相同的九宫图，而UGUI的九宫图实际上有不少顶点是重复的，那么重复的顶点是否可以复用呢？

5、自定义实现九宫图

实现自定义的九宫图，在这里只写重点部分：

static void AddVertexAndLine(VertexHelper vertexHelper, Vector2[] s_VertScratch, Vector2[] s_UVScratch, bool m_FillCenter)
{
    vertexHelper.AddVert(new Vector3(s_VertScratch[0].x, s_VertScratch[3].y), color, new Vector2(s_UVScratch[0].x, s_UVScratch[3].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[1].x, s_VertScratch[3].y), color, new Vector2(s_UVScratch[1].x, s_UVScratch[3].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[2].x, s_VertScratch[3].y), color, new Vector2(s_UVScratch[2].x, s_UVScratch[3].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[3].x, s_VertScratch[3].y), color, new Vector2(s_UVScratch[3].x, s_UVScratch[3].y));

    vertexHelper.AddVert(new Vector3(s_VertScratch[0].x, s_VertScratch[2].y), color, new Vector2(s_UVScratch[0].x, s_UVScratch[2].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[1].x, s_VertScratch[2].y), color, new Vector2(s_UVScratch[1].x, s_UVScratch[2].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[2].x, s_VertScratch[2].y), color, new Vector2(s_UVScratch[2].x, s_UVScratch[2].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[3].x, s_VertScratch[2].y), color, new Vector2(s_UVScratch[3].x, s_UVScratch[2].y));

    vertexHelper.AddVert(new Vector3(s_VertScratch[0].x, s_VertScratch[1].y), color, new Vector2(s_UVScratch[0].x, s_UVScratch[1].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[1].x, s_VertScratch[1].y), color, new Vector2(s_UVScratch[1].x, s_UVScratch[1].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[2].x, s_VertScratch[1].y), color, new Vector2(s_UVScratch[2].x, s_UVScratch[1].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[3].x, s_VertScratch[1].y), color, new Vector2(s_UVScratch[3].x, s_UVScratch[1].y));

    vertexHelper.AddVert(new Vector3(s_VertScratch[0].x, s_VertScratch[0].y), color, new Vector2(s_UVScratch[0].x, s_UVScratch[0].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[1].x, s_VertScratch[0].y), color, new Vector2(s_UVScratch[1].x, s_UVScratch[0].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[2].x, s_VertScratch[0].y), color, new Vector2(s_UVScratch[2].x, s_UVScratch[0].y));
    vertexHelper.AddVert(new Vector3(s_VertScratch[3].x, s_VertScratch[0].y), color, new Vector2(s_UVScratch[3].x, s_UVScratch[0].y));

    vertexHelper.AddTriangle(4, 0, 1);
    vertexHelper.AddTriangle(1, 5, 4);
    vertexHelper.AddTriangle(5, 1, 2);
    vertexHelper.AddTriangle(2, 6, 5);
    vertexHelper.AddTriangle(6, 2, 3);
    vertexHelper.AddTriangle(3, 7, 6);
    vertexHelper.AddTriangle(8, 4, 5);
    vertexHelper.AddTriangle(5, 9, 8);

    if (m_FillCenter)
    {
        vertexHelper.AddTriangle(9, 5, 6);
        vertexHelper.AddTriangle(6, 10, 9);
    }

    vertexHelper.AddTriangle(10, 6, 7);
    vertexHelper.AddTriangle(7, 11, 10);
    vertexHelper.AddTriangle(12, 8, 9);
    vertexHelper.AddTriangle(9, 13, 12);
    vertexHelper.AddTriangle(13, 9, 10);
    vertexHelper.AddTriangle(10, 14, 13);
    vertexHelper.AddTriangle(14, 10, 11);
    vertexHelper.AddTriangle(11, 15, 14);
}

因为顶点信息和UV信息都计算好了，所以信息可以直接使用，修改的地方就是循环使用AddQuad方法的地方，改为使用上述方法。
可以看出，自定义实现的九宫图中，我没有循环使用AddQuad方法，而是改为使用AddVert方法和AddTriangle方法手动添加16个顶点和18个三角形面。

需要注意的是：这里自定义的SlicedImage是没有继承Graphic类的，而是继承MonoBehavior类，因此一些变量需要获取（如canvas，rectTransform等），在这里使用简单的挂载获取

6、与NGUI对比

void SlicedFill (List<Vector3> verts, List<Vector2> uvs, List<Color> cols)
{
	Vector4 br = border * pixelSize;
		
	if (br.x == 0f && br.y == 0f && br.z == 0f && br.w == 0f)
	{
		SimpleFill(verts, uvs, cols);
		return;
	}

	Color gc = drawingColor;
	Vector4 v = drawingDimensions;

	mTempPos[0].x = v.x;
	mTempPos[0].y = v.y;
	mTempPos[3].x = v.z;
	mTempPos[3].y = v.w;

	if (mFlip == Flip.Horizontally || mFlip == Flip.Both)
	{
		mTempPos[1].x = mTempPos[0].x + br.z;
		mTempPos[2].x = mTempPos[3].x - br.x;

		mTempUVs[3].x = mOuterUV.xMin;
		mTempUVs[2].x = mInnerUV.xMin;
		mTempUVs[1].x = mInnerUV.xMax;
		mTempUVs[0].x = mOuterUV.xMax;
	}
	else
	{
		mTempPos[1].x = mTempPos[0].x + br.x;
		mTempPos[2].x = mTempPos[3].x - br.z;

		mTempUVs[0].x = mOuterUV.xMin;
		mTempUVs[1].x = mInnerUV.xMin;
		mTempUVs[2].x = mInnerUV.xMax;
		mTempUVs[3].x = mOuterUV.xMax;
	}

	if (mFlip == Flip.Vertically || mFlip == Flip.Both)
	{
		mTempPos[1].y = mTempPos[0].y + br.w;
		mTempPos[2].y = mTempPos[3].y - br.y;

		mTempUVs[3].y = mOuterUV.yMin;
		mTempUVs[2].y = mInnerUV.yMin;
		mTempUVs[1].y = mInnerUV.yMax;
		mTempUVs[0].y = mOuterUV.yMax;
	}
	else
	{
		mTempPos[1].y = mTempPos[0].y + br.y;
		mTempPos[2].y = mTempPos[3].y - br.w;

		mTempUVs[0].y = mOuterUV.yMin;
		mTempUVs[1].y = mInnerUV.yMin;
		mTempUVs[2].y = mInnerUV.yMax;
		mTempUVs[3].y = mOuterUV.yMax;
	}

	for (int x = 0; x < 3; ++x)
	{
		int x2 = x + 1;

		for (int y = 0; y < 3; ++y)
		{
			if (centerType == AdvancedType.Invisible && x == 1 && y == 1) continue;

			int y2 = y + 1;

			verts.Add(new Vector3(mTempPos[x].x, mTempPos[y].y));
			verts.Add(new Vector3(mTempPos[x].x, mTempPos[y2].y));
			verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y2].y));
			verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y].y));

			uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y].y));
			uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y2].y));
			uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y2].y));
			uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y].y));

			if (!mApplyGradient)
			{
				cols.Add(gc);
				cols.Add(gc);
				cols.Add(gc);
				cols.Add(gc);
			}
			else
			{
				AddVertexColours(cols, ref gc, x, y);
				AddVertexColours(cols, ref gc, x, y2);
				AddVertexColours(cols, ref gc, x2, y2);
				AddVertexColours(cols, ref gc, x2, y);
			}
		}
	}
}

实际上，NGUI在九宫图的实现逻辑上和UGUI无异，同样是使用循环增加顶点和三角形面，增加的顶点数和三角形面也和UGUI的一致

7、最终效果

可以看到，自定义实现的九宫图比UGUI的九宫图少20个顶点

两张九宫图的顶点结构也是一样的

码农公寓