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 指向这个材质,例如以下图所看到的:

终于效果对照方下:

时间: 2024-12-16 06:07:13

Unity uGui RawImage 渲染小地图的相关文章

Unity UGUI —— 无限循环List

还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是绝对少不了底层组件的支持的.我个人认为UI组件中相对比较复杂的就是List了,所以,这两天实现了一个UGUI的list,写了好几个版本,最终这个版本是相对比较好用的,在这我介绍一下大概思路,一是巩固一下知识做个记录,二是发扬一下分享精神.嘿嘿,大家多多赐教. 写List有两个重点是需要考虑的: 1.

[Unity Shader笔记]渲染路径--Forward渲染路径

[Unity Shader笔记]渲染路径--Forward渲染路径 (2014-04-22 20:08:25) 转载▼ 标签: shader unity renderingpath forward 游戏 分类: UnityShader *ForwardBase.ForwardAdd的LightMode只能运行在Came为Forward.DeferredLighting的渲染模式下 *ForwardAdd这个Pass需要和ForwardBase一起使用,否则会被Unity忽视掉 * Forward

Unity KGFMapSystem插件制作小地图

KGFMapSystem版本:2.3 在我们开发游戏或者虚拟现实中,一般都会用到小地图,如果要我们去写小地图,可以用到unity 3d中就有一个插件,是专门开发小地图用的,这个插件就是KGFMapSystem.这个是它的官网:http://www.kolmich.at/documentation/ 还有一个介绍用KGFMapSystem制作小地图的台湾网站,内容比较详细:http://www.cg.com.tw/KGFMapSystem/Content/KGFMapSystem_001.asp

【Unity灯光与渲染技术】Global Illumination全局光照

本系列主要参考Unity灯光与渲染技术教程Unity Lighting And Rendering,同时会加上一点个人实践过程和理解. ========================================== 分割线 ========================================== 这篇文章主要讲全局光照,在看教程的时候就有一个点不是很理解,就是作者开启物体的static这个选项.在网上查找一些资料,有的说"static表示物体时静态的,多用于静止不动的物体,此外

Unity酱~ 卡通渲染技术分析(二)

前面的话 上一篇Unity酱~ 卡通渲染技术分析(一) 写了CharaMain.cginc,服装的渲染是怎么实现的.这篇来分析一下头发跟皮肤的实现 头发 本来以为unitychan的头发会有各向异性的实现,没想到她也是用的CharaMain.cginc实现的.我们来看看头发的材质 其他实现都一样,也是通过高光反射贴图来控制高光区域跟反射区域 计算法线跟视角向量的点积,这样的效果是越垂直于视角向量的高光越大,然后用RGB贴图来控制哪些区域更容易出高光 反射依然是用A通道来控制,越白的地方,反射的越

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

http://sanwen.net/a/ithhtbo.html 由于UI都是Achor自己用PS做的,比较粗糙,大家见谅,不过丝毫不影响功能的实现,下面我们看看今天的笔记: 首先我们看看需要哪些组件: 1.在Canvas画布下新建一个GameObject,改名为Mask,顾名思义,该组件实现遮罩功能. 2.在Mask下面添加RawImage,用来实现小地图动态显示. 3.新建一个Sprite作为角色的子对象,改名为Icon,实现小地图中代替角色的箭头图标.(贴图大家根据自己喜好来画,这里Ach

Unity UGUI Canvas 使用Slider制作角色血条

最近课程实训选修Unity,讲解的是Unity官方案例--SpaceShoot,培训无聊,便想着给游戏角色制作一下血条,以此增加游戏的可玩性. Unity版本:5.4.1 案例模版:太空射击 原文作者:茄阁云云 原文连接:http://www.cnblogs.com/vmoor2016/p/6044941.html 把一个大象装进冰箱里需要三步:①把冰箱门打开:②把大象塞冰箱里:③关上冰箱门. 那么制作一个角色的血条需要几部呢?在这里也划分为三步:①制作血条:②摆放血条:③操作血条. 下面就来给

unity, 替换shader渲染(Rendering with Replaced Shaders)

实现特效,尤其是一些后处理特效,经常需要将各物体的shader替换为另一套shader进行渲染到纹理,再后再进行合成或以某种叠加方式叠加到最后的画面上去. 再复杂一点儿的,可能不同的物体所用的替换shader还不一样. unity中Camera.RenderWithShader可实现这个功能. 下面是官方文档原话: Rendering with Replaced Shaders Some rendering effects require rendering a scene with a dif

Unity AR多线程渲染不支持导致问题

Unity MultiThreadRendering Error Android平台: VOIDAR以及TANGO AR  均不支持多线程渲染: 导致画面卡顿 黑屏蓝屏