《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

本节书摘来异步社区《Unity 3D NGUI 实战教程》一书中的第2章,第2.3节,作者: 高雪峰 责编: 张涛,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 制作第一个UI图集

Unity 3D NGUI 实战教程

2.3.1 学会解剖UI的资源结构

为什么要剖析UI的资源结构?因为通常情况下,策划设计好UI的功能和大概布局之后,美术人员会做出一张UI的成品效果图,我们称之为UI设计图。然后,客户端程序需要根据自己的制作方式,告诉美术人员如何分割出相应的UI元素提交给程序,以完成制作。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

下面以图2.17所示的UI设计图作为例子来讲解分析。首先说明一点,客户端程序一定要同时拿到UI设计图和UI功能描述文档才能彻底知道这个UI会进行什么样的操作逻辑,此时才能准确地对UI资源结构进行剖析。主要有以下一些方法。

看设计图,从相关设计文档了解该UI的功能。
在不了解UI功能的情况下,程序只看设计图不一定能准确地明白这个UI的全部用途,为了减少返工,请务必先了解该UI模块的全部功能。如图2.17所示,则是一个典型的登录UI。

观察UI的设计图,判断哪些字是程序可以写的,哪些字是程序写不了的。
在图中我们发现有“登录”“请输入账号”“请输入密码”等Label。其中,“请输入账号”和“请输入密码”两个标签的文字并没有什么特殊的美术效果,完全可以由程序来完成,就不需要美术提供图片资源了。

而“账号”和“密码”两个标签,虽然本图中可以由程序完成,但是如果碰到那种有特殊美术效果(比如,文字上有华丽的渐变和高光等效果,程序是完成不了的)的,则需要让美术提供一张写有相应文字的图片,用Sprite去代替这个Label。

后文我们会详细讲解什么情况下使用Label。

通过设计图判断哪些是Sprite,充分考虑复用性。
凡是零碎的、小的图片资源,都可以是Sprite。如图2.17中,输入账号密码有一个底框,整个界面又有一个底框,这些都可以让美术人员切成单独的Sprite,然后由程序来进行拼装。

在分割Sprite时,尽量分割得细一点,如图2.17中所示,我们可以将整个UI的大底框和输入账号密码的两个底框合并在一起切给程序,但是这样将导致这个UI图片无法用于其他地方。如果整个UI的大底框和输入账号密码的两个小底框分开来切,那么以后其他需要用底框的地方,就可以复用图中切出的UI资源。

相同的UI元素只需要一份就够了,例如图中输入账号的底框和输入密码的底框是一样的,于是只需要切出一份就可以了。

后文我们会详细讲解什么情况下使用Sprite和Texture。

通过设计图判断出按钮资源的制作方式。
按钮笼统地分有两种形式,一种是普通按钮,也就是一张没有文字的按钮图片,程序人员在需要用时,就在上面写上“确定”等不同的、当前所需要的文字。另一种按钮则是图片按钮(以前旧版本NGUI的ImageButton),这种按钮的特点是整个按钮就是一张图片,它既是按钮也是图片。

如图2.17中所示,登录和注册两个按钮几乎一模一样,只是上面的文字有区别,而“登录”和“注册”这几个文字明显是程序可以写出的文字效果,于是可以让美术人员切出一张普通按钮资源的底图,然后程序再在上面写字。

后文我们会详细讲解什么情况下使用按钮。

通过设计图判断其他控件。
要比较迅速地结合UI的功能判断出UI中的一些其他控件,例如假设这是一个人物生命法力的状态栏,那么一定要区分出UI中是否有用来显示人物生命法力值的进度条,如果有进度条,则进度条需要上面切一条表层条,下面切一个空槽底板条。

后文我们会对相关知识进行详细说明。

在剖析UI资源结构的时候,有无数种方案,每一种方案UI美术人员基本都能完成,程序人员也能完成相应的功能。但是,我们一定要通过充分的分析去使用一种相对更好的方案,这样对项目以后的修改和拓展都有好处。在剖析UI资源结构时一定要秉承以下几个原则:

尽量保证还原设计图的效果,不损失质量,这是前提。
尽量发现重复的元件,而且重复的元件只需要一份就足够。
尽量分割得零碎一点,避免多个元件合并在一起出图,这样对项目不利(后文会详细讲解)。
尽量使用九宫格来制作比较大的底板、底框等(后文会详细讲解)。
UI切图全部让美术人员以PNG格式导出。

2.3.2 如何导入切好的美术资源

当美术人员提交给你大量零碎的UI元件时,就可以开始进行UI的制作了。制作的首要任务是先将资源导入到引擎中去。首先在Unity的Project窗口下的Assets文件夹下面建立一个文件夹,将该文件夹命名为Resources,表示这个项目的资源都放在这个文件夹下面,UI资源也不例外。这个文件夹名字一定要设定为Resources,不能改动。

这里讲一下为什么一定要设定一个名为Resources的专门的资源文件夹。Unity开发中,如果涉及动态加载(在游戏中触发了某个条件才需要加载)的情况,比如需要临时生成一个烟火特效等,都会用到Unity的资源加载方法:Resources.Load();这要求需要被动态加载的资源一定要放在Assets下面一个叫Resources的文件夹中。而UI经常会涉及根据不同情况动态加载UI模块的情况,所以一般情况下,我们都会将UI的资源放在Assets目录下的Resources文件夹中。

