Unity uGui RawImage 渲染小地图

Posted gccbuaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 
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 指向这个材质,例如以下图所看到的:
技术分享
终于效果对照方下:
技术分享










































































































以上是关于Unity uGui RawImage 渲染小地图的主要内容,如果未能解决你的问题,请参考以下文章

UGUI源码解析——RawImage

UGUI源码解析——RawImage

Unity3d中UGUI组件精简复盘RawImage组件

Unity3D-UGUI系列RawImage 显示纹理组件详解

超简单利用UGUI制作圆形小地图

[Unity3D]UGUI相关知识