一、前言

小地图功能在很多游戏中都有,特别是RPG游戏,在Unity中如何实现小地图功能呢,我来教你。

二、思路

专门创建一个顶视角的摄像机,然后摄像机有个Target Texture属性,可以将渲染的图形输出到Render Texture中,我们使用UGUIRaw Image来显示这张Render Texture即可。

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色

三、GitHub工程

本文的Demo工程我已上传到GitHub,感兴趣的同学可以自行下载进行学习。注:我用的Unity版本是:Unity 2020.1.2f1c1 (64-bit)。GitHub工程地址:https://github.com/linxinfa/Unity-Minimap

unity 如何优化rendertexture unity rendertarget_unity角色移动代码_02

四、具体步骤

1、创建一个顶视角摄像机



unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_03

2、创建Render Texture

创建Render Texture

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_04

Render Texture赋值给顶视角摄像机的Target Texture

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_05

3、使用Raw Image显示

创建一个RawImage

unity 如何优化rendertexture unity rendertarget_赋值_06

RenderTexture赋值给RawImageTexture属性

unity 如何优化rendertexture unity rendertarget_unity角色移动代码_07

四、运行效果

运行Unity效果如下

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_08

五、优化

1、Mask蒙版边缘锯齿问题

上面小地图通过了Mask组件实现了圆形蒙版的效果。有一个小小的缺点,就是圆形边缘有锯齿。放大看一看就可以看到

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_09

2、解决方案

首先我们的蒙版图片如下,是一个白色的圆,周围是透明的。我们知道颜色值的表示是:(r, g, b, a),白色就是(1, 1, 1, 1),透明部分的颜色为(0, 0, 0, 0)

unity 如何优化rendertexture unity rendertarget_Mask_10

摄像机渲染出来的小地图RenderTexture如下。如果我们取某个像素点的颜色看,它可能是这样子的(0.31, 0.15, 0.7, 1)

unity 如何优化rendertexture unity rendertarget_Image_11

想要让小地图以蒙版图的形状显示,我们只需取蒙版图的alpha通道作为小地图的alpha通道即可。对应成shader代码就是

fixed4 frag(v2f IN) : SV_Target{

现在我们只自定义一个shader(完整shader代码见下文),赋值给一个材质球,然后把材质球赋值给小地图RawImageMaterial即可

unity 如何优化rendertexture unity rendertarget_unity角色移动代码_12

我们放大效果对比看看,左边是UGUIMask效果,右边是我们通过shader实现的Mask效果,可以看到锯齿基本没有了,平滑了很多。

unity 如何优化rendertexture unity rendertarget_unity透明通道加颜色_09

 

unity 如何优化rendertexture unity rendertarget_Mask_14

六、加个主角和摄像机跟随逻辑

主角,我就用一个正方体Cube替代了,加上WASD控制移动逻辑,然后主摄像机和顶视角摄像机跟随逻辑,再对比展示两种方式实现的小地图效果,最终效果如下,详细代码见下文或直接下载我的Demo工程学习

unity 如何优化rendertexture unity rendertarget_Image_15

七、代码部分

1、shader脚本:Default-Mask.shader
" UIEx/Default-Mask"
2、主角移动控制脚本:PlayerCtrler.cs
//PlayerCtrler.cs
3、主摄像机跟随脚本:PlayerCameraFollow.cs
//PlayerCameraFollow.cs
4、顶视角摄像机跟随脚本:MiniMapCameraFollow.cs
//MiniMapCameraFollow.cs