Unity uGui RawImage 渲染小地图

原创 2015年11月27日 09:30:04
      制作类似 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 指向这个材质,如下图所示:

最终效果对比如下:

unity3d学习笔记(十一)--NGUI结合Shader制作小地图

本系列文章由Aimar_Johnny编写,欢迎转载,转载请标明出处,谢谢。 http://blog.csdn.net/lzhq1982/article/details/12783493 ...
  • chenluwolf
  • chenluwolf
  • 2014年01月28日 18:14
  • 1145

最好用Unity 3D制作小地图,显示、隐藏小地图和背景音乐播放与暂停 [复制链接]

using UnityEngine; using System.Collections; public class jietu:MonoBehaviour {         public ...
  • hanghangaidoudou
  • hanghangaidoudou
  • 2015年01月14日 21:19
  • 1096

unity3d之小地图

今天做的小游戏,用到小地图,实现还是很简单的,但也遇到一点小问题,记录一下。...
  • feizxiang3
  • feizxiang3
  • 2014年07月02日 17:00
  • 6127

[Unity3d插件KGFMapSystem]非常不错的小地图的制作

在我们开发游戏或者虚拟现实中,一般都会用到小地图,如果要我们去写小地图,应该会花费一点时间的吧,如何加快我们的开发速度呢,其实在unity 3d中就有一个“小”插件,是专门用开开发小地图用的,这个插件...
  • s10141303
  • s10141303
  • 2014年01月22日 19:27
  • 19997

unity 通过摄像机模拟实现小地图

unity中小地图的应用很广泛,
  • dulgao
  • dulgao
  • 2014年04月30日 16:11
  • 1794

UGUI内核大探究(九)Image与RawImage

Image组件是UGUI里最常用的组件(可能没有之一),我们知道其实还有一个RawImage组件。那么二者的区别是什么呢?之前的文章UGUI内核大探究(八)MaskableGraphic中我们提到过,...
  • ecidevilin
  • ecidevilin
  • 2016年09月16日 20:56
  • 11320

【Unity】 DoTween对UI进行DoFade操作存在问题及解决办法

如何使用DoTween对UGUI组件进行褪色操作
  • RICKShaozhiheng
  • RICKShaozhiheng
  • 2015年11月06日 01:40
  • 7744

<Unity UGUI> 在Unity5 的UGUI系统上实现图片的遮罩

UGUI是Unity官方在4.6 及其后版本中推出的GUI系统, 我们项目中采用的就是这种新的GUI系统。 Unity的GUI系统出现过相当长时间的一段官方空白期, 导致现在大部分游戏公司或者开发团队...
  • u013015161
  • u013015161
  • 2015年05月26日 23:51
  • 7817

Unity uGui RawImage 渲染小地图

制作类似 RPG 游戏时,可能会需要显示小地图。小地图的制作一种方式是用另一个摄像机来渲染到一张纹理上,实时显示到UI界面。 以Unity 5.0 的 UI 系统为例: 在地图正上方放置一...
  • akof1314
  • akof1314
  • 2015年03月12日 19:49
  • 20786

Unity UGGUI RawImage 渲染小地图

转载注明出处:点击打开链接 制作类似 RPG 游戏时,可能会需要显示小地图。小地图的制作一种方式是用另一个摄像机来渲染到一张纹理上,实时显示到UI界面。 以Unity 5.0 的 UI...
  • linxinfa
  • linxinfa
  • 2016年07月19日 16:56
  • 658
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Unity uGui RawImage 渲染小地图
举报原因:
原因补充:

(最多只允许输入30个字)