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 指向这个材质，如下图所示：



最终效果对比如下：