首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之开始学习制作第一个例子(一)
2012
05-18

NGUI研究院之开始学习制作第一个例子(一)

       NGUI是Unity的一个插件,使用它来制作你的游戏UI必定将事半功倍。为什么这么说呢?首先我们说说GUI与NGUI的区别,GUI是Unity自带的绘制界面工具,它的成像原理是基于表层的,所以执行效率非常的低,并且没有提供复杂的UI的接口,就算开发者硬着头皮写上去只能让UI的执行效率更低。然而NGUI 完全依赖与3D就好比在游戏世界中的摄像机直直的照射在一个平面中,在平面之上再去绘制自己的UI,所以它的执行效率会非常高。

  NGUI是一款收费的插件,在Asset Store中大家可以看到价格。在未购买正版的前提下我们可以通过两种方法来使用NGUI,第一种:使用官方提供的免费版本,但是这个版本中有NGUI的水印,无法正式发布不过完全可以作为学习使用。第二种:使用别人购买过的正版插件,在互联网中有朋友放出NGUI的插件。

这里提供免费版本NGUI的下载地址,欢迎大家和MOMO一起学习

下载地址: http://www.tasharen.com/get.php?file=NGUI

插件下载完毕后打开Unity开始导入插件,首先在Project视图中右键选择Import Package->Custom Package->ngui_free.unitypackage(刚刚下载至本地的插件)导入完毕后,请刷新一下你的工程确保Unity导航菜单栏中出现NGUI的菜单项,Unity的版本不同可能导致NGUI导入时不存在菜单项,也可以退出Unity在重新进入即可。

       首先在新创建的Unity工程中删除Hierarchy视图中原有的摄像机对象,在Unity导航栏菜单中选择NGUI->Create  a New UI。可以理解为创建摄像机,并且这个摄像机直直的照射在平面中,该平面就是我们的UI平面。如下图所示,点击Create a New UI   菜单项后弹出UI Tool工具栏。Layer下拉列表表示摄像机的显示层,用过摄像机的都应当清楚吧? Camera下拉列表设置摄像机的朝向是2D 还是3D,最后直接点击Create Your UI即可创建一个新的界面。 

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 1

 

接着NGUI会自动帮我们在Hierarchy视图中生成如下的对象关系。

UI ROOT(2D):看着名字我想搞程序的都应该知道是啥意思吧?界面根节点、入口点。

Camera :NGUI生成的摄像机对象,它将直直的照射在锚点面板。

Anchor:界面的锚点,影响UI的显示位置。它下面会挂着面板。

Panel:面板,摄像机照射着它,它下面会挂一些控件,比如标签、按钮、精灵、拖动条等等。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 2

 

        接着我们开始创建界面组件,在Unity导航菜单栏中选择NGUI-> Create a Widget创建小部件,然后选择字体与图像集合,这里先选择它自带的图像集合,后面我们在学习如何制作自己的图像集合。接着选择贴图的模板最后完成创建即可,这里我们创建一个简单的贴图。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 3

(点击图片查看大图)

 

OK下面我们将材质绑定在刚刚创建的Simple Texture身上。如下图所示,Transform中是名对象的变换。

P:X、Y、Z坐标

R:X、Y、Z轴的旋转

S :X可理解为图片宽,Y理解为图片高

刚刚我们创建的模板为Simple Texture,NGUI会帮我们绑定UITexture脚本。

Material:添加的材质对象,为了让材质显示的更加清晰,我们设置材质的着色器为Unlit/Texture

Depth:表示深度,就好比UI绘制的先后顺序,数值越高越先绘制,它主要应用于Sprite精灵(后面详细说),在Simple Texture中设置无效,不过可以通过修改Z轴坐标的形式来更改绘制顺序。

Color Tint: 设置颜色,用于没有贴图的材质。

Correction:自动设置图片宽高,就好比本例中我的图片宽高是128X128,点击该按钮后会自动修改Transform中S的X = 128与Y = 128。

Pivot:贴图显示的锚点,没什么大问题。

Preview:是否在监测面板视图中预览下方我的头像贴图。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 4

 

 

继续创建一个Simple Texture 绑定在面板中,男生和女生的头像都显示了出来 嚯嚯。如图所示最后的效果图。

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 5

 

 


OK接着我们创建一个简单的按钮,Fantasv Atlas是NGUI 资源包中自带的一组图像集合。下一篇文章中我会介绍如何自定义这个图像集合,Template中选择Button,Background选择“NGUI”,“NGUI”是Fantasv Atlas图片集合中的一个图像,我们用他做为我们的按钮背景。

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 6

 

然后编写简单的脚本来监听这个按钮的点击事件、这段代码的意思就是点击按钮后删除女生头像。

Test.cs

OnClik()方法当点击按钮时调用,前提是在UICamera脚本绑定的对象或子对象中,并且该对象具有Box Collider组件。

如下图所示,项目的结构如下。点击按钮后女生头像消失!

Button  background是按钮背景图像,它是由精灵组成

Label是标签框,可以写入文本内容。

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 7
(点击图片查看大图)

 NGUI真的挺给力的!好玩!好用!有意思!哇咔咔!!

这儿有一篇非常棒的NGUI的文章,推荐大家去学习学习。http://1vr.cn/article.asp?id=605

 

