[Unity3D]Unity3D游戏开发之初窥NGUI

各位朋友，大家晚上好， 我是秦元培，欢迎大家关注我的博客，我的博客地址是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对象下，使其成为它的子控件。类似地，我们创建一个Button按钮，并为其添加一个Label显示OK。此时场景布局如图所示：



好了，最后来一起看看效果吧！



当然，目前游戏界面中的元素都不能和用户交互，因为我们还没有为控件编写脚本，在下一篇文章中，我们将继续探索NGUI，希望大家关注我的博客，好啦，今天的内容就是这样啦。

每日箴言：现在不是去想缺少什么的时候，该想一想凭现有的东西你能做什么。——海明威《老人与海》



喜欢我的博客请记住我的名字：秦元培，我的博客地址是blog.csdn.net/qinyuanpei
转载请注明出处，本文作者：秦元培，本文出处：http://blog.csdn.net/qinyuanpei/article/details/25339875