我学院︰UnityNGUI制作小地图的方法.docxVIP

学游戏就上我学院 Unity3D|Cocos|php|HTML5|Java|ios|Android|C#|AS3|UI设计|原画设计|动漫美术|游戏策划 Unity NGUI制作小地图的方法 原本只是想用unity自带的GUI功能实现魔兽世界的小地图效果。原来的思路如下： 1.?根据玩家坐标，计算出应显示的地图缩略图部分（128×128）； 2.?用GUI遮罩将非白色的部分剔除（这样可以实现任意形状的小地图）； 3.?将地图框叠加到第二步中的纹理上； 4.?将玩家指示物放置在地图中心，并根据当前玩家的Transform.Rotation计算出指示物的旋转角度； 在做到一半的时候发现GUI Texture只能使用Texture，无法使用Material，这也就意味着不能使用Shader做遮罩的剔除效果。在网上搜索了好久，发现有好多老外也在问相关的问题，但是就是没有很合适的解决方案。经过再三考虑之后，咬咬牙决定舍弃系统自带的GUI功能，使用第三方GUI插件。 其实之前也有了解过相关的插件，比如NGUI、EZGUI和IGUI之类的，只不过感觉如果太依赖第三方插件则会导致“知其然而不知其所以然”，所以也一直没去学习使用。工欲善其事必先利其器，既然已经决定要使用第三方插件了，那么选择一个趁手的当然是首要问题。通过比较最终选择了NGUI，NGUI的全称是Next – Gen UI（次世代界面），它提供了快速创建常用的2D控件的功能，如按钮、文本框、滚动条等，继承Unity所见即所得的优良传统，并实现了Draw Call的合并，以优化性能。 目前最新版本NGUI是2.6.3，传送门在此。下载解压之后会得到一个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实现不规则的效果。所以还是先得在工程面板中创建一个RenderTexture，重命名为MiniMap，并拖放到Camera的Target Texture属性上。这样，所有该摄像机可见的物体都会渲染到MiniMap这张Render Texture中了。 注意还必须把摄像机的清除标志（ClearFlags）改成纯色（Solid Color），并把Background换成黑色。这样可以让地图超出的部分显示为纯黑色。 然后轮到Mask Shader出场咯。把度娘全身都搜了个遍，终于在茫茫人海中找到了它。在工程面板里创建一个Shader，重命名为Mast，把以下代码复制进去： Shader Transparent/Mask ?? { ?? ? ?Properties ?? ? ?{ ?? ? ?? ?_MainTex??(Base (RGB), 2D) = white {} ?? ? ?? ?_Mask??(Culling Mask, 2D) = white {} ?? ? ?? ?_Cutoff??(Alpha cutoff, Range (0,1)) = 0 ?? ? ?} ?? ? ?SubShader ?? ? ?{ ?? ? ?? ?Tags {Queue=Transparent} ??