本文最終效果

一、前言

嗨，大家好，我是新發(fā)。
前同事問(wèn)了我一個(gè)問(wèn)題，如何將UGUI的Image進(jìn)行變形，變成斜斜的，

最直接的就是出圖的時(shí)候直接就畫(huà)成斜的，我們不討論這種情況，這里我們單純的從技術(shù)實(shí)現(xiàn)上去思考能不能在Unity中通過(guò)UGUI的Image對(duì)圖片進(jìn)行傾斜變形。
之前我寫(xiě)過(guò)一篇文章 【游戲開(kāi)發(fā)進(jìn)階】Unity網(wǎng)格探險(xiǎn)之旅（Mesh | 動(dòng)態(tài)合批 | 骨骼動(dòng)畫(huà) | 蒙皮 ）

文中我講過(guò)一句話(huà)：

我們?cè)?code>Unity場(chǎng)景中，所有能被渲染出來(lái)的物體都會(huì)帶有網(wǎng)格，比如3D模型、粒子特效、UI、文字等等

我們的UGUI對(duì)象，也是由網(wǎng)格頂點(diǎn)、材質(zhì)、紋理等配合工作最終由GPU計(jì)算渲染出來(lái)的，我們可以在Scene視圖中選擇Wireframe模式，即可看到圖片的網(wǎng)格頂點(diǎn)了，如下

我們只需要想辦法修改網(wǎng)格的頂點(diǎn)坐標(biāo)即可達(dá)到圖片傾斜的效果。
其實(shí)，我在更早之前寫(xiě)過(guò)另外一篇文章：【游戲開(kāi)發(fā)實(shí)戰(zhàn)】Unity UGUI制作雷達(dá)圖/天賦圖/屬性圖/能力圖，因?yàn)樘峦淳腿c(diǎn)了防御力
文中我講了UGUI實(shí)現(xiàn)雷達(dá)圖的原理與具體實(shí)現(xiàn)方法
老粉應(yīng)該看過(guò)我這邊文章，里面我講過(guò)這么一段話(huà)：
在UGUI中，不管是RawImage、Image還是Text，它們都是繼承MaskableGraphic的，而MaskableGraphic又是繼承Graphic的，在Graphic中有個(gè)OnPopulateMesh方法。

protected virtual void OnPopulateMesh(VertexHelper toFill);

參數(shù)是VertexHelper，我們可以通過(guò)VertexHelper來(lái)獲取頂點(diǎn)信息并操作頂點(diǎn)（修改頂點(diǎn)或者插入新的頂點(diǎn)等）。
我們可以去override這個(gè)OnPopulateMesh方法，實(shí)現(xiàn)我們自己想要的效果，下面我就來(lái)講下具體操作吧~

二、繼承Image，重寫(xiě)OnPopulateMesh方法

我們創(chuàng)建一個(gè)ShapeImage腳本，

讓它繼承Image，重寫(xiě)OnPopulateMesh方法，

using UnityEngine.UI;

public class ShapeImage : Image
{
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        base.OnPopulateMesh(toFill);
        // TODO 頂點(diǎn)偏移
    }
}

一張精靈圖，是由四個(gè)頂?shù)捉M成的，頂點(diǎn)順序是這樣的，

我們可以對(duì)1和2兩個(gè)頂點(diǎn)做一個(gè)橫向的坐標(biāo)偏移，即可達(dá)到圖像傾斜的效果，
獲取頂點(diǎn)我們可以通過(guò)PopulateUIVertex方法來(lái)獲得，例：

// 頂點(diǎn)索引
int index = 1;
UIVertex vertex = new UIVertex();
toFill.PopulateUIVertex(ref vertex, index);

接著我們可以對(duì)頂點(diǎn)坐標(biāo)做一個(gè)偏移

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

最后重新把頂點(diǎn)數(shù)據(jù)塞回給VertexHelper對(duì)象，如下：

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腳本

我們?cè)?code>Canvas節(jié)點(diǎn)下創(chuàng)建一個(gè)空物體，重命名為ShapeImage，如下

給它掛上ShapeImage腳本，并設(shè)置Source Image成員為精靈圖片資源，如下

此時(shí)我們發(fā)現(xiàn)在Inspector窗口中并沒(méi)有顯示offset參數(shù)，不像我們普通的Monobehaviour腳本那樣聲明了public成員對(duì)象就會(huì)自動(dòng)顯示到Inspector面包中，此時(shí)我們需要重寫(xiě)ImageEditor。

四、ShapeImageEditor編輯器腳本

我們?cè)?code>Editor目錄中創(chuàng)建一個(gè)ShapeImageEditor腳本，如下

代碼如下

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();
    }
}

此時(shí)我們就可以在Inspector窗口中看到offset參數(shù)了，

五、測(cè)試

我們調(diào)節(jié)offset參數(shù)，可以看到圖片實(shí)現(xiàn)傾斜效果啦~
收工~
我是新發(fā)，https://blog.csdn.net/linxinfa
一個(gè)在小公司默默奮斗的Unity開(kāi)發(fā)者，希望可以幫助更多想學(xué)Unity的人，共勉~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-441124.html

到了這里，關(guān)于【游戲開(kāi)發(fā)解答】Unity中對(duì)UGUI的Image進(jìn)行傾斜變形（UGUI | 精靈圖 | OnPopulateMesh | 頂點(diǎn)偏移 | 變形）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！