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

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

时间: 2024-10-12 14:16:40

【转】超简单利用UGUI制作圆形小地图的相关文章

超简单手风琴效果制作

手风琴最终效果如下: 要实现以上效果非常简单,无需插件的 Step.1 html结构创建 <div id="firstpane" class="menu_list"> <p class="menu_head">Header-1</p> <div class="menu_body"> <a href="#">Link-1</a> <

ArcGIS利用DEM制作简单三维

利用DEM数据镶嵌后,矢量数据裁剪得到研究范围的DEM数据,在ARCScene中进行三维制作 ArcGIS利用DEM制作简单三维 点击学习我的系统教程哦

利用replaceChild制作简单的吞噬效果【jsDEMO】

[功能说明] 利用replaceChild制作简单的吞噬效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

利用removeChild制作简单的倒序删除效果【jsDEMO】

[功能说明] 利用removeChild制作简单的倒序删除效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

利用insertBefore制作简单的循环插空效果【jsDEMO】

[功能说明] 利用insertBefore制作简单的循环插空效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in&quo

pdf怎么转换成excel格式 超简单

可编辑文档转换为不可编辑文档是非常简单的,比如将word或者excel转换成jpg或者pdf,office或者wps软件本身的最新版就自带有这个功能.但是如果我们要将PDF这种不可修改编辑的文档转换成可编辑的形式就会稍微麻烦一点,因为这种格式是任你怎么放大缩小都不会改变文件的排版方式,虽然阅读起来很方便.那怎么办呢?下面小编教给大家一个方法,可以将PDF转换成Excel格式,超简单! 把PDF格式的文件精确转换成EXCEL表格,这边我们可以选择一款叫"迅捷PDF转换器"的软件. (pd

【PhotoShop】利用PS制作唯美咖啡泡

难得喝杯咖啡,怎么能不拍张了(黑咖啡太苦经常喝实在受不了!) 得到如下图 看着还不错,可是总感觉空空荡荡的,所以就拿来PS练手了.最终效果图如下: 下面讲下制作过程: 首先是给照片加下咖啡泡的效果,找一张有咖啡泡的咖啡~然后选区把咖啡泡部分抠出来 把图片抠出来调整大小适应杯子,然后自然是选择混合选项让他更逼真了. 我这里选择的是点光,当然可以根据个人图片效果选择了.为了让图片更加逼真,我为该图层创建蒙版,并且用黑色画笔涂抹阴暗处(让阴暗处更阴暗)而显得有层次感.效果如图: 现在在加点文字吧.下面

cocos2d-x 利用CCLabelTTF制作文字描边与阴影效果的实现方法

// // myttf.h// // Created by 王天宇 on 14-6-12. // // #ifndef ____SLG__myttf__ #define ____SLG__myttf__ #include <iostream> #include "cocos2d.h" USING_NS_CC; using namespace std; class myttf { public: //给文字添加描边 CCLabelTTF* textAddStroke(cons

[转]PHP实现页面静态化的超简单方法

为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态页面静态化是非常有效的加速方法.(纯静态,伪静态还是需要PHP解释器的) 3.生成静态URL利于SEO,利于蜘蛛抓取和收录,有利于提升排名 优化页面响应时间方法 1.动态页面静态化 2.优化数据库 3.负载均衡 4.使用缓存等等 //动态页面静态化一般用于不经常改动的地方,频繁改动的地方一般不适用静