[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的子节点,了解这一点对于我们后续的学习很有帮助。

     好了,了解完基本知识后,现在我们开始做一个简单的界面,最终的效果如图所示:

[Unity3D]Unity3D游戏开发之初窥NGUI_第1张图片

        今天是我们第一次学习NGUI,所以博主选择了一个相对简单的界面。首先我们准备下面的素材:

[Unity3D]Unity3D游戏开发之初窥NGUI_第2张图片

         接下来,我们将素材图片导入Unity3D中,然后我们在Unity3D项目窗口中选中我们的素材文件,依次选择NGUI->Atlas Maker。

[Unity3D]Unity3D游戏开发之初窥NGUI_第3张图片

       接下来,会打开精灵集合制作窗口:

[Unity3D]Unity3D游戏开发之初窥NGUI_第4张图片

       如果此时项目中已经有创建好的Atlas,那么会提示替换或者选择一个Atlas,否则默认是Create一个Atlas,这里我们就替换吧,可以看到在下面的列表中添加了我们选中的精灵素材。我们这里选择替换后,会发现在Unity3D的项目目录(在素材文件的目录下)生成了下面几个文件:

[Unity3D]Unity3D游戏开发之初窥NGUI_第5张图片

    其中,TextureAltas.mat是一个材质文件、TextureAltas.png是一个将精灵图片显示在一张图中的图片、TextureAtlas.prefab是一个预设文件。好了,了解完NGUI怎么创建精灵以及NGUI具体做了什么之后,我们可以开始今天的界面构建了。首先我们选择NGUI->Create a Widget创建一个控件:

[Unity3D]Unity3D游戏开发之初窥NGUI_第6张图片

      在接下来的窗口中,我们选择Sprite类型来创建一个精灵:

[Unity3D]Unity3D游戏开发之初窥NGUI_第7张图片

     再创建好精灵之后,我们就可以为精灵指定素材了,如图:

[Unity3D]Unity3D游戏开发之初窥NGUI_第8张图片

     我们指定这两张图片作为我们的背景,命名为BlackSprite,调整到合适的大小。类似地,我们创建头部的标题背景,命名为HeaderSprite。好了,接下来我们来说说字体吧,我们首先从Windows/Fonts中复制一个字体并将其导入到Unity3D中,在Unity3D中会生成三个文件,字体文件、字体文本文件、字体着色器。好了,接下来我们使用NGUI->Font Maker来制作字体:

[Unity3D]Unity3D游戏开发之初窥NGUI_第9张图片

        和生成Atlas精灵一样,我们按照自己的需要来生成字体。接下来,我们使用创建Sprite的方法创建一个Label,将字体设置为我们创建的字体,我们只需要将控件的模本设置为Label就可以了。我们为头部的标题背景图片加上一个Label,使其显示战斗奖励的字样,最后将其拖放到HeaderSprite对象下,使其成为它的子控件。类似地,我们创建一个Button按钮,并为其添加一个Label显示OK。此时场景布局如图所示:

[Unity3D]Unity3D游戏开发之初窥NGUI_第10张图片

      好了,最后来一起看看效果吧!

[Unity3D]Unity3D游戏开发之初窥NGUI_第11张图片

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


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


[Unity3D]Unity3D游戏开发之初窥NGUI_第12张图片


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


你可能感兴趣的:(游戏,unity3d,游戏开发,游戏设计,游戏界面)