记一次Sprite Renderer使用精灵图集导致的问题

问题背景

这段时间突然发现模拟器或真机里游戏里的血条不会刷新了,而编辑器环境下无法复现。

查找问题

游戏里的血条是使用Sprite Renderer进行渲染的,通过修改材质球的变量_FillAmout(取值范围0~1)实现0到100%的填充效果。

排除了逻辑上的原因后,想起来了前段时间对项目里的资源进行了整理,当时把一个包含若干血条图片的文件夹归档到打包为精灵图集。


image.png

会不会是精灵图集导致的呢?将此修改回滚,问题解决了。

原因探究

为什么打包成精灵图集后,血条填充就不符合预期了呢?先来看看shader代码:

fixed4 Frag(v2f IN) : SV_Target
{
    fixed4 col = SampleSpriteTexture (IN.texcoord) * IN.color;
    //计算fill
    float uvValue = lerp(IN.texcoord.x, IN.texcoord.y, sign(saturate(_FillType)));
    float fValue1 = lerp(uvValue, _FillAmount, sign(saturate(_FillFlip)));
    float fValue2 = lerp(_FillAmount, uvValue, sign(saturate(_FillFlip)));
    col.a *= step(fValue1, fValue2);
    //end
    col.rgb *= col.a;
    return col;
}

由于_FillType为0(水平填充),可见shader中使用IN.textcoord.x来计算填充效果,其范围为[0, 1]

来看看打包后的图集:

image.png

打包后的图集为12864,肉眼可见单个血条精灵的宽度是小于图集宽度的。单个血条图片的尺寸实际为7212:
image.png

由此可见单个血条精灵的实际UV范围应该是72/128=0.5625。也就是说,如果血条图片打成了图集,那么此时血量在56%左右时,视觉效果上就是100%的血量。测试结果证实了这一点。

如何解决

方法一:不要打成图集就是,确保单张血条的实际UV就是[0, 1]
方法二:如果打成图集,那就需要在材质球上设置单张精灵实际的UV范围。这一点可以在打包图集的时候通过脚本自动更新设置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容