Unity3D种UGUI与NGUI的对比差别(2)

article/2025/9/29 19:58:53

层级管理概念

UGUI采用Hierarchy排序的方式,替代了NGUI中的Depth排序。 更精准的说,NGUI的排序是通过Depth、Z值、RenderQueue共同影响的,整体规则过于复杂;而UGUI采用的排序比较简单,在Canvas内部元素采用Hierarchy方式排序,在Canvas同级之间通过Sort Order或者是Hierarchy来进行排序;UI的组织方式,就是层级的可见顺序,跟平常的认知具有一致性。

3DMesh嵌套问题

通常UI开发中都会存在UI与Unity3DMesh嵌套的需求,特别常见的是角色与粒子特效。通常有两种方案来处理嵌套。第一种方案是将3DMesh渲染到一张RenderTexture中,再用这张RenderTexture来与其他的UI做排序。这种方案在UGUI与NGUI中都可用,比较适合角色这种渲染目标唯一并使用控件唯一的需求。 另一种方案是将3DMesh的渲染与UI一起排序,UGUI跟NGUI都没有提供将Unity3DMesh内嵌为一个UI元素进行排序的功能。 在NGUI中,官方论坛推荐使用一个脚本来动态修改Mesh的RenderQueue,达到跟UI排序的目的。具体逻辑是每帧获取目标UI的RenderQueue,同步更改Mesh的RenderQueue。因为NGUI默认的排序方式,是每个drawcall对应一个3000以上的RenderQueue。 在UGUI中,采用的是Sorting Order的方式来做排序,需要修改的是粒子Renderer的Sorting Order来跟UI进行排序。所以使用Sorting Order来管理canvas之间的层级关系时,需要留出足够的Order厚度来支持Canvas内部元素嵌套使用粒子特效。

Mask裁剪

NGUI中的Mask裁剪,是通过透明度裁剪实现的;UGUI中的Mask裁剪,是通过Stancil裁剪实现的。透明度裁剪,需要在shader中做额外的透明度因子计算,并且被裁剪掉的像素(透明度为0的像素)还是会参与到后续的Blending等渲染流程;Stancil裁剪,需要额外一个pass来渲染mask区域,但没通过Stencil的像素会被丢弃,不参与后续渲染流程。权衡下来,UGUI的做法会更省一点。特别是被裁剪区域特别大,或者区域内重叠框体特别多的情况。

3DMesh裁剪

在UI的mask组件内部层级嵌套使用3DMesh时,粒子也需要被裁剪。NGUI与UGUI都需要对嵌套的3DMesh做裁剪处理。

图集管理模式

UGUI不再使用自定义Atlas资源,image中使用的是Sprite,图集可以用Unity提供的Sprite Picker来合成。 NGUI抛弃了Unity的Sprite组件,自定义了一套图集资源及管理模式(Atlas),提供合图工具、Sprite选取窗口、并提供了对单个资源做静态深加工(加阴影、轮廓)的功能。
1488795720-5516-243fe64f60fdc2f18.14875827101488795720-8359-f63be2df64637228f.1487582710
UGUI整合了Unity的Sprite,使用Sprite Picker来做合图集,功能上简化了许多,但可以直接从Unity的Project窗口中直接把Sprite或者Multiple sprite中的某个Sprite直接拖到Image中,操作上简化了些。 对于小型游戏UI来说,UGUI的简化版功能会更便捷些。但是对于MMORPG这种有复杂UI层级的游戏来说,使用UGUI的自动合图集,由于可控度太低,大概率会造成内存浪费,或者Drawcall Issue。所以,复杂UI层级的游戏,使用NGUI的图集管理模式,可控度会更高些。在UGUI中,可以通过使用第三方工具(如TexturePicker)合图后转成Multiple Sprite来达到跟NGUI相似的可控度。 采用Multiple Sprite有个缺点,不能直接动态加载这个MultipleSprite中包含的某个Sprite,需要使用LoadAll接口将该图集所有的Sprite都加载以后,再遍历对比出所需的Sprite。而Unity的LoadAll函数,是会对Resource中所有文件进行遍历的。当Resource中的文件数量非常庞大的时候,遍历耗时会造成性能卡顿。 这个问题,可以通过将自定义Altas中的Sprite导出成Prefab,并提供一个Sprite Prefab的加载缓存管理器即可。除此之外,精简Resource中的文件数量也是一种很好的方案。“Best Practices for the Resources System —— Don't use it”。[2]

