Unity3D——使用UGUI制作小地图

Posted 2023-03-26

参考技术A     UGUI制作小地图的方法和NGUI也没多大区别，同样是通过Camera+RenderTexture来实现。细节方面的美化可以自行通过美工来完善。为了更好的适应新的UI系统，学习NGUI之余也使用UGUI来制作同样效果的东西。

       首先，我们创建一个Camera对象，改名为MiniMapCamera，设置Rotation让其视野朝下，面向地面，修改Projection为Orthographic。通过Size来调整摄像机高度。

       然后，Create——UI——RawImage，生成Canvas和RawImage，在Canvas下创建一个空物体叫做MiniMap，然后在MiniMap下创建一个Image对象，并给Image对象添加Mask组件（达到圆形效果）,修改Image对象名字为Mask，修改组件Image的SourceImage为Knob（Unity自带圆形Image）将RawImage拖拽到Mask下。

       接下来，在Pojects面板内创建一个RenderTexture，并将其拖拽到MiniMapCamera的TargetTexture中。设置RawImage的对象为该Texture。此时便能有一个初步的小地图了。

      为了美化这个简陋的小地图，我们可以在MiniMap下再添加一个RawImage，选择一个喜欢的图作为遮罩，确保该RawImage排在Mask下，这样便能覆盖Mask作为外遮罩对象。然后修改MiniMapCamera的CulingMask来选择小地图能看见的层。具体细节可以按自己的喜好来调节。

      这样小地图便完成了，给上一个DIY效果图（依旧是官方案例作为素材）。

超简单利用UGUI制作圆形小地图

http://sanwen.net/a/ithhtbo.html

由于UI都是Achor自己用PS做的，比较粗糙，大家见谅，不过丝毫不影响功能的实现，下面我们看看今天的笔记：

首先我们看看需要哪些组件：

1.在Canvas画布下新建一个GameObject，改名为Mask，顾名思义，该组件实现遮罩功能。

2.在Mask下面添加RawImage，用来实现小地图动态显示。

3.新建一个Sprite作为角色的子对象，改名为Icon，实现小地图中代替角色的箭头图标。（贴图大家根据自己喜好来画，这里Achor就简单的用了PS绘制）

4.需要两个相机，一个用来追踪小地图，一个用来显示UI（UI层用一个相机额外显示比较方便）

组件一共就这么多。

下面开始制作！！！！！！

1.先调整Icon，Minimap的位置及参数，即角色位置的正上方，视距根据需求可改变相机Y轴或者相机视距，Icon也调整至角色正上方，调整相机的Culling Mask，只显示Icon和Terrain。新建一个Render Texture拖到Minimap的Target Texture。

再给Minimap加两行简单代码，让他跟随Icon。

代码如下：

private Transform transform;
public GameObject icon;
void Start ()

{
transform=GetComponent<Transform>();
}

void Update ()

{
transform.position = new Vector3(icon.transform.position.x,59.01f,icon.transform.position.z);
}

2.将刚才的Texture（a）拖动给Raw Image。

此时已经可以实现小地图功能啦，不过是方形的！很丑！

3.下面要修改Mask啦，给Mask添加如下两个组件，并修改Image组件的Source Image为圆形。（圆形自己画就是了）

现在变成圆形了！

But！！Why 还是so丑！？

5.加个边框吧，在UI下新建个Image，下面再添加两个Button并改名，再加入自己绘制的边框和按钮就OK啦。

 

现在好看多了把~（虽然我觉得还是很丑，但毕竟Achor日思夜想的美工MM还没有找到，只能靠自己右手了）

好啦，关于美观的问题就不多说啦，各位可以尽情的发挥~到此小地图功能已经实现，是不是非常简单？如果觉得有用大家就分享给自己的小伙伴吧~