unity小地图

素颜马尾好姑娘i 2022-03-01 21:10 248阅读 0赞

众所周知，小地图（或雷达）是用于显示周围环境信息的。首先，小地图是以主角为中心的。其次，小地图上应该用图标来代替真实的人物模型，因为小地图通常很小，玩家可能无法看清真实的模型。  
  
大多数小地图都是圆形的，所以本文也将创建圆形小地图。通常小地图周围还会有一些按钮和标签，本文也会介绍。  
  
**创建场景**  
新建场景，导入Unity Chan模型作为玩家，导入两个机器人作为敌人。  
  
**游戏视图**  
添加一个新的相机。依次点击菜单项GameObject -> Camera新建相机并命名为Minimap Camera。然后将该相机设为Unity Chan的子对象，并将其坐标设为Unity Chan上方10个单位，把相机对准Unity Chan模型。  
  
**设置Minimap Camera**  
为了达到更好的效果，将position设为(0, 10, 0)，rotation设为(90, 0, 0)。现在相机显示效果如下：

![minimap camera preview][]  
  
  
但这还不是小地图。现在运行场景，你可以看到只有上图中的内容显示出来。我们必须把小地图做成一个UI元素。  
  
**渲染到UI层**  
这里需要用到Render Texture来实现。依次点击菜单项Assets -> Create -> Render Texture新建Render Texture并命名为Minimap Render Texture。  
![minimap render texture][]  
  
选中Minimap Camera后在检视面板将Target Texture字段设为Minimap Render Texture。

![camera assign render texture minimap][]  
  
现在运行场景会发现Minimap Camera中的内容不见了，这是因为它被显示到了新建的Render Texture中。  
  
下面新建Canvas来添加UI元素。依次点击菜单项GameObject -> UI -> Canvas来新建Canvas。  
![created canvas][]  
  
这里需要使用Raw Image在Canvas中显示Render Texture的内容。依次点击菜单项GameObject -> UI -> Raw Image新建Raw Image，然后命名为Minimap Image，在检视面板中将Texture字段设为Minimap Render Texture。

![raw image render texture][]  
  
现在Minimap Camera相机中的内容可以显示作为UI来显示了！

![raw minimap unity ui][]  
  
  
下面将小地图变为圆形。这里需要用到一张简单的遮罩纹理：

![minimap masl][]  
  
  
新建Image并为其添加Mask组件，将Image的Source Image字段设为上面的遮罩图片，并将Minimap Image设为Mask的子对象。（注意：为了达到更好的视觉效果，记得禁用遮罩纹理的Mipmap）

![minimap mask configuration][]  
  
  
现在小地图显示效果如下：

![minimap masked circle][]  
  
  
小地图的白色背景看起来不太美观，给它加一个边框：  
  
![minimap border][]

![minimap with border][]  
  
  
为了让整个小地图移动起来更方便，新建一个空的GameObject命名为Minimap，并将所有对象设为Minimap子对象。

![minimap game object][]  
  
  
最后将小地图移至屏幕右上角。

![minimap top-right corner][]

效果不错吧？但这还不是真正意义上的小地图，只是相机从顶部取景的图像而已。接下来通过Layer来做一些设置！  
  
**设置Layer**  
这里需要新建一个Layer。依次点击菜单项Edit -> Project Settings -> Tags and Layers新建Layer命名为Minimap。  
  
![layers minimap][]  
然后新建三个球体。一个设为蓝色代表Unity Chan。将该球体设为Unity Chan的子对象，并将其Layer设为Minimap。

![unity chan blue sphere][]  
  
对两个机器人进行同样的操作，将球体改为红色。  
![robot red spheres][]  
  
现在最关键的一步来了！选中Main Camera并确保其Culling Mask中不包括Minimap这一层。  
![5b252849-280c-4322-9115-7e20fb71de52][]  
  
然后选中Minimap Camera让其Culling Mask只包括Minimap这一层。  
  
![minimap camera layers][]  
现在这个小地图看起来就比较完善了！  
![3b117f6d-153f-4df6-a96c-51487c410209][]  
  
**最后步骤**  
  
还可以做一些调整。首先将Minimap Camera的Clear Flags设为Solid Color并将其颜色改为浅灰色，以便让小地图背景与小球的对比度更强。  
  
![minimap camera background color][]  
  
还可以添加一些UI元素来操作小地图。这里使用标签作为示例，最后结果如下：  
![minimap final result][]  
  
当角色或机器人移动时，小地图上的小球也会即时更新位置。  
![minimap position change][]  
  
到此整个制作小地图的教程就结束了，如有任何问题，欢迎来下方评论区留言！  
  
原文链接：[http://blog.theknightsofunity.com/implementing-minimap-unity/][http_blog.theknightsofunity.com_implementing-minimap-unity]

[minimap camera preview]: /images/20220302/4149133f9d1a401c8e4dcf530a35c942.png
[minimap render texture]: /images/20220302/b16f018478804087bfa923448b007ba1.png
[camera assign render texture minimap]: /images/20220302/bc575a98f3ce442dbbdcd517546a3bee.png
[created canvas]: /images/20220302/5658f39182f743cb9133a58f49283757.png
[raw image render texture]: /images/20220302/37e7b247c0fc409b94c819a34711eb36.png
[raw minimap unity ui]: /images/20220302/579fd6bc16d04c989661695e5a290be8.png
[minimap masl]: /images/20220302/14cd8dc4356c40e190c19e7abe9b1f1e.png
[minimap mask configuration]: /images/20220302/fcf8aca1cdf54b10a60583d5c00a05d7.png
[minimap masked circle]: /images/20220302/75eb9343de8048a0af5ece2687ef397f.png
[minimap border]: /images/20220302/7a47832411ce438cab607d2a5714d5a8.png
[minimap with border]: /images/20220302/277599d4268a47339c1364225a461f5d.png
[minimap game object]: /images/20220302/535940ad378e46a086cd063912b1de42.png
[minimap top-right corner]: /images/20220302/f627677fdc1240c29c5a8c551ff09552.png
[layers minimap]: /images/20220302/6f906a8f1fb5449a9fb5760d71240dd5.png
[unity chan blue sphere]: /images/20220302/570db37689f14efcb5c3f5ae5019c969.png
[robot red spheres]: /images/20220302/9d28a7904b5c4be5b0b00f6c68968506.png
[5b252849-280c-4322-9115-7e20fb71de52]: /images/20220302/c270cb8f040a40bdbc7482514afc884f.png
[minimap camera layers]: /images/20220302/29734b733c4d4bca9af0f3bdd05f0b74.png
[3b117f6d-153f-4df6-a96c-51487c410209]: /images/20220302/de3d3b98dbbb4096b62904ff3a6080d9.png
[minimap camera background color]: /images/20220302/52a0ee6272e246e2a22a4f6564b00b4a.png
[minimap final result]: /images/20220302/61bff7b9d08b4c83a0d6c30e4daaa1a9.png
[minimap position change]: /images/20220302/58d64af2938542c19c388cc2d27a81c3.png
[http_blog.theknightsofunity.com_implementing-minimap-unity]: http://blog.theknightsofunity.com/implementing-minimap-unity/