深入Unity UGUI源码：手写ExtendImage组件，彻底搞懂Image的Filled与Sliced渲染原理

深入Unity UGUI源码手写ExtendImage组件彻底搞懂Image的Filled与Sliced渲染原理在Unity的UI开发中Image组件是最基础也是最常用的组件之一。无论是简单的图标显示还是复杂的进度条动画Image组件都扮演着至关重要的角色。然而当我们需要实现一些特殊效果时比如支持九宫格裁剪的进度条原生的Image组件就显得力不从心了。本文将带你深入UGUI源码通过手写ExtendImage组件彻底理解Image组件中Filled与Sliced模式的渲染原理。1. UGUI Image组件基础原理UGUI的Image组件继承自MaskableGraphic类主要负责2D精灵的渲染。其核心渲染逻辑是通过OnPopulateMesh方法实现的这个方法负责生成网格数据顶点、UV、颜色等并填充到VertexHelper中。Image组件支持四种渲染类型Simple最简单的拉伸渲染Sliced九宫格渲染Tiled平铺渲染Filled填充渲染常用于进度条// Image组件的类型定义 public enum Type { Simple, Sliced, Tiled, Filled }在深入研究Filled和Sliced模式之前我们需要先了解几个关键概念Sprite的Border属性定义了九宫格的边界值UV坐标决定了纹理如何在网格上映射VertexHelper用于构建网格数据的辅助类2. Filled模式的实现原理Filled模式是制作进度条最常用的方式它通过fillAmount参数控制显示比例。让我们深入源码看看它是如何工作的。2.1 Filled模式的核心算法Filled模式的渲染逻辑主要在GenerateFilledSprite方法中实现。根据不同的填充方法水平、垂直、径向等计算顶点和UV的方式也有所不同。以水平填充为例关键计算步骤如下计算填充比例对应的顶点位置根据填充原点Left或Right调整顶点位置计算对应的UV坐标生成三角形索引// 水平填充的核心代码片段 if (fillMethod FillMethod.Horizontal) { float fill fillAmount; if (fillOrigin 1) // Right { xMin Mathf.Lerp(xMax, xMin, fill); uvMin.x Mathf.Lerp(uvMax.x, uvMin.x, fill); } else // Left { xMax Mathf.Lerp(xMin, xMax, fill); uvMax.x Mathf.Lerp(uvMin.x, uvMax.x, fill); } }2.2 Filled模式的局限性虽然Filled模式非常适合制作进度条效果但它有一个明显的缺点不支持九宫格。这意味着进度条在不同长度时边缘会出现拉伸变形需要为不同长度的进度条准备不同的图片资源无法利用九宫格的特性来优化资源3. Sliced模式的实现原理Sliced模式九宫格是UI优化的重要手段它通过将图片分为9个区域只拉伸中间部分来保持边缘不变形。3.1 九宫格的数据结构九宫格的信息存储在Sprite的border属性中它是一个Vector4分别表示左、下、右、上的边界值[left, bottom, right, top]在代码中我们通过Sprite.border属性获取这些值Vector4 border activeSprite.border;3.2 Sliced模式的渲染流程Sliced模式的渲染主要在GenerateSlicedSprite方法中实现大致流程如下获取Sprite的border值计算调整后的边界考虑像素密度将图片分为9个区域为每个区域生成顶点和UV数据// 九宫格顶点计算的核心代码 s_VertScratch[0] new Vector2(padding.x, padding.y); s_VertScratch[1] new Vector2(border.x, border.y); s_VertScratch[2] new Vector2(rect.width - border.z, rect.height - border.w); s_VertScratch[3] new Vector2(rect.width - padding.z, rect.height - padding.w);3.3 Sliced模式的局限性虽然Sliced模式能很好地保持边缘不变形但它不适合用于进度条效果因为无法实现真正的裁剪效果进度变化时部分区域会保持显示无法精确控制显示比例4. 实现ExtendImage组件结合Filled和Sliced模式的优缺点我们需要创建一个新的ExtendImage组件让Filled模式支持九宫格。4.1 组件设计思路我们的ExtendImage组件需要继承自UnityEngine.UI.Image添加一个SlicedClipMode选项重写OnPopulateMesh方法实现自定义的GenerateSlicedSprite方法[AddComponentMenu(UI/ExtendImage)] public class ExtendImage : Image { [SerializeField] private bool m_SlicedClipMode false; protected override void OnPopulateMesh(VertexHelper vh) { if (type Type.Filled m_SlicedClipMode hasBorder) { GenerateSlicedSprite(vh); } else { base.OnPopulateMesh(vh); } } }4.2 核心算法实现关键点在于如何结合Filled的裁剪和Sliced的九宫格特性。我们需要计算九宫格各部分的比例根据fillAmount确定显示哪些部分对最后一个显示的部分进行裁剪private void GenerateSlicedSprite(VertexHelper toFill) { // 获取九宫格信息 Vector4 border activeSprite.border / pixelsPerUnit; Vector4 adjustedBorders GetAdjustedBorders(border, rect); // 计算各部分比例 float xLength s_VertScratch[3].x - s_VertScratch[0].x; float len1XRatio (s_VertScratch[1].x - s_VertScratch[0].x) / xLength; float len2XRatio (s_VertScratch[2].x - s_VertScratch[1].x) / xLength; float len3XRatio (s_VertScratch[3].x - s_VertScratch[2].x) / xLength; // 根据fillAmount裁剪 if (fillAmount (len1XRatio len2XRatio)) { float ratio (fillAmount - (len1XRatio len2XRatio)) / len3XRatio; s_VertScratch[3].x s_VertScratch[2].x (s_VertScratch[3].x - s_VertScratch[2].x) * ratio; s_UVScratch[3].x s_UVScratch[2].x (s_UVScratch[3].x - s_UVScratch[2].x) * ratio; } else if (fillAmount len1XRatio) { float ratio (fillAmount - len1XRatio) / len2XRatio; s_VertScratch[2].x s_VertScratch[1].x (s_VertScratch[2].x - s_VertScratch[1].x) * ratio; } else { float ratio fillAmount / len1XRatio; s_VertScratch[1].x s_VertScratch[0].x (s_VertScratch[1].x - s_VertScratch[0].x) * ratio; } // 生成网格 toFill.Clear(); AddQuad(toFill, ...); }4.3 编辑器扩展为了让组件更易用我们还需要创建一个自定义编辑器[CustomEditor(typeof(ExtendImage), true)] public class ExtendImageEditor : ImageEditor { private SerializedProperty m_SlicedClipMode; protected override void OnEnable() { base.OnEnable(); m_SlicedClipMode serializedObject.FindProperty(m_SlicedClipMode); } public override void OnInspectorGUI() { base.OnInspectorGUI(); if ((Image.Type)m_Type.enumValueIndex Image.Type.Filled) { EditorGUILayout.PropertyField(m_SlicedClipMode); } } }5. 性能优化与注意事项在实现自定义UI组件时性能是需要重点考虑的因素。以下是几个优化建议顶点计算优化尽量减少不必要的计算复用中间计算结果使用局部变量而非频繁访问属性网格生成优化只生成必要的三角形避免频繁调用VertexHelper.Clear()使用对象池管理VertexHelper内存管理避免在每帧创建新的数组使用静态数组减少GC压力合理使用缓存// 使用静态数组减少GC private static readonly Vector2[] s_VertScratch new Vector2[4]; private static readonly Vector2[] s_UVScratch new Vector2[4];在实际项目中我发现最常遇到的问题是不正确的边界计算。特别是在处理不同分辨率和像素密度时需要特别注意提示在计算九宫格边界时一定要考虑pixelsPerUnit的影响否则在不同分辨率的设备上可能会出现显示异常。另一个常见问题是填充方向的处理。我们的ExtendImage组件目前只实现了水平和垂直方向的裁剪如果需要支持径向填充还需要扩展算法// 径向填充的伪代码 if (fillMethod FillMethod.Radial90) { // 计算角度 float angle Mathf.Lerp(0, 90, fillAmount); // 根据角度裁剪顶点 // ... }6. 扩展应用与进阶技巧掌握了Image组件的核心原理后我们可以进一步扩展其功能渐变填充在顶点颜色中添加渐变效果扭曲效果通过修改顶点位置实现扭曲动画自定义遮罩结合Shader实现特殊遮罩效果以下是一个简单的渐变填充实现思路// 渐变填充的顶点颜色设置 Color32 color0 new Color32(255, 0, 0, 255); // 起始颜色 Color32 color1 new Color32(0, 255, 0, 255); // 结束颜色 vertexHelper.AddVert(new Vector3(posMin.x, posMin.y, 0), color0, uvMin); vertexHelper.AddVert(new Vector3(posMin.x, posMax.y, 0), color0, new Vector2(uvMin.x, uvMax.y)); vertexHelper.AddVert(new Vector3(posMax.x, posMax.y, 0), color1, uvMax); vertexHelper.AddVert(new Vector3(posMax.x, posMin.y, 0), color1, new Vector2(uvMax.x, uvMin.y));对于更复杂的效果可以结合Shader来实现。例如创建一个支持UV动画的Image组件public class AnimatedImage : Image { public Vector2 uvAnimationSpeed Vector2.zero; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); UIVertex vertex new UIVertex(); for (int i 0; i vh.currentVertCount; i) { vh.PopulateUIVertex(ref vertex, i); vertex.uv0 uvAnimationSpeed * Time.unscaledTime; vh.SetUIVertex(vertex, i); } } }在实际项目中我发现理解UGUI的底层原理不仅能帮助我们解决具体问题还能激发更多创意。比如通过分析Image组件的实现我们可以更好地理解Unity的UI渲染管线网格生成与优化的技巧性能瓶颈的分析方法自定义组件的设计模式