[游戏开发]【Shader】图集UV错乱问题

问题发生原因：

图片uv本身是[0,1]的，但是到了图集里，就肯定不是[0,1] 除非图集只有一个图片 而且图片覆盖整个图集区域，即图片大小=图集大小。

解决思路：

假设图集图片的uv变为[x,y]，那么推导回[0,1]范围的，就需要知道图集图片的uv宽度和高度.

uv宽度=uvMaxX - uvMinX

uv高度=uvMaxY - uvMinY

我们如何获取到图集图片的uvMaxX、uvMinX、uvMaxY、uvMinY呢？有一个API可以获取。

Vector4 outUV = DataUtility.GetOuterUV(image.sprite);

可注意到传入的是一个图集图片Sprite对象，返回了一个Vector4(uvMinX, uvMinY, uvMaxX, uvMaxY)

求出uv宽度和uv高度之后，就是简单地将图集图片uv[x,y]映射回[0,1]

x' = (x - uvMinX) / uv宽度, y' = (y - uvMinY) / uv高度

[x', y'] 在[0,1]范围内，这样我们就恢复了UV在[0,1] 就可以正常地像没有在图集里使用图片去做UV动画 或 做UV的一些处理了，等处理完成后，在使用UV采样图片Texture前，需要将UV恢复回去！

恢复操作即利用[x',y']反推出[x,y]

x = uvMinX + uv宽度 * x', y = uvMinY + uv高度 * y'

代码：

inline float2 NormalizeAtlasSpriteUV(float2 uv)
{
	float width = atlasSpriteRectUV.z - atlasSpriteRectUV.x;
	float height = atlasSpriteRectUV.w - atlasSpriteRectUV.y;
	return float2((uv.x - atlasSpriteRectUV.x) / width, (uv.y - atlasSpriteRectUV.y) / height);
}

inline float2 ReverseNormalizeAtlasSpriteUV(float2 uv)
{
	float2 r = uv;
	r.x = atlasSpriteRectUV.x + (atlasSpriteRectUV.z - atlasSpriteRectUV.x) * r.x;
	r.y = atlasSpriteRectUV.y + (atlasSpriteRectUV.w - atlasSpriteRectUV.y) * r.y;
	return r;
}

其中，atlasSpriteRectUV是DataUtility.GetOuterUV获取的outUV（Vector4)。上述2个方法不难看出第一个是转[0,1] 将图集图片uv映射回[0,1]范围，等使用uv参与的运算结束后，使用第二个方法reverse回图集图片uv范围，然后再去使用这个图集图片uv采样图片。传入的float2 uv就是图片UV

上述outUV是获取UGUI Image图片的，SpriteRenderer的Sprite也是同理。

参考：Unity 精灵图集Shader渲染错乱_无幻-CSDN博客