首页 > 代码库 > 【转】超简单利用UGUI制作圆形小地图

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

技术分享

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

 

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