【转】超简单利用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还没有找到，只能靠自己右手了）

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