NGUI作为Unity的一个UI工具,从Unity开始时就跟着迭代发展。到现在,最新版本已经是NGUI Next Gen UI v3.12.1。再Unity自身的UI工具也就是UGUI还没有的时候,NGUI可以说是Unity程序必会的一个插件。就算是UGUI出现,也不能掩盖NGUI的光芒,而且众所周知,NGUI的作者还是UGUI的开发者之一。
这篇文章只是对NGUI做一个整体的介绍,至于详细的深入将在之后的文章中进行。
NGUI主要分为四个部分。一个UI,一个动画(Tween),一个交互方面的代码比如UIGrid、UITable、UIScrollView之类,还有一个就是核心代码模块也就是底层支持。这四个部分就是我们主要要研究的方向。其他如shader、editor代码则是没有太大关联。
gnui目录结构当你在Unity中创建第一个UISprite或者其他物体时,你就会发现,你创建的不仅仅是一张UISprite。它还包括uiRoot跟一个camera,这只在第一次的时候创建,而我们创建的Sprite就在uiroot下面。NGUI的所有面板都是以Panel作为分割。这是因为NGUI自身的机制所需。 因此UIRoot本身便附加了一个UIPanel组件。
根目录UI方面来说,NGUI主要提供了UIRoot, UIRect, UISprite,UILabel,UIAtlas, UIFont, UILocalize, UITextList, UITexture等等
UI方面来说,最主要的应该就是图片的显示了。NGUI提供了UIAtlas作为游戏内精灵图片(UISprite)的主要提供者。一个图集的描述文本(即图中的TP Import),UIAtlas提供一个材质,材质需要一个贴图,这张贴图包含我们所需要的一些同一类型的,或者同一页面的图素。贴图尽量使用2的n次方的分辨率大小,这样运行效率更高。其一是压缩过后包体会比不是2的n次方的小,其二是加载也更快。不是2的n次方的图片,unity会将其转化为一个非压缩RGBA32位的格式。
图集Inspector面板 图集-贴图NGUI作为Unity最常用的UI编辑工具。提供了很多基本的功能。其中最基础的就是Sprite精灵图片。那么NGUI的精灵图片在哪里呢。就在这Atlas的这张贴图里面,这张集合了所有我们分类并打包好的图片,我们称之为“图集”。而它的切割信息则保存在对应的.txt文档中。大概是下面这张图里面的效果。里面保存这整张图集里面每个单独的图片的id、高宽以及偏移量。UIAtlas正是根据这些信息提取对应的精灵图片。
图集-文本信息NGUI的文本显示主要靠UILabel这个组件,而文字的话,依靠的时UIFont这个组件。显示文字只需要简单的在UIlabel的输入框输入文本即可。UIlabel本身支持改变颜色等行为,顺带提一嘴,修改文字的方式有两种,其一为直接改颜色,其二为使用bbcode。直接修改颜色的话,只需要在UILabel的Inspector面板中点击颜色然后选择需要的颜色值即可。bbcode则需要查询对应颜色的颜色代码进行赋值。
如果只是做国内游戏的话,当然使用中文就够了。但是现在的游戏一般都有海外版。因此多语言的控制就非常的重要。NGUI提供了一个名为UILocalize的脚本控制,不过不是很常用,一般都是公司自己写的多语言工具。从初始化多语言到保存到赋值都有自己的一整套完整的流程。
UITween
UITween的使用非常的简单,都是大同小异。NGUI包含的动画分别为:
TweenHeight 做UISprite等这些有明确边框的物体的height属性做动画。提供目标物体,最终高度跟动画时间即可
TweenPosition,这个则是位移动画。提供目标物体和最终的目的坐标跟动画时间
TweenRotation,旋转动画,提供目标的轴向、目标值以及动画时间。这个需要注意的是万向锁问题,不然很难达到自己要的效果。
TweenAlpha,这个是做Alpha动画的,同样是提供目标物体,最终alpha跟时间
TweenScale, 这个是做缩放动画,同样是提供目标物体,最终的scale值跟动画时间。
其他动画都是差不多,只需要提供目标物体,提供正确的值跟时间即可。需要主要的是,这些动画在物体未激活的情况下是不会运行的。所以如果需要的话,需要正确的停止跟开启,否则会容易出现再次打开页面动画却从中间开始播放之类的问题。
Internal
Internal中包含了许多的扩展的不属于UI的东西。比如事件的响应脚本EventTrigger,如果需要响应按钮点击时间什么的,都可以挂载这个组件,这个组件上面明确了单击、双击、拖拽等事件的响应事件,我们只需要绑定我们的ui,就可以正常的使用。
eventtrigger事件UIDragCall 是NGUI非常终于的一个组件,整个UI的渲染都是靠它,作用不言而喻。uidrawcall的数量跟性能是成反比的。也就是drawcall越多,性能越差。而uidrawcall的生成在uipanel中,里面粗暴的根据sprite的depth进行生成。因此我们在创作UI界面的时候需要格外注意,尽量控制同一个图集的sprite的depth是相连的,这样就会将其分配到同一个drawcall中。当然,有时候故意分开,然后夹杂一些特效什么的也是有这种操作的。
UIRect是NGUI所有显示的组件的基类,可见其重要性。UIWidget是UIRect的一个子类。它只是一个简单的透明矩形,有时候需要透明的但是可以点击的地方就可以用到它。而且作为一个父节点,可以很方便的控制自己及以下的物体的整体透明度,配合TweenAlpha简直不要太好用。
SpringPanel是作为一个缓冲移动的脚本。它类似与TweenPosition,但是不同之处在于,它是配合其他组件,比如UIScrollView、UIWrapContent使用的,它可以将一个物体缓慢的移动到目标位置。
Interaction
这个文件夹中包含的脚本都是需要跟其他组件共同配合使用的。比如使用UIScrollView的时候,就需要Panel来控制是否切割,移动事件的响应,UITable或者UIGrid的排序,或者UIWrapContent的回收等等。这个文件夹中的组件各种搭配方式能组合出许多不同的却又很好用的功能。例如我们需要做一个背包,那么背包的滑动就需要UIScrollView跟UIDragObject, 那么排序就需要用到UITable或者UIGrid。
第一次写,内容比较乱,见谅个~。接下来会开始仔细介绍各个常用组件的使用,夹杂一些例子