NGUI的UISprite动态染色的一种解决方案

最新推荐文章于 2025-11-05 10:49:28 发布

原创

最新推荐文章于 2025-11-05 10:49:28 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#游戏开发 #U3D #UI #NGUI #染色

游戏UI开发中，动态染色是一个常见需求。本文介绍了一种通过更换染色材质，结合Unity3D（U3D）和NGUI实现动态颜色切换的方法，避免资源浪费并提高维护性。详细讲解了流程、示例代码、染色及灰化Shader的实现，强调了资源划分的注意事项，以解决可能出现的纹理错乱问题。

游戏的UI开发中经常会遇到染色问题。例如按钮失效变灰的效果，同一个道具通过策划表配的颜色值染上红绿蓝紫等颜色，效果如下

最笨最挫的方法当然是让美术多出几个资源图，这样的一个缺点是浪费资源，在手游上资源的大小显得尤为重要。而且不好维护和复用，修改一个资源需要同时修改其他颜色的多个同类资源。一种比较好的解决方案是通过更换渲染的材质，用染色材质代替原来的材质，然后把原来材质的主纹理和透明纹理赋值给新的材质。这样就可以实现用程序动态切换颜色，而且只需要一个基础资源，节省资源大小，容易维护。

下面给出这个解决方案的流程图，如下图所示

下面写一个例子，通过按r键，g键，b键，y键来动态切换染红色，染绿色，染蓝色，灰化效果。项目的GameObject图如下

染色普通颜色的材质对应的shader如下

Shader "Winter/ChangeColor" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Color ("Main Color", Color) = (1,1,1,1)
		
	}
	SubShader {
		Tags { "Queue" = "Transparent+10" }
		LOD 200
		 Pass
		 {
		 ZWrite On
		 ZTest Off


			Blend SrcAlpha OneMinusSrcAlpha
			Lighting Off
			//Cull Off
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			s