Unity uGui RawImage 渲染小地图

制作类似 RPG 游戏时，可能会须要显示小地图。

小地图的制作一种方式是用还有一个摄像机来渲染到一张纹理上。实时显示到UI界面。

以Unity 5.0 的 UI 系统为例：

在地图正上方放置一个摄像机，设置其 Culling Mask，比方：Ground（地面）、MinimapSign（玩家怪物标识），创建一张 Render Texture，将 Target Texture 属性指向这张纹理图片。例如以下图所看到的：

创建 UI 面板。由于这里小地图打算制作成圆形，使用 Mask 组件和一张掩码图片能够达到这个效果。

如上图的 MapMask 物体加入 RawImage 指向掩码图片，加入 Mask 组件。例如以下图所看到的：

其下的 RawImage 物体即是用来绘制小地图纹理，将其 Texture 属性指向小地图纹理图片就可以，例如以下图所看到的：

执行效果例如以下图所看到的：

但是当场景中使用水效果的话，水没有绘制到小地图中，例如以下图所看到的：

可是摄像机生成的纹理，却是有绘制的，例如以下图所看到的：

那么应该是绘制到 UI 上时，出现了错误。查看 UI 所使用的默认 Shader ，发现它採用了混合 Blend SrcAlpha OneMinusSrcAlpha，那么可能是由于原图中的水部分Alpha通道为0，使得 Alpha 混合时产生透明效果。将水材质的 Horizon Color 的 Alpha 值改为 255，例如以下图所看到的：

最后效果例如以下图所看到的：

另外，使用 Mask组件虽比較方便，可是不够平滑，也能够写 Shader 来实现 Mask功能。详细内容对 UI-Default.shader 进行拷贝稍加改动。命名为 MaskShader.shader，内容例如以下：

       Shader Code 
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

Shader " UIEx/Default-Mask"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Mask ("Mask Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)

_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255

_ColorMask ("Color Mask", Float) = 15
}

SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}

Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}

Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
};

struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
half2 texcoord : TEXCOORD0;
};

fixed4 _Color;

v2f vert(appdata_t IN)
{
v2f OUT;
OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
OUT.color = IN.color * _Color;
return OUT;
}

sampler2D _MainTex;
sampler2D _Mask;

fixed4 frag(v2f IN) : SV_Target
{
half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
// clip (color.a - 0.01);
half4 color2 = tex2D(_Mask, IN.texcoord);
return fixed4(color.r, color.g, color.b, color2.r);
}
ENDCG
}
}
}

创建材质，设置为这个Shader。设置其 Mask图片，例如以下图所看到的：

设置小地图 Raw Image 组件的属性，其 Material 指向这个材质，例如以下图所看到的：

终于效果对照方下：