目录

1、NGUI与UGUI趋势

1.NGUI与UGUI的区别

2.NGUI与UGUI的优缺点

2、UGUI简介

1.Unity Interface Overview（界面概述）

2.Canvas（画布）

3.Image（图片）

4.Text（文字）

5.Button（按钮）

3、UGUI实用探讨

1.图片打包设置（图集Sprite Packer）

2.九宫格

-------------------------------------------------------------------------------

正文

之前结合实际工作发了一篇flash和unity结合的动效规范化经验总结，今天发一篇关于NGUI和UGUI的对比和探讨，如果有涉及UGUI的同学们欢迎一起来研究下！

从FLASH到UNITY的UI界面动效统一规范----连接入口↓↓↓戳我戳我↓↓↓

http://km.oa.com/articles/show/276374

1、NGUI与UGUI趋势

相信从事Unity开发的同学没人不知道NGUI和UGUI。在Unity4时代，开发UI界面使用NGUI几乎是不二选择。进入到Unity5后，Unity推出了新的UI系统UGUI，作为Unity的亲儿子，无论是和编辑器的集成度，还是架构设计，都比NGUI上了一个档次，UGUI还在不断发展当中，完全成熟还需时日。

在游戏UI系统选型时（2013），笔者曾经深入研究过NGUI（当时还没有UGUI），NGUI有几点用起来并不方便：
1、Unity编辑器对一般UI美术门槛太高，所以只能由程序员制作UI。而且为了满足UI的还原度，需要耗费大量程序员的时间和精力。
2、只提供了底层，上层的组件依然需要大量二次开发。（或者需要购买插件）
3、优化需要技巧。为了减少drawcall，NGUI使用了Mesh合并技术，处理不当容易带来额外的CPU负荷。
    总的来说，使用NGUI需要耗费程序员较多的精力在一些应该相对简单的区域中。
    后来Unity推出UGUI也是看到了NGUI的不足，而UGUI一定是以后最多人用的，只是大部分人都还在爬坑中，而且从目前来看，UGUI也需要一个二次开发的问题。

在学习Unity3D培训过程中，甭管你是自学也好，参加Unity3D培训学习也好，对UGUI和NGUI肯定需要知道的。随着Unity4.6内置了UGUI后，大家也把关注点投向了UGUI，那我们来说说NGUI与UGUI的区别和优缺点。

1.NGUI与UGUI的区别

1、UGUI的Canvas 有世界坐标和屏幕坐标。

2、UGUI的Image可以使用material。

3、UGUI通过Mask来裁剪，而NGUI通过Panel的Clip。

4、NGUI的渲染前后顺序是通过Widget的Depth，而UGUI渲染顺序根据Hierarchy的顺序，越下面渲染在顶层。

5、UGUI 不需要绑定Colliders，UI可以自动拦截事件。

6、UGUI的Anchor是相对父对象，没有提供高级选项，感觉UGUI的Anchor操作起来比NGUI更方便。

7、UGUI没有Atlas一说，使用Sprite Packer。

8、UGUI的Navgation在Scene中能可视化。

9、UGUI的事件需要实现事件系统的接口，但写起来也算简单。

2.NGUI与UGUI的优缺点

1、NGUI还保留着图集，需要进行图集的维护。而UGUI没有图集的概念，可以充分利用资源，避免重复资源。

2、UIGI出现了锚点的概念，更方便屏幕自适应。

3、NGUI支持图文混排，UGUI暂未发现支持此功能。

4、UGUI没有 UIWrap 来循环 scrollview 内容。

5、UGUI暂时没有Tween组件。

收集了这么多的资料，或许还有更多的风险存在，但Unity官方给这个新的UI系统赋予的标签是：灵活、快速和可视化！简单来说，对于开发者而言，就是有三个优点：效率高效果好，易于使用、扩展，以及与Unity的兼容性高（毕竟是Unity官方集成到Unity编辑器中的新系统）。

-------------------------------------------------------------------------------

2、UGUI简介

Unity官方隆重的推出了新的UI系统，集成了所见即所得的UI解决方案。事实上从近几个版本开始，Unity就在为这套系统做技术扩展，以保证最终能实现较理想的UI系统。大有与NGUI争锋的势头，如图1-1新UI系统所示。 为此很多开发者都对这个新的UI系统产生了兴趣，作为美术人员也打算一探究竟！

图1-1  新UI系统

1.Unity Interface Overview（界面概述）

操作Unity的编辑器是很简单的，核心界面包括五个主要面板。(如下图1-2)

图1-2

1.场景视图（Scene View）：视觉化建构你的游戏，并在2D和3D环境下操作物件。

2.游戏视图（Game View）：预览你的游戏成果，点击播放按钮（play）就会执行，随时可以在编辑器内执行测试。

3.阶层（Hierarchy）：将所有场景的物件以字母顺序排下并使用树状结构来显示父子关系，这是一种集中物件的方式。

4.工程文件（Project）：显示目前所有资源的列表，可以快速存取任何用来建立游戏的程式脚本、材质、3D模型、影响和声音。

