关闭

WOW制作小地图

719人阅读 评论(0) 收藏 举报




。。。。。。。。。。。。。。。。。




原本只是想用unity自带的GUI功能实现魔兽世界的小地图效果,结果折腾了一个晚上。
原来的思路如下:

  • 根据玩家坐标,计算出应显示的地图缩略图部分(128×128);
  • 用GUI遮罩将非白色的部分剔除(这样可以实现任意形状的小地图);
  • 将地图框叠加到第二步中的纹理上;
  • 将玩家指示物放置在地图中心,并根据当前玩家的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实现不规则的效果。所以还是先得在工程面板中创建一个Render Texture,重命名为MiniMap,并拖放到Camera的Target Texture属性上。这样,所有该摄像机可见的物体都会渲染到MiniMap这张Render Texture中了。


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


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


[C#] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
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"}
      Lighting Off
      ZWrite Off
      Blend SrcAlpha OneMinusSrcAlpha
      AlphaTest GEqual [_Cutoff]
      Pass
      {
         SetTexture [_Mask] {combine texture}
         SetTexture [_MainTex] {combine texture, previous}
      }
   }
}


再在工程面板中创建一个材质,使用这个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上,让它能够实时地反映玩家的当前位置和朝向。


[C#] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
void Update()
{
        const float miniMapScaleRatio = 800 / 2000f;
    MiniMapArrow.rotation = Quaternion.Euler(0, 0, -mPlayerTransform.rotation.eulerAngles.y);
        MiniMapPanel.localPosition = new Vector3()
                                        {
                                                x = -mPlayerTransform.position.x * miniMapScaleRatio,
                                                y = -mPlayerTransform.position.z * miniMapScaleRatio,
                                                z = 0,
                                 };
}



看起来还不错:)


8.jpg (68.03 KB, 下载次数: 3)

下载附件  保存到相册

2013-6-30 12:47 上传


0
0
查看评论

Unity3d-游戏中的小地图制作

方法一:(利用NGJ )
  • wuming22222
  • wuming22222
  • 2014-07-07 18:45
  • 5229

[UnityUI]简易的小地图制作

1.新建两个layer,一个为Ground,一个为MapSign 2.新建一个camera,命名为MiniMapCamera,将Culling Mask设置为Ground和MapSign,将Projection设置为Orthographic,并让它俯视地面 3.新建一个Render Textur...
  • lyh916
  • lyh916
  • 2015-07-30 22:36
  • 1700

UE4小地图制作 (使用蓝图制作小地图)

赛车游戏中大都有小地图,在ue4中小地图如何制作的呢,我们先看看简陋的效果图(过于简陋敬请原谅) 这里用到了大家熟知的scenecapture2d组件 首先创建一个继承于scenencapture2d组件的蓝图 命名为capture 将视角改为正交视角 视角宽度为3000 如图创建一...
  • weixin_36412907
  • weixin_36412907
  • 2017-08-15 14:26
  • 1546

Unity_制作小地图——利用遮挡

制作类似 RPG 游戏时,可能会需要显示小地图。小地图的制作一种方式是用另一个摄像机来渲染到一张纹理上,实时显示到UI界面。 以Unity 5.0 的 UI 系统为例: 在地图正上方放置一个摄像机,设置其 Culling Mask,比如:Ground(地面)、MinimapSign(玩家...
  • zhaoguanghui2012
  • zhaoguanghui2012
  • 2015-03-27 19:23
  • 2139

Unity 制作小地图(Minimap)系统 两种方法

Unity 制作小地图系统 总结 参考官方教程:Creating A Minimap System 完整Github项目:TanksPluggableAI   这个小地图添加在上一篇中AI坦克项目上。   小地图的是实现原理很简单,就是添加多一个相机,设置垂直投影,然后将投影的画面送到显...
  • l773575310
  • l773575310
  • 2017-06-12 13:24
  • 4224

Unity小地图制作

(1)如果没有小地图,可以在编辑场景中调整一个鸟瞰摄像机,刚好可以看到整个地形场景(最好不要大了或者小了),然后使用这张图片作为小地图的背景图。 (2)在没有地形图的情况下,可以直接在屏幕上绘制一个地形图,然后通过比例计算主角在地形位置比例与在地图上的位置,然后在地图上绘制一个小图标来标识主角就行...
  • qq_bingfeng_8
  • qq_bingfeng_8
  • 2014-01-20 18:39
  • 2125

NGUI小地图制作教程 1

最近不知道是不是做游戏的人越来越多了,看见很多人在问关于小地图制作的问题,而且小地图向来都是方法众多,没有什么是最好的,只有自己去尝试才能知道。 本人在制作场景小地图的时候发现NGUI制作小地图的一个很扯蛋的方法~~为神马说扯蛋呢?其实……我就写了2行代码就搞定了~哈哈 以下就是NGUI...
  • yukoxiaowangzi
  • yukoxiaowangzi
  • 2014-06-14 16:37
  • 570

Unity3D——使用UGUI制作小地图

UGUI制作小地图的方法和NGUI也没多大区别,同样是通过Camera+RenderTexture来实现。细节方面的美化可以自行通过美工来完善。为了更好的适应新的UI系统,学习NGUI之余也使用UGUI来制作同样效果的东西。        首先,我们创建...
  • a351945755
  • a351945755
  • 2016-07-18 14:44
  • 1842

虚幻4制作小地图

1,制作一个材质,显示一个图片的圆形区域,放大显示。 2,得到所有怪物地点,然后根据主角位置,计算出显示怪物半径,每个怪物用一个UMG的小红点显示。 3,每0.1秒钟删除所有怪物点,然后刷上半径内所有新的怪物点。
  • lqpgfz
  • lqpgfz
  • 2015-04-28 20:50
  • 2130

WOW小地图生成

参考wowmapview写了一个小地图查看的控件, 可以载入*.wdl文件解析出一张类似于"卫星图"的东西WDL文件保存的是WOW地图的低精度高度数据, 冒似用来做远处的LOD的每个地图最大是64*64个tile, 而一个tile它保存了17*17 + 16*16个16位的高度数...
  • xoyojank
  • xoyojank
  • 2008-11-24 22:53
  • 2640
    个人资料
    • 访问:13769次
    • 积分:201
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:16篇
    • 译文:1篇
    • 评论:1条
    最新评论