关闭

Unity 精灵图集Shader渲染错乱

标签: unityuishader
2878人阅读 评论(1) 收藏 举报
分类:

原因

在使用 Unity 开发游戏过程中,UI 界面上的表现有着举足轻重的地位,优秀的表现效果可以让游戏增色不少。要让 UI 精灵图片有独特的表现效果,需要给图片加上特定的 Shader 着色器,这样一来就能让这个图片表现出独特的效果,比如:溶解、消失等等。然而,在使用中,因为精灵被打包到图集里面,运行起来的效果大相径庭,Shader 里面 uv 坐标不再是单个图片的坐标了,而是图集里面该图片的坐标,使得 Shader 计算错误,最终渲染错乱。

例子

当前测试版本:Unity 5.3.0
测试工程地址:https://github.com/akof1314/uGUISpriteInAtlasShader

正确的表现:

错误的表现:

包含该图片的图集:

图片位于图集的左下角,进行扭曲效果计算时,使用了图集的中心位置,导致出错。

解决

将单个图片的纹理坐标保存到 UV1 中,传递单个图片的纹理坐标和在图集中纹理坐标的比例关系。

纹理坐标

单个图片的纹理基本是(0,0),(0,1),(1,1),(1,0),UGUI 中图片控件只使用了 UV0,那么就可以将单个图片的纹理保存到 UV1 中。

继承BaseMeshEffect,重载ModifyMesh方法,代码如下:

using UnityEngine;
using UnityEngine.UI;

public class VertIndexAsUV1 : BaseMeshEffect
{
    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive())
            return;

        UIVertex vert = new UIVertex();
        for (int i = 0; i < vh.currentVertCount; i++)
        {
            vh.PopulateUIVertex(ref vert, i);
            vert.uv1.x = (i >> 1);
            vert.uv1.y = ((i >> 1) ^ (i & 1));
            vh.SetUIVertex(vert, i);
        }
    }
}

Shader 中加一个float2 texcoord1 : TEXCOORD1,绘制计算的时候,采用这个坐标,如下图所示:

对于简单的处理 Alpha 融合,这样就可以了。

比例关系

对于复杂的 Shader 表现,影响最终的图片绘制效果,那么还需要传递比例关系。可以直接使用 Unity 接口,获取图集里面单个图片的 UV 值,向 Shader 进行传递,代码如下所示:

Image img = GetComponent<Image>();
if (img)
{
    Vector4 uvRect = UnityEngine.Sprites.DataUtility.GetOuterUV(img.overrideSprite);
    m_Graphic.material.SetVector("_UvRect", uvRect);
}

Shader 里面通过单个图片的 UV 坐标,反推出图集里面的 UV 坐标,如下图所示:

结语

对于很多 Shader 算法,都是使用 UV 坐标去计算的,当遇到图集,那么就需要从计算的坐标,反推到真实的坐标。

Github 地址:https://github.com/akof1314/uGUISpriteInAtlasShader

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3432352次
    • 积分:35454
    • 等级:
    • 排名:第137名
    • 原创:399篇
    • 转载:88篇
    • 译文:5篇
    • 评论:3417条
    个人说明
    联系方式:
    文章存档
    最新评论