5.检视（Inspector）：即时的资讯面板，显示任何被点选的物件、资源或设定相关的属性。

-------------------------------------------------------------------------------

2.Canvas（画布）

Canvas（画布）是摆放容纳所有的 UI 元素的区域。画布是一个游戏对象上的某个Canvas component 组件，所有的 UI 元素必须是这个画布的子对象。

如何创建Canvas（画布），有三种方式。

第一种：菜单栏GameObject -> UI -> Canvas（如下图2-1）

图2-1  第一种

第二种：阶层面板Hierarchy鼠标右键 -> UI -> Canvas（如下图2-2）

图2-2  第二种

第三种比较特殊，我们可以在阶层面板Hierarchy鼠标右键，可以看到有很多的控件，所有的控件都要在画布之上才能创建。那么我们可以凭空随便创建一个（以Button为例），创建了Button之后，Canvas画布会自动被创建出来，且Button会自动生成在Canvas画布下面。 （如下图2-3）

如图2-3  第三种

在创完建画布的时候，画布下会出现EventSystem（如下图2-4），EventSystem可以用来处理UI的一些事件，属于一种事件系统，我们不用去理会这个EventSystem（觉得碍眼就直接Delete掉吧）。

如图2-4

Canvas的属性（如下图2-5）

图2-5 

Rect Transform是 2D 与 3D 图形的 Transform 组件对应。它用来指定用户界面系统中的大小、 位置和旋转的控件。（如下图2-6）

图2-6 

我们先看Canvas，Render Mode一共有三种模式。（如下图2-7）

图2-7 

1.Screen Space - overlay此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面。

2.Screen Space - Camera 此模式需要提供一个UICamera ，与NGUI的原理很像，如果在UI前面加特效需要创建一个摄像机深度大于这个UICamera就OK了。

3.World Space此模式是完全3D的UI，目前来说用到它比较少。

在这通常选择第一种模式来制作UI。

Canvas Scale指的是UI Canvas整体的缩放比例。UI Scale Mode :Scale With Screen Size 表示根据屏幕尺寸来调整UI的缩放值，即以宽度为标准缩放。通常游戏屏幕会设置1136x640的尺寸，所以我们就在Reference Resolution设置x：1136，Y：640的尺寸。（如下图2-8）

图2-8

Canvas画布在拼UI界面上的属性大致就调制完成了。

-------------------------------------------------------------------------------

3.Image（图片）

Image图片创建

Image的创建跟Canvas方式同样，菜单栏GameObject -> UI -> Image；阶层面板Hierarchy鼠标右键 -> UI -> Image；来创建Image。（ 如图Canvas）

Image设置与属性

    Image Inspector面板中可以看到，对于所有UGUI的控件都有共有的属性Rect Transform。Canvas Renderer是用来渲染它的样子，Source Image指定显示的图片，Color显示的是当前（白色）的颜色，点击Set Native Size表示导入的图片设置到原本图片的大小。（如下图3-1）

图片3-1

首先设置图片属性，选项UGUI独有的选项Sprite（2D and UI），可以用来做Unity2D的精灵或UI显示，设置完成点击Apply进行运用（如下图3-2）。

图片3-2

通常在制作Image之前，先将导入Unity中的图片全部设置好，这样才能把图片拉取到Image的Source Image状态栏中，拉取到Source Image状态栏中，点击Set Native Size把图片设置原来大小。（如下图3-3）

图3-3

4.Text（文字）

Text文字的创建跟Canvas方式同样，菜单栏GameObject -> UI -> Text；阶层面板Hierarchy鼠标右键 -> UI -> Text；来创建Text。（ 如图Canvas）

Text设置与属性

UGUI在Text上做的非常方便，可以直接应用TTF字体，在unity中导入你下载的字体，拉取到Font状态栏中，就可以直接应用了（如下图4-1）。

图4-1

Font的定义就是可以改变字形；Font Style设置字体的Normal正常，Bold加粗，Italic斜体，Bold And Italic粗细体。Font Size设置字体尺寸，这里要特别注意，在调整文字大小时，在Scene中要把字体框状先拉大，以便能看见字体的显示（如下图4-2）。

图4-2

Line Spacing设置行间距，Rich Text副文本，增加一些标注，比如说修改一些字体的颜色，解析特殊的标签。Alignment设置字体居中的样式，Color设置字体颜色。

Text特效

Text特效主要是设置文字的轮廓线和阴影的效果，Effect Style效果样式属性允许指定要应用到文本渲染效果。可用效果是阴影和轮廓线，每个通过呈现不同的颜色在它后面文本的一个或多个副本。在菜单栏Component->UI->Effects->Shadow或者Outline（如下图4-3）

图4-3

    你会看到有三个选项，Shadow影子；Outline外扩。这里要注意一下，这里只是一个文字重叠的外扩效果，数值调高的话会出现重影的效果。（如下图4-4）

图4-4

5.Button（按钮）

Button按钮的创建跟Canvas方式同样，菜单栏GameObject -> UI -> Button；阶层面板Hierarchy鼠标右键 -> UI -> Button；来创建Button。（ 如图Canvas）