渲染性能

Batch算法

NGUI的Panel内部排序:在Widget新增时,是通过Insert到List中进行排序的,整个算法的时间复杂度是O(n),元素越多,效率越差。在Rebuild时,直接遍历WidgetList,按材质、贴图、shader来拆drawcall,进行batch。 UGUI的canvas内部排序:由于没有明确的指定次序,UGUI需要按照顺序,对每个UI控件遍历出相交情况,再查看是否可以合批,算法比NGUI更复杂些(判断相交的算法有优化,时间复杂度小于O(n2))。

Native Code 优势

然而,NGUI实质上是创建自定义Mesh,使用Mesh Renderer来做渲染的。对UI的合批操作逻辑在C#层。UGUI定义了Canvas组件,使用Canvas Renderer来做渲染,在C++层做合批逻辑,所以UGUI处理动态层的性能会比NGUI更佳。 对于有频繁动画需求的UI,使用UGUI会比使用NGUI有性能优势。

EventSystem & Raycasters

UGUI中采用Event&Raycasters的设计,来替代NGUI中的Collider&sendMessage。 在NGUI中,默认控件是不参与交互的,除非加上Collider;而在UGUI中,默认控件是参与交互的,除非使用canvas Group组件来禁止交互(在5.x版本中,可以通过去掉勾选raycast Target来禁止)。所以在使用UGUI的过程中,突然发现某个点击无效了,可以优先考虑是否是最近有人添加新的Text把消息遮挡了。 NGUI的交互事件是通过SendMessage来发送消息的,SendMessage的性能比较差,Delegate与SendMessage的性能测算,前者会快10倍左右[3]。UGUI的交互事件改为通过事件回调机制来发送消息,对于交互输入这种比较频繁调用的消息来说,性能上提升不少,比较直接反馈是scroll view的滑动流畅度。

Layout布局

UGUI的布局,采用Layout组件群(Layout Element、GridLayoutGroup、Content Size Fitter等),来替代NGUI中的Table跟Grid。 对于UGUI来说,Layout是比较费的组件,因为每次被标记Dirty时,它需要重算所有的子元素的大小跟位置。一般来说,只用在跟内容的相对大小相对位置有关联的复杂布局中。例如说scrollview中动态添加新Item或者是文本背景纹理需要根据文本的长宽动态变化的时候[4]。 平时可以在编辑模式下,用Layout组件来辅助界面快速布局。另外比较小规模的相对布局(如2*2table),可以使用RectTransform的Anchor替代。因为RectTransform的计算是在C++层发生的,比同等的Layout更效率

UI动画

NGUI整合了ITween,并将ITween的使用封装成脚本,可以非常方便制作出各种旋转、平移、缩放的效果,易用性很强。 UGUI官方文档建议是采用Unity的Animation System来制作UI动画[5],但是使用Animation动画有个比较明显的缺陷,在UI频繁显隐的时候(Active/Inactive),Animator会重新Rebind一次Controller,导致无意义的性能损耗,所以UGUI的动画实现,可以有另一个option,通过整合DoTween来实现。Dotween不存在Animation的反复初始化问题,并且它使用了一些缓存策略,相对于ITween来说,每帧耗时更短,效率更高,产生GC更少。[6]

总结

从易用性角度来看,NGUI比UGUI好用一点点

NGUI的工具支持度更高: Drawcall Tool,可以查看UI的Drawcall分布以及哪些元素影响了Drawcall分布,可以很方便的调整顺序优化Drawcall; Prefab Toolbar,可以将Prefab模板直接保存成可视态,通过拖曳到Hierarchy创建新组合; Editor Right - Click Menu, 在编辑场景中,右键弹出的操作菜单,可以在多重叠控件中,拾取某一个,或者对某个控件进行层级操作。在开发多层级复杂UI的时候,这个功能是可以提升效率的。 ITween, NGUI整合了ITween并提供了封装后的使用脚本,可以很方便快捷的完成UI的动画需求,如旋转、缩放、变色、移动等。 UGUI的概念封装更好,可视化更高: 将层级管理改为Hierarchy排序以后,比较符合人类认知; 对于可交互空间的navigation顺序,可以直接给出可视图; 深度利用Unity的内核,如Inspector,Sprite等;