但是也不是所有资源都放在Resources文件夹中就万事无忧了。因为Unity在生成游戏安装包时,对于Resources以外的文件夹,只会打包场景中用到的资源文件,而对于Resources文件夹,因为涉及动态地往内存里加载资源,所以Unity会无条件的全部打包。如果不加考量的把所有资源都放到Resources目录下,可能会导致最终得到的游戏安装包体积变大。

这时我们可以在Resources目录下建一个名为UI的文件夹,用来单独存储UI资源,以避免UI资源和其他的角色、特效等资源放在一起难以管理。全部选中美术人员提交的UI元件,一起拖曳到Unity界面中的“ResourcesUI”目录下,等待Unity读取资源之后,我们导入的资源会显示在“ResourcesUI”目录下,这样就完成了资源的导入,如图2.18所示。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

2.3.3 用Atlas Maker制作图集

刚刚我们已经将UI元件的源文件全部导入到了Unity中相应的文件夹目录下,在Unity的Project窗口中全部选中刚才导入的UI元件,单击鼠标右键,选择最顶部NGUI菜单,选择Open Atlas Maker(Atlas Maker是NGUI自带的一个UI图片打包工具),这样就能自动将这些UI元件放入到Atlas Maker中,如图2.19所示。

在Mac系统下,右键菜单如果没有NGUI选项,那么可以选中导入的UI元件,在Unity顶部的菜单栏中,选择NGUI菜单,然后选择OpenAtlas Maker即可。

打开后的Atlas Maker界面如图2.19所示。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

图2.19中,标号为1的红框是已有图集的选择按钮,如果你需要将这些新导入的UI素材资源全部新增到一个已有的图集里,就可以单击这里。单击后能看到当前项目工程中已有的所有的图集,然后可以选择其中一个图集,此时标号为2的红框处的按钮将变成Add/Update,这样就可以新增或者更新这批资源到已有的选定的图集中了。

图2.19中标号为2的红框是主按钮,当要打包的UI素材资源没有选定打包到某个已有图集中去时,这个主按钮会显示Create,意为用这些资源创建一个全新的图集。如果通过标号1的红框处的按钮选择了一个已有图集的话,这个主按钮将变成Add/Update,意为新增/更新当前这批UI资源到选中的图集中。更新的机制为同名的Sprite图片将会被替换。

图2.19中标号3处的红框显示的是当前选中的UI图片资源的序号和文件名称,标号4处的红框显示的是这些资源哪些是新增的;哪些是更新的;哪些是已有的。在这里,如果选中了一个已有图集,那么该图集中的Sprite也会一起显示出来,如图2.20所示。在图2.20中,红框1则表示当前选中了一个已有的名为Fantasy Atlas的图集。红框2是编辑图集和新建图集的按钮。红框3的按钮由Create变为了Add/Update。红框4显示出了该图集已有的Sprite,在最尾部有一个删除按钮,单击之后,将会从这个图集中删除该Sprite。如果此时单击Add/Update按钮,那么Sprites列表中尾部标记为绿色的Add的精灵图片将会被新增到这个图集之中。

如果需要更新现有图集中的某一个精灵,则将新的精灵图片文件的名字设为和它要替换的精灵的名字一样,然后按照以上步骤选择它要替换的精灵所在的图集,单击Add/Update即可实现直接替换资源。这在项目开发中是非常实用的,当美术人员希望修改UI资源、用更新的UI资源替换之前的旧资源时,这个自动更新功能将会让程序员非常方便。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

下面继续创建属于我们自己的第一个图集,当打开Atlas Maker之后,我们看到的是图2.19所示的界面。我们需要创建一个全新的图集,所以单击Create主按钮,然后会弹出Save As对话框,将路径定位到ResourcesUI目录下,然后将图集的名称改为“MyFirstAtlas”,单击“保存”按钮即可,如图2.21所示。注意,不要改变文件的后缀名,文件保存后是一个Prefab。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

单击“保存”按钮之后,我们可以看到Atlas Maker界面已经变成了如图2.22所示的情况,这表明图集已经创建成功,中间的主按钮变成了View Sprites,单击后可以预览该图集中所拥有的精灵。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

关闭Atlas Maker界面,然后注意看Project窗口中,ResourcesUI目录下除了我们之前导入的UI图片资源以外,多出了3个名为“MyFirstAtlas”的文件,如图2.23所示。这3个文件是一个图集必须具备的3个文件:图集的贴图、图集的材质球和图集的预设体。其中,第一个球形图标的MyFirstAtlas文件为图集的材质球;第二个蓝色方块的文件为图集的预设体;第三个图片缩略图文件则是图集的贴图,也就是精灵合成为一张整图之后的图片。

至此,我们的第一个图集就算制作完成了,这个图集在后面制作UI时就可以直接使用了。针对Atlas,还有很多功能和用法,例如九宫格等,我们会在本书的后半部分讲到。

特别注明:在制作完UI图集之后,我们可以将之前导入Unity的UI资源源文件删除以减小资源量。


《Unity 3D NGUI 实战教程》一2.3 制作第一个UI图集

上一篇:webgame开发中的文件加密


下一篇:《Unity 3D NGUI 实战教程》一2.5 创建第一个UI