Button有主体的Text，用来显示Button上的内容，属性设置与上面所讲的Text同样，如果制作的Button不需要文字，那么直接在Text勾选栏中不勾选状态即可关闭文字显示（如下图5-1），或者直接Delete掉Text。

图5-1

Button Inspector面板有两个组件（如下图5-2），第一个是Image显示按钮材质图片，导入Unity的图片拉取到Source Image状态栏即可显示。第二个是Button设置交互状态，首先这里的Interactable不勾选的状态下是失效（无法点击），所以在做按钮交互效果Interactable必须勾选状态。Transition选项有三种设置状态，第一种是Color Tint表示当前按钮是用颜色来显示交互状态。第二种是Sprite Swap表示当前按钮是用图片来显示交互状态。第三种是Animation表示当前按钮是用动画脚本来显示交互状态。HighLighted触碰按钮改变状态，Pressed点击按钮改变状态，Disabled Color关闭按钮状态。下面还有On Click，这是制作点击按钮执行事件，美术人员就了解下（反正不会代码），先忽略。

图5-2

三、UGUI实用探讨

1.图片打包设置（图集Sprite Packer）

    在使用UGUI的过程中，导入的图片使用都是一张张散图，一张图片一次Draw call，什么是Draw call？Unity每次在准备数据并通知GPU渲染的过程称为一次Draw Call。一般情况下，渲染一次拥有一个网格并携带一种材质的物体便会使用一次Draw Call。Draw Call的次数是决定性能比较重要的指标。

在NGUI中可以使用Texture packer，先把小图片打包成一张大图，然后在NGUI中设置引用大图中的哪一块作为图片，这样能减少很多Draw call。但是在UGUI中没有办法使用Texture packer了，查了很久的资料跟研究，才发现原来Unity4.6中自带了图集打包工具Sprite Packer。我们把一张图片拖入到Project中，可以设置它的用途，Texture还是作为2DUI使用。而且注意到多了一个 Packing Tag的设置项。这个设置项就是设置小图打包成大图后的atlas的名称，如下实例。

在Hierarchy界面中放了8张图片，每一张都是不同的图片，在Game窗口可以看到Draw Call次数（如下图1-1）

图1-1

先打开图片打包设置窗口，菜单栏Edit -> Project Settings ->Editor（如下图1-2）

图1-2

Editor Settings设置窗口下面有个sprite packer模式（如下图1-3）。Disabled表示不启用它，Enabled For Builds 表示只有打包的时候才会启用它，Always Enabled 表示永远启用它。 启用它表示是否将小图自动打成图集。

图1-3

选择Always Enabled选项，在制作时才能清楚看到Draw Call的次数。接着设置一下图片属性中的Packing Tag参数，打包的图片才会生成图集（如下图1-4）。

图1-4

  我们把所有的图片设置Packing Tag名字改成“1”，然后点Apply保存，可以看到Draw Call次数为2。这里要注意图片不能放在Resources文件夹下，Resources文件夹下的资源将不会被打入图集，所以才会出现2次Draw Call。

如何查看打包的图集，菜单Window -> Sprite Packer（如下图1-5）

图1-5

    点击Packer即可预览图集信息（如下图1-6），打包图集就完成了。

图1-6

2.九宫格

九宫格拉伸最大化的节省纹理资源，以四条线把图片切割成九部分。观察发现中心（编号5）图形进行整体拉伸，上下（编号2、8）进行横向拉伸，左右（编号4、6）进行纵向拉伸，保持四边角（编号1、3、7、9）不产生变形的效果。（其原理如下图2-1）注意的是在图形色相上有渐变色或者复杂的图形图案存在，会导致在使用九宫格时UI中图形图案产生拉伸变形。

图2-1

UGUI中如何使用九宫格，选择导入Unity中的图片，点击Sprite Editor按钮（如下图2-2）。

图2-2

设置Sprite的边界，拉取四个绿色点上的线即可编辑九宫格裁剪线，也可以在Border中输入裁剪的具体数值（如下图2-3）。

图2-3

设置Image的属性，打开Image Type选项，将图片类型选择为Sliced，并将Fill Center勾上，九宫格基本上就设置完成了（如下图2-4）。

图2-4

在游戏制作界面切图开发过程中存在几个问题，一是缺乏简单易用并可视化的编辑工具，导致程序员和美术耦合过深；二是市面上的框架不够成熟，导致二次开发工作量过大，对程序员能力要求高，且难以标准化；三是无力应对多变的需求。UGUI的时代已经到来，制作界面切图的编辑器拼合的工作交由美术人员去制作可以减免很多的麻烦，相对来说会精细很多，偏差会缩小，且能负责好整个项目的UI资源库。

我也正在学习，以上个人总结的内容难免有不准确的地方，衷心希望有经验的朋友在留言提意见！也欢迎大家一起来讨论，如何让美术人员能更快捷的掌握UGUI，更有效率的实现于项目中，也让程序GGMM们能更专心的去敲击代码！谢谢大家耐心的阅读。下一集我会制作成视频教程让大家一起学习一起探讨，敬请期待咯~