从可扩展性来看,UGUI略逊NGUI一点点

UGUI与NGUI都可以通过简单组件组合,来满足大多数的需求;也可以通过继承扩展现有组件来满足特殊需求; NGUI更极端一点,可以通过直接修改源码来满足需求。UGUI虽然也开放了源码,但只是C#部分,C++部分是无法做改动的。

从性能来看,UGUI比NGUI有底层优势

UGUI的排序及合批逻辑都在C++层处理,效率更高; 采用EventSystem的分发模式,效率更高;

结论

除以上总结外,UGUI还有几个优势:全免费、官方身份、跟Unity可深度融合(多线程)等。 选用UGUI应该是趋势,因为性能是关键, 易用性可以通过开发辅助工具或者扩展组件来弥补。随着使用者越来越多,UGUI会越来越强大。

Reference

[1]  Unity Manual - UI - Base Layout [2]  Best Practices -- The Resources folder [3]  Unity3D的Delegate和SendMessage的性能差测试 [4]  UGUI中实现底图自适应size的方法 [5]  Unity Manual - UI - Animation Integration [6]  Unity CPU占用-DoTween与iTween效率对比

查看原文:http://www.51xyyx.com/3055.html

http://chatgpt.dhexx.cn/article/vADmHKU6.shtml

相关文章

NGUI插件] 收录最全的NGUI示例文档中文教程(更新版本3.0.5)

NGUI3.0.X官网示例中文讲解 本站NGUI各个版本插件下载地址 NGUI 2.7.0中文字体的使用 官方网站上的控件说明翻译: NGUI控件说明(中文) UIWidget NGUI控件说明(中文) UIRoot NGUI控件说明(中文) UIPanel NGUI控件说明(中文) UICamera NGUI控件说明(中文) UIStretch NGUI控件…

NGUI 3.5教程(一)安装NGUI 3.5.8

写在前面: 网上找的NGUI教程,都是基于2.x版本的。为了能配合教程学着做,我也是下载了各种NGUI 2.x版本。但是在导入的时候,或多或少都报错(我用的Unity 的版本是4.3.2)。无奈之下,只好下载了最…

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例

原文地址:http://www.tasharen.com/?page_id185 NGUI下载地址:点我传送 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene)。 2.选择并删除场景里的MainCamera。 3.在NGUI菜单下选择Create a New UI&#xff0c…

GUI之安装 一、打开NGUI的官方网站

GUI之安装 一、打开NGUI的官方网站 http://www.tasharen.com/?page_id140 二、往下拖网页找到免费版本的下载地址并下载 三、在Unity3D工程中导入所下载的unitypackage 点击Unity3D左上角的菜单Assets->ImportPackage->CustomPackage 在弹出的选择窗口中选择之前下载的…

NGUI -- UILabel

注意:本文翻译时NGUI版本已经更新到3.0.7 原文地址:http://www.tasharen.com/forum/index.php?topic6706 总览 UILabel是能用于显示文本的挂件。 所有Label需要一个字体才能正常工作。这个字体可以是动态的(Dynamic)&#xff0…

NGUI -- UIPanel

注意:本文翻译时NGUI版本已经更新到3.0.7 原文地址:http://www.tasharen.com/forum/index.php?topic6705 总览 UIPanel是一个保存并管理它下面所有挂件的组件。UIPanel负责通过挂件的几何结构创建真正的draw call。如果没有Panel,没有任何…

NGUI使用教程(1) 安装NGUI插件

前言 鉴于当前游戏开发的大势,Unity3d的发展势头超乎我的预期,作为一个Flash开发者,也是为Flash在游戏开发尤其是手游开发中的地位感到担忧....所以 最近一段时间都在自己学习unity3d,技术只有不断学习才能跟上迅猛的计算机潮流,所以博主写这篇文章即是自…

UI(一) - NGUI和UGUI比较

UI是游戏项目中重要的组成部分,面对一个从零开始的项目,首先要确立的就是选用哪个UI系统作为主框架。 现在主流项目中基本上都是NGUI和UGUI,那么到底选哪个。我们先来做个比较。 图集处理功能比较 NGUI需要使用工具手动拼接图片成图集。UGUI…

