原本只是想用Unity自带的GUI功能实现魔兽世界的小地图效果，结果折腾了一个晚上。

原来的思路如下：


  • 根据玩家坐标，计算出应显示的地图缩略图部分（128×128）；
  • 用GUI遮罩将非白色的部分剔除（这样可以实现任意形状的小地图）；
  • 将地图框叠加到第二步中的纹理上；
  • 将玩家指示物放置在地图中心，并根据当前玩家的Transform.Rotation计算出指示物的旋转角度；

 


在做到一半的时候发现GUI Texture只能使用Texture，无法使用Material，这也就意味着不能使用Shader做遮罩的剔除效果。在网上搜索了好久，发现有好多老外也在问相关的问题，但是就是没有很合适的解决方案。经过再三考虑之后，咬咬牙决定舍弃系统自带的GUI功能，使用第三方GUI插件。



其实之前也有了解过相关的插件，比如NGUI、EZGUI和IGUI之类的，只不过感觉如果太依赖第三方插件则会导致“知其然而不知其所以然”，所以也一直没去学习使用。工欲善其事必先利其器，既然已经决定要使用第三方插件了，那么选择一个趁手的当然是首要问题。



通过比较最终选择了NGUI，主要参考了这篇

《为你的Unity3D项目选择GUI框架 – EZGUI VS NGUI》

。NGUI的全称是Next – Gen UI（次世代界面），它提供了快速创建常用的2D控件的功能，如按钮、文本框、滚动条等，继承Unity所见即所得的优良传统，并实现了Draw Call的合并，以优化性能。


。下载解压之后会得到一个NGUI203d.unitypackage的文件，双击就可以像导入自带资源包一样把NGUI导入到当前项目中。如果文件关联失效了，也可以通过主菜单的”Assets→Import Package→Custom Package…“手动导入。



最终在Unity的工程面板中就可以得到一个NGUI目录，里边包括了所有的资源，还有一些范例场景(在Examples/Scenes下面)。其相关的中文教程也并不少，有很多达人都共享了他们宝贵的经验，我这里就不再赘述基础知识点了，多问问度娘一定会让你收获颇丰。



导入NGUI后会在主菜单中新增NGUI功能选项，方便快速调用它的功能。首先点击主菜单的“NGUI→Create a New UI”创建一个UI根对象。由于地图这些都是2D的，所以保持默认的设置创建Simple 2D Camera即可。




点击“Create Your UI”完成，在工程面板中就出现了UI Root(2D)，其下面的所有UI对象都会按照指定的布局渲染到屏幕上，重命名为MiniMapView。Anchor（锚点）是用来定位的，保持默认的Center（居中）。



点击NGUI的“Atlas Maker”来创建一个图片集，输入名字MiniMap，选中工程面板中的地图缩略图，然后点击Create就可以了。




选中Panel，然后再选择使用NGUI菜单的“Create a Widget”在面板下面创建一个精灵。




到这里准备工作全部做好了：




可以看到NGUI其实只是在一个主相机视野看不到的地方创建需要显示的GUI，然后用另外一个正交投影相机将观察到的内容叠加到主相机上但是做小地图的时候并不希望它直接渲染到屏幕上，而是渲染到一张纹理上，这样才可以使用材质配合遮罩的Shader实现不规则的效果。所以还是先得在工程面板中创建一个Render Texture，重命名为MiniMap，并拖放到Camera的Target Texture属性上。这样，所有该摄像机可见的物体都会渲染到MiniMap这张Render Texture中了。



注意还必须把摄像机的清除标志（Clear Flags）改成纯色（Solid Color），并把Background换成黑色。这样可以让地图超出的部分显示为纯黑色。



然后轮到Mask Shader出场咯。把度娘全身都搜了个遍，终于在茫茫人海中找到了它。在工程面板里创建一个Shader，重命名为TransparentMast，把以下代码复制进去： 

1.  Shader "Transparent/Mask"
2.  {
3.     Properties
4.     {
5.        _MainTex ("Base (RGB)", 2D) = "white" {}
6.        _Mask ("Culling Mask", 2D) = "white" {}
7.        _Cutoff ("Alpha cutoff", Range (0,1)) = 0
8.     }
9.     SubShader
10.     {
11.        Tags {"Queue"="Transparent"}
12.        Lighting Off
13.        ZWrite Off
14.        Blend SrcAlpha OneMinusSrcAlpha
15.        AlphaTest GEqual [_Cutoff]
16.        Pass
17.        {
18.           SetTexture [_Mask] {combine texture}
19.           SetTexture [_MainTex] {combine texture, previous}
20.        }
21.     }
22.  }


再在工程面板中创建一个材质，使用这个Shader，并把前面的Render Texture拖到Base(RGB)上，把遮罩纹理拖到Culling Mask上。这样，最难的问题就解决了。此时只要把这个材质附加到任何支持材质的对象上，都能显示小地图了^_^。比如随便创建一个平面，把材质附加到Mesh Renderer组件的Materials上：




啊，看起来离最终目标还是有点距离……不过已经可以看出圆形以外的纹理都变透明了。



接下来的工作就是慢慢把GUI部分搭建起来。



再创建一个UI Root，这次是用来真正显示GUI了。由于GUI是默认定位在左上角的，因此可以删掉原来的Anchor。再创建一个Panel，重命名为HudPanel。这个面板用来做整体缩放，因为界面上不一定只有小地图，还有之前做的头像、动作条之类的，如果需要批量缩放，那么只要调整这个面板的Scale就好了。



在HudPanel下面创建一个锚点Anchor – RightTop，把Side修改为TopRight，让它对齐到右上角。再在其下面创建一个Panel，叫做MiniMap，然后在下面分别创建地图边框（Sprite）、地图指北标志（Sprite）、人物指示标志（Sprite）、地图纹理（UITexture），调整XY轴坐标定位，调整Depth可以更改显示优先级，记得要把前面创建的MiniMap材质赋给地图纹理。我这里还多创建了一个Label，用来显示当前地图位置，但是会遇到一个字体的问题，这个待会再写。



 




好了，玩家指针已经定位在地图的（0,0）点位置，再写一个脚本附加到MiniMap上，让它能够实时地反映玩家的当前位置和朝向。 


1.  void Update()
2.  {
3.  const float miniMapScaleRatio = 800 / 2000f;
4.  MiniMapArrow.rotation = Quaternion.Euler(0, 0, -mPlayerTransform.rotation.eulerAngles.y);
5.  MiniMapPanel.localPosition = new Vector3()
6.  {
7.  x = -mPlayerTransform.position.x * miniMapScaleRatio,
8.  y = -mPlayerTransform.position.z * miniMapScaleRatio,
9.  z = 0,
10.  };
11.  }