2013年3月6日补充
最近我使用了一下最新的NGUI版本发现UIAtlas的作法已经和以前的不一样了,在博客中补充一下吧。
切记!一定要先选择需要制作UIAtlas的所有图片。如图所示,首先在Project视图中用鼠标选中所有的图片,接着在导航菜单栏中选择NGUI -> Atlas Maker 。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 8

 

如果不先选择图片,直接点击Atlas Maker的话,那么你的UIAtlas中就不会有任何精灵了。这里一定要切记!!!然后可以看到刚刚我选择的3张图片已变成精灵添加入UIAtlas中拉。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 9

 

继续点击Create完成创建。点击sprite下拉按钮 即可看到所有的精灵文件。如下图所示,新版的NGUI会帮我们把所有贴图和并在同一张图片上,宽高都是2次幂这样就很好的避免图片尺寸2次幂比例的问题。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 10

 

如果你想在原有的Atlas上更新与删除精灵的话。还是先在Project选择需要添加的精灵图片,然后导航菜单栏中选择NGUI -> Atlas Maker
如果删除的话,点击下图中对应精灵的“X”按钮,最后点击 ADD/UpdateALL。 如果只是更新的话就不要点击Replace,他会把你之前精灵全部替换掉。

 

NGUI研究院之开始学习制作第一个例子(一) - 雨松MOMO程序研究院 - 11

 

精灵合集图片生场完毕后,你也可以把之前的单张图片删除掉。 都不影响精灵的使用。

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

  1. 不好意思~雨松大大~最近都看你的文章正在使用NGUI但遇到csharp.dll.mdb is denied~所以不能build and run~想請問有甚麼方法嗎~還是要重新導入ngui再把原本的東西package丟入?~請教一下~

  2. 雨松大大,能否提供关于使用WheelCollider制作赛车游戏的教程,如何实现控制最大速度与加速度。

  3. 我用了你的代码 点击效果出来了 可是没有销毁 这是怎么回事 有哪些可能? 是不是PHYSIC MATERIAL的问题 我新建一个物理材料 可是怎么才能把材料选为石头的里?

  4. Pingback: レイバン 店舗

  5. MOMO老师,最近做项目碰到一个麻烦,就是NGUI的字体问题,我的UI大量使用了Label(字体都是同一种,英文的),但是现在想换一种字体,有没有什么办法可以一次性换掉所有的字体,不然我得一个个手动换,很麻烦~谢谢您了~

  6. MOMO老师,我看了您这篇教材。然后在自己的版本上实验了下,蛮好的,这个NGUI的确用起来很方便。你的教程也很简单易懂。但是我遇到一个小问题,不知道究竟哪里出了点小问题。我点击按钮的时候是可以实现删除物体功能的。但是每次我把这个场景关掉以后,重新打开,我链接的图片就丢失了。我重新select才可以看见。我也反反复复仔细看了你的教程好几遍,就是找不出是哪里的问题。希望能得到老师您的指点,谢谢

  7. 你好啊雨松大师,我想请教个事情:我有一张图集,图集里各种小部件,小部件都不全是矩形的,都是不规则的,例如设置按钮的齿轮部件。我在一张背景图里放上不规则的小部件,现在我的图集是必须带透明通道的,否则小部件的周围就会显示白色或黑色。但是图片带上透明偷到后,就不能使用ETC1压缩算法,图片的消耗会增加很多。我记得以前做windows图像编程时,小部件的底色都可以带个指定的颜色,然后在渲染的时候就不把背景颜色绘制出来。请问Unity3d或者NGUI支持这种做法的吗?我的邮箱是gao_rq@qq.com,真心希望能得到和你交流的机会,谢谢。

  8. 为何我的add to 按钮点不了 ,而且上面的Atlas 按钮点了以后出来一个No recently used UIAtlas components found. Try drag & dropping one instead

  9. 不太明白更新之后的补充说明(关于 Atlas Maker的)选择3张图片一起create一个Atlas的意义在哪里?按照这种方式,project里只生成了:一个material(对应的texture是xxxx.png),一个prefab(里面可以选择script),和一张xxxx.png图片(3张图片拼成的一张大图)——新建一个simpleTexture的时候,还是需要手动绑定material的,因为只生成了一个material,所以最终显示的是xxxx.png这个拼接图,这明显不对啊,我想显示的是单张。另外在prefab里选择不同的script,作用是什么望解惑

  10. 雨松MOMO 是这样,我有个问题。比如现在我的游戏想给左下角加一个按钮。但问题是我主场景已经有一个Camara了。这个时候如果还添加一个 Camara…… 那场景里就又两个Camara了就会打架……。

  11. 你好~想請問我用iTween控制NGUI的物件移動iTween.MoveTo( gameObject, new Vector3( 0, 1.0f, 0 ), 3.0f );不知為何控制3D物件他的y就真的只有跑1可是NGUI建出來的物件卻會跑346.5這麼遠~請問是為什麼會這樣呢?試好久~希望可以提點我一下~冏謝謝

  12. 我想问下MOMO老师,加了destory脚本之后,点击button。那个TEXTURE没有消失,而是变到其他TEXTURE下面去了。。。怎么解决?

  13. 太不详细了,对于初学者还是搞不懂Atlas这里是空的,没得选所以Add To按钮也是灰的。

  14. 请教大神。。。在ios上系统自带的gui效率跟ngui比起来差别在哪里啊?gui增加了draw call对整个游戏影响是怎么个情况?