NGUI系列教程一

首先导入NGUI package ,这里我们选用的是2.6.3 版本的NGUI 。在 unity 工程窗口中点击右键选择 Importpackage custom package ,选择你下载的NGUI 插件,导入完成后效果如图: 1.选择菜单NGUIOpen the UI Wizard,弹出创建…

最新版本的NGUI插件NGUI Next-Gen UI

NGUI的最新版本,在商店上直接卖95美元 由于Unity自身版本升级的原因,以及Unity5之后自带了UGUI,所以NGUI的使用率也大大下降了。 更何况,Unity2017版本之后很多老版本NGUI就用不了,很大一部分原因是Unity新版本弃用一…

UI框架的使用(NGUI)

1.导入资源包 2.把NGUI面板制作成预设体,然后把预设体拖到Resources/UIPanel中(一定要放在Resources/UIPanel中,后面路径读取的时候就是这个路径) 3.为各自面板建立对应的脚本,然后再把脚本挂给对应的面板 4.为各个…

【Unity】NGUI下载与导入

NGUI是UGUI出现之前的Unity3D最流行的UI插件,很多比较早的游戏教程都是用的NGUI。 本人因学习原因需要用到NGUI,但捣鼓了很久才成功(导入后菜单栏没有NGUI),下载了几个版本才发现是版本问题,现将下载与导入使用NGUI的方法总结如下,节省大家时间,少走弯路。 1、下载NGUI…

Unity学习日志_NGUI简介

Unity学习日志_NGUI简介 NGUI仅支持相机模式。 UIRoot UIRoot类似于UGUI中Canvas的UI Scaler组件,负责缩放模式调节。 属性: Scalling Style: Flexible:旧版本叫PixelPerfect,指永远保持图片自身像素大小不变。适合…

NGUI简介

NGUI NGUI是一款为Unity游戏引擎开发的工具功能扩展的UI插件,它能够为开发者提供了方便快捷的UI设计方法,加快设计游戏的速度。详细的介绍还是请读者到NGUI官网查看: http://www.tasharen.com/?page_id140 在Unity中,如果要使…

NGUI

(一)NGUI NGUI概述:NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件, 全面支持iOS/Android和Flash。相比UGUI(Unity自带的UI系统),有着更高的性能和…

【Unity】 NGUI学习笔记(二)NGUI基础功能

文章目录 NGUI基础功能与知识点Atlas图集资源Sprite精灵Button按钮Anchor(锚点)Label文本Toggle开关Slider滑动条Popup List下拉框Panel面板Input Field Script文本域脚本Text List组件Chat Input组件Scroll Bar滚动条(预制件)Scr…

NGUI插件的使用

一、NGUI的公有属性 Widget面板属性: Privot设置原点位置 Depth设置深度(跟UGUI一样,深度高的会挡住深度低的UI) Snap恢复初始大小 Size设置大小 Aspect宽度/高度,(Free模式下才可设置高度和宽度&#xff0…

网上订餐系统项目实战

写在前面:学习编程过程中写的一个网上订餐系统,记录一下大概的思路,源码跟实现过程 ,这也是一个学习的过程,这时候还有很多不足的地方 MVC的分层做得不是很好,如果还有其他可以改进的地方,欢迎…

肯德基宅急送网上订餐系统(移动扫码点餐)的设计与实现(小程序+PHP+MySQL)

目 录 第1章 绪论 1 1.1研究背景及意义 1 1.2研究现状 1 1.3章节安排 2 第2章 关键性技术介绍 3 2.1 PHP 3 2.2 JSON 4 2.3 XML 5 2.4 HTML 5 2.5 Mysql介绍 6 第3章 需求分析 7 3.1系统业务流程分析 7 3.2 功能需求分析 8 3.3用例分析 10 3.3.1领域类图 10 3.3.2系统用例 14 3…

基于移动端的网上订餐系统的设计和实现

随着智能手机的快速普及,智能手机操作系统市场风生水起。为了让智能手机能够随时随地地查询互联网所提供的服务,一种高效的方法就是将应用系统的功能拓展到手机终端上,让手机能够通过移动网络以及互联网访问相关资源信息。因此,智能手机应用软件及其需要的服务将有广阔的发展前…