龙图教育：Unity精灵图集Shader渲染错乱解决办法

Unity精灵图集Shader渲染错乱解决办法原因在使用Unity开发游戏过程中，UI界面上的表现有着举足轻重的地位，优秀的表现效果可以让游戏增色不少。要让UI精灵图片有独特的表现效果，需要给图片加上特定的Shader着色器，这样一来就能让这个图片表现出独特的效果，比如：溶解、消失等等。然而，在使用中，因为精灵被打包到图集里面，运行起来的效果大相径庭，Shader里面uv坐标不再是单个图片的坐标了，而是图集里面该图片的坐标，使得Shader计算错误，最终渲染错乱。例子当前测试版本：Unity5.3.0测试工程地址：正确的表现：错误的表现：包含该图片的图集：图片位于图集的左下角，进行扭曲效果计算时，使用了图集的中心位置，导致出错。解决将单个图片的纹理坐标保存到UV1中，传递单个图片的纹理坐标和在图集中纹理坐标的比例关系。纹理坐标单个图片的纹理基本是(0,0),(0,1),(1,1),(1,0)，UGUI中图片控件只使用了UV0，那么就可以将单个图片的纹理保存到UV1中。继承BaseMeshEffect，重载ModifyMesh方法，代码如下：?0102030405usingUnityEngine;usingUnityEngine.UI;publicclassVertIndexAsUV1:BaseMeshEffect{0607080910111213141516171819publicoverridevoidModifyMesh(VertexHelpervh){if(!IsActive())return;UIVertexvert=newUIVertex();for(inti=0;ivh.currentVertCount;i++){vh.PopulateUIVertex(refvert,i);vert.uv1.x=(i1);vert.uv1.y=((i1)^(i&1));vh.SetUIVertex(vert,i);}}}Shader中加一个float2texcoord1:TEXCOORD1，绘制计算的时候，采用这个坐标，如下图所示：对于简单的处理Alpha融合，这样就可以了。比例关系对于复杂的Shader表现，影响最终的图片绘制效果，那么还需要传递比例关系。可以直接使用Unity接口，获取图集里面单个图片的UV值，向Shader进行传递，代码如下所示：?12345Imageimg=GetComponentImage();if(img){Vector4uvRect=UnityEngine.Sprites.DataUtility.GetOuterUV(img.overrideSprite);m_Graphic.material.SetVector(_UvRect,uvRect);}Shader里面通过单个图片的UV坐标，反推出图集里面的UV坐标，如下图所示：结语对于很多Shader算法，都是使用UV坐标去计算的，当遇到图集，那么就需要从计算的坐标，反推到真实的坐标。Github地址：学游戏，请关注龙图教育：