Unity Shaders and Effects Cookbook (6-4) GUI 和 透明度

在游戏项目中使用透明最多的地方就是 GUI 了。这一节用一个非常简单的 GUI 例子，来熟悉控制透明物体的渲染顺序。

搭建场景，导入随书资源。

创建着色器 GUI，创建两个Material，一个 GUIBG 用于背景图片，一个 GUIGRP 用于 按钮界面。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

把创建的Material 分别赋值给 GUIBG 和 GUIGRP。

场景搭建完毕后 效果如下

因为创建的Shader 默认是 Diffuse ，所以没有透明度。

我故意把灯光调的很强，是为了设置 不接受灯光 后 对比方便。

下面进行一系列修改。

1、使用 IgnoreProjector 标签 设置不接受Projector。

ags {"IgnoreProjector"="True" "RenderType"="Opaque" }

因为没有添加Projector 组件，所以这里修改后 场景中没有什么变化。

2、修改渲染队列为 Transparent，修改RenderType 为 Transparent。

Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

声明Alpha 参数

#pragma surface surf Lambert alpha

这时候已经有透明了

3、自定义光照函数 GUI，不接受光照影响

#pragma surface surf GUI alpha

inline fixed4 LightingGUI(SurfaceOutput s,fixed3 lightDir,fixed3 viewDir,fixed atten)
{
	fixed4 c;
	c.rgb=s.Albedo;
	c.a=s.Alpha;
	return c;
}

现在已经不受光照影响了。

4、声明 novertexlights 参数，告诉Unity 这里不需要任何顶点级的光照。

#pragma surface surf GUI alpha novertexlights

添加 novertexlights 参数，可以让 Shader 更加轻便。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

5、添加 ZWrite Off 、Cull Back

ZWrite Off
Cull Back
LOD 200

完整的Shader 代码如下

Shader "CookBookShaders/Chapt6-4/GUI"
{
	Properties
	{
		_MainTex ("Base (RGB)", 2D) = "white" {}
	}

	SubShader
	{
		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

		ZWrite Off
		Cull Back
		LOD 200

		CGPROGRAM
		#pragma surface surf GUI alpha novertexlights

		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
		};

		void surf (Input IN, inout SurfaceOutput o) {
			half4 c = tex2D (_MainTex, IN.uv_MainTex);
			o.Albedo = c.rgb;
			o.Alpha = c.a;
		}

		inline fixed4 LightingGUI(SurfaceOutput s,fixed3 lightDir,fixed3 viewDir,fixed atten)
		{
			fixed4 c;
			c.rgb=s.Albedo;
			c.a=s.Alpha;
			return c;
		}

		ENDCG
	}
	FallBack "Diffuse"
}

但是还没完，为什么 PLAY GAME 和 QUIT GAME 这两个按钮，被 背景图 遮住了呢？

这是因为默认是由 摄像机的距离来决定渲染顺序的，背景图 和 按钮的 Z 都是0，判断不了哪个先，哪个后。

这种情况，可以单独给 按钮 指定 Queue ，但是这样的话要新建一个Shader，未免太麻烦了。

我们可以从 脚本中去修改 Queue ，只需要创建一个脚本，然后在编辑器中赋不同的值。

创建脚本 RenderQueue.cs 完整代码如下：

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class RenderQueue : MonoBehaviour
{

    public int queueValue = 2000;

	// Use this for initialization
	void Start () {

	}

	// Update is called once per frame
	void Update ()
    {
        Material curMaterial = transform.renderer.sharedMaterial;
        if(curMaterial)
        {
            curMaterial.renderQueue = queueValue;
        }
        else
        {
            Debug.LogError(transform.name+":  need Material to set the Render Queue");
        }
	}
}

把脚本添加到 PLAY GAME 上，效果如下

因为默认值是2000，而 背景图的Queue 是 Transparent = 3000，所以现在是先渲染了 按钮，再渲染 背景图。

由于 几个按钮是共用一个 Material 的，所以修改了 PLAY GAME ，其它两个按钮也变了。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

在编辑器中修改 Queue Value 为3050，大于 Transparent。

效果如下，已经是正确的了：

示例项目下载：

http://pan.baidu.com/s/1hrDw71U