【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移

这篇具有很好参考价值的文章主要介绍了【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文最终效果
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）

一、前言

我们在Unity场景中，所有能被渲染出来的物体都会带有网格，比如3D模型、粒子特效、UI、文字等等

我们的UGUI对象，也是由网格顶点、材质、纹理等配合工作最终由GPU计算渲染出来的，我们可以在Scene视图中选择Wireframe模式，即可看到图片的网格顶点了，如下
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）

我们只需要想办法修改网格的顶点坐标即可达到图片倾斜的效果。
其实，我在更早之前写过另外一篇文章：【游戏开发实战】Unity UGUI制作雷达图/天赋图/属性图/能力图，因为太怕痛就全点了防御力
文中我讲了UGUI实现雷达图的原理与具体实现方法
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）老粉应该看过我这边文章，里面我讲过这么一段话：
在UGUI中，不管是RawImage、Image还是Text，它们都是继承MaskableGraphic的，而MaskableGraphic又是继承Graphic的，在Graphic中有个OnPopulateMesh方法。

protected virtual void OnPopulateMesh(VertexHelper toFill);

参数是VertexHelper，我们可以通过VertexHelper来获取顶点信息并操作顶点（修改顶点或者插入新的顶点等）。
我们可以去override这个OnPopulateMesh方法，实现我们自己想要的效果，下面我就来讲下具体操作吧~

二、继承Image，重写OnPopulateMesh方法

我们创建一个ShapeImage脚本，
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）
让它继承Image，重写OnPopulateMesh方法，

using UnityEngine.UI;

public class ShapeImage : Image
{
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        base.OnPopulateMesh(toFill);
        // TODO 顶点偏移
    }
}

一张精灵图，是由四个顶底组成的，顶点顺序是这样的，
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）

我们可以对1和2两个顶点做一个横向的坐标偏移，即可达到图像倾斜的效果，
获取顶点我们可以通过PopulateUIVertex方法来获得，例：

// 顶点索引
int index = 1;
UIVertex vertex = new UIVertex();
toFill.PopulateUIVertex(ref vertex, index);

接着我们可以对顶点坐标做一个偏移

// 偏移
float offset = 3f;
vertex.position += Vector3.right * offset;

最后重新把顶点数据塞回给VertexHelper对象，如下：

toFill.SetUIVertex(vertex, index);

完整代码如下：

using UnityEngine;
using UnityEngine.UI;

public class ShapeImage : Image
{
    // 倾斜偏移
    public float offset;

    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        base.OnPopulateMesh(toFill);

        UIVertex vertex = new UIVertex();
        toFill.PopulateUIVertex(ref vertex, 1);
        vertex.position += Vector3.right * offset;
        toFill.SetUIVertex(vertex, 1);

        vertex = new UIVertex();
        toFill.PopulateUIVertex(ref vertex, 2);
        vertex.position += Vector3.right * offset;
        toFill.SetUIVertex(vertex, 2);
    }
}

三、挂ShapeImage脚本

我们在Canvas节点下创建一个空物体，重命名为ShapeImage，如下
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）
给它挂上ShapeImage脚本，并设置Source Image成员为精灵图片资源，如下

此时我们发现在Inspector窗口中并没有显示offset参数，不像我们普通的Monobehaviour脚本那样声明了public成员对象就会自动显示到Inspector面包中，此时我们需要重写ImageEditor。

四、ShapeImageEditor编辑器脚本

我们在Editor目录中创建一个ShapeImageEditor脚本，如下
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）
代码如下

using UnityEditor;
using UnityEditor.UI;
using UnityEngine;

[CustomEditor(typeof(ShapeImage), true)]
public class ShapeImageEditor : ImageEditor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        ShapeImage image = (ShapeImage)target;
        SerializedProperty sp = serializedObject.FindProperty("offset");
        EditorGUILayout.PropertyField(sp, new GUIContent("offset 倾斜偏移"));
        serializedObject.ApplyModifiedProperties();
    }
}

此时我们就可以在Inspector窗口中看到offset参数了，
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）

五、测试

我们调节offset参数，可以看到图片实现倾斜效果啦~
【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）收工~
我是新发，https://blog.csdn.net/linxinfa
一个在小公司默默奋斗的Unity开发者，希望可以帮助更多想学Unity的人，共勉~文章来源地址https://www.toymoban.com/news/detail-441124.html

到了这里，关于【游戏开发解答】Unity中对UGUI的Image进行倾斜变形（UGUI | 精灵图 | OnPopulateMesh | 顶点偏移 | 变形）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！