NGUI的流光shader解决方案（二）（支持UITexture和使用图集的UISprite）

最新推荐文章于 2021-08-02 21:34:58 发布

原创

最新推荐文章于 2021-08-02 21:34:58 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ngui #Unity #流光 #Shader #UISprite

本文介绍了如何为Unity的NGUI中的UISprite添加流光效果，通过自定义Shader解决图集纹理的问题。文章提供Shader代码、自定义材质的方法以及控制脚本的编写步骤，使得每个UISprite可以独立使用流光效果，同时提到了可能影响图片清晰度和增加DrawCall的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上文实现了UITexture的流光效果，但是有时候我们希望使用图集的UISprite也能有流光效果，那怎么办呢。一种做法是将图片独立出来，使用UITexture，结合上文的方法，这里我们来看看直接操作UISprite该怎么做。
需要注意的是，本文有些使用到的原理在上文已经解释过了，就不再赘述。建议大家还是先看前一篇。

先写Shader

流光Shader的原理都是差不多的，这里的关键问题在于：UV坐标，因为纹理是图集这张大图，uv坐标怎么对应到流光纹理上呢，这个其实是个简单的数学问题，看下图就明白了：
这里写图片描述
这是一个Atlas，A点代表Sprite的左下角，B点是右上角，整个坐标系表示的是uv坐标，问题就转化为：已知C点相对于大图的uv坐标，求C点相对于Sprite小图的uv坐标。

A点坐标 = ( spriteOffsetX/atlasWidth, spriteOffsetY/atlasHeight )
B点坐标 = ( (spriteOffsetX+spriteWidth)/atlasWidth, (spriteOffsetY+spriteHeight)/atlasHeight )
C点相对于大图的uv坐标 = ( cUvX, cUvY )
那么C点相对于小图的uv坐标 = ( x, y )

x = (cUvX - A.x)/(B.x - A.x)
x = (cUvx - spriteOffsetX/atlasWidth) / (spriteWidth/atlasWidth)
y同理

那么我们的Shader代码就出来了，同样在默