Unity UGUI RawImage 渲染小地图-白红宇的个人博客

Unity UGUI RawImage 渲染小地图

发布日期：2021-06-30 19:38:49 浏览次数：2 分类：技术文章

本文共 2734 字，大约阅读时间需要 9 分钟。

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

最终效果对比如下：

转载地址：https://linxinfa.blog.csdn.net/article/details/51957414 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：unity 类的序列化

下一篇：UGUI如何在UI与UI直接穿插粒子特效和模型

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章