首页 > 代码库 > 【转】超简单利用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制作圆形小地图