朋友,大家晚上好。 我是秦培。欢迎关注我的博客,我的博客地址blog.csdn.net/qinyuanpei。近期博主開始研究NGUI了,由于NGUI是Unity3D中最为流行的界面插件,所以不管从学习还是以后工作的角度来看, NGUI都值得我们去深入的研究和学习。
那么,从今天起,博主将为大家带来NGUI的系列文章,希望大家能继续关注我的博客,写简单、有用、优雅的代码一直是博主编程的主旨, 所以博主在写每一篇文章 时,都力求给出简单、清晰的代码。随着学习的深入。博主会坚持以实例巩固学习的方法。希望大家喜欢。好了。如今让我们開始今天的内容,尾随博主一起走进NGUI的世界吧。
首先,我们对于NGUI要有一个定位。NGUI是用来做界面的,NGUI支持2D/3D的界面。我们在前面的文章中学习过2D插件2DToolKit,尽管2DToolKit相同能够实现2D界面,可是NGUI专注于界面元素、2DToolKit专注于游戏元素,因此两者在使用的时候存在一定的差异。当然,二者能够混合使用,这些都是后话啦。好了,我们正式開始吧。首先,我们导入NGUI的资源包。这时在项目窗体中会添加一个NGUI的文件夹。好了,做好准备工作后,我们先来了解下NGUI中的基础知识。
1、Atlas
Atlas在NGUI是一组资源的集合,假设大家熟悉2DToolkit的话。一定知道在2DToolKit中有一个被称为SpriteCollection的概念。
SpriteCollection被称为精灵组合,我们在2D游戏场景中使用的一个元素被称为Sprite。即精灵。
SpriteCollection实际上是一个Prefab,在这个Prefab中定义了我们的所有精灵素材,我们能够依据精灵的名称来使用某一个精灵。那么在NGUI中,Atlas就是这样一个精灵集合,在这个精灵集合中定义着我们要使用的精灵元素。换句话说,在NGUI中使用精灵元素首先就要创建一个Atlas。
在NGUI中我们能够通过内置的 Atlas工具来创建Atlas。
2、Font
Font即字体,主要用来控制界面中文本的样式。在NGUI中,我们须要通过NGUI内置的字体工具来制作自己定义字体。这样我们就能在Unity3D中实现不同风格的游戏界面。
3、UI Root
NGUI使用NGUI作为场景元素的根节点,在该节点下有一个用于显示场景的摄像机、一个用于控制控件位置的Anchor锚节点,在该锚节点下有一个用于盛放UI元素的容器节点Panel,我们今后创建的所有控件都将作为Plane的子节点。了解这一点对于我们兴许的学习非常有帮助。
好了。了解完基本知识后。如今我们開始做一个简单的界面。终于的效果如图所看到的:
今天是我们第一次学习NGUI,所以博主选择了一个相对简单的界面。首先我们准备以下的素材:
接下来,我们将素材图片导入Unity3D中,然后我们在Unity3D项目窗体中选中我们的素材文件,依次选择NGUI->Atlas Maker。
接下来,会打开精灵集合制作窗体:
假设此时项目中已经有创建好的Atlas,那么会提示替换或者选择一个Atlas,否则默认是Create一个Atlas。这里我们就替换吧,能够看到在以下的列表中加入了我们选中的精灵素材。
我们这里选择替换后,会发如今Unity3D的项目文件夹(在素材文件的文件夹下)生成了以下几个文件:
、
当中,TextureAltas.mat是一个材质文件、TextureAltas.png是一个将精灵图片显示在一张图中的图片、TextureAtlas.prefab是一个预设文件。好了,了解完NGUI怎么创建精灵以及NGUI详细做了什么之后,我们能够開始今天的界面构建了。首先我们选择NGUI->Create a Widget创建一个控件:
在接下来的窗体中,我们选择Sprite类型来创建一个精灵:
再创建好精灵之后,我们就能够为精灵指定素材了,如图:
我们指定这两张图片作为我们的背景,命名为BlackSprite,调整到合适的大小。相似地,我们创建头部的标题背景,命名为HeaderSprite。好了,接下来我们来说说字体吧,我们首先从Windows/Fonts中复制一个字体并将其导入到Unity3D中,在Unity3D中会生成三个文件,字体文件、字体文本文件、字体着色器。好了,接下来我们使用NGUI->Font Maker来制作字体:
和生成Atlas精灵一样。我们依照自己的须要来生成字体。接下来。我们使用创建Sprite的方法创建一个Label。将字体设置为我们创建的字体。我们仅仅须要将控件的模本设置为Label就能够了。我们为头部的标题背景图片加上一个Label,使其显示战斗奖励的字样,最后将其拖放到HeaderSprite对象下,使其成为它的子控件。相似地。我们创建一个Buttonbutton。并为其加入一个Label显示OK。此时场景布局如图所看到的:
好了,最后来一起看看效果吧。
当然。眼下游戏界面中的元素都不能和用户交互,由于我们还没有为控件编写脚本,在下一篇文章中,我们将继续探索NGUI。希望大家关注我的博客,好啦,今天的内容就是这样啦。
每日箴言:如今不是去想缺少什么的时候,该想一想凭现有的东西你能做什么。——海明威《老人与海》
喜欢我的博客请记住我的名字:秦元培。我的博客地址是blog.csdn.net/qinyuanpei
转载请注明出处,本文作者:秦元培,本文出处:http://blog.csdn.net/qinyuanpei/article/details/25339875
版权声明:本文博客原创文章,博客,未经同意,不得转载。转载请注明出处和作者,谢谢!