作者最新更新

游戏开发工具

FairyGui简单介绍

20

41 次收藏2024-10-13 12:22:07发布

FGUI是一种用于游戏开发的GUI系统。它是一种轻量级的UI系统,具有高性能和可扩展性。FGUI使用自定义的UI编辑器来创建和管理UI界面,开发者可以使用编辑器中提供的各种组件和布局来设计和排版UI界面。FGUI还支持多分辨率适配和多语言本地化,使开发者能够轻松地创建适应不同设备和语言环境的UI界面。FGUI可以与各种游戏引擎和开发工具集成,如Unity和Cocos2d-x,使其可以在不同平台上使用。

一、FairyGUI是一款专业的UI编辑器

FairyGUI提供了一个强大的UI编辑器,使用习惯与Adobe系列软件保持一致,美术设计师和策划都可以轻松上手。

2.jpg

与市场上其他UI编辑器不同,FairyGUI编辑器重视设计师体验,摒弃了脚本和配置文件这些需要代码思维的操作。借助FairyGUI提供的 组件、关联、控制器 以及 动效,我们可以在不写代码的情况下使用编辑器轻松地制作大量复杂的带有动画效果的自动布局的UI。


FairyGUI提供了多个游戏引擎SDK:Unity、Cocos2d-x、Cry Egine, Havok Vision/Project Anarchy、白鹭、LayaAir、Haxe、Pixi、Flash、Starling,未来还将支持UE4、LibGDX等。借助FairyGUI-SDK,你可以轻松在UI中使用3D对象、粒子等元素,而且FairyGUI还解决了环形进度条、像素点击测试、图文混排、循环列表、虚拟列表、曲面UI、VR输入等UI开发中常见的痛点。

二、FairyGUI基础特性

2-1.jpg

1、所见即所得。操作简易,使用习惯与Adobe系列软件保持一致,美术设计师可以轻松上手。

2、在编辑器即可组合各种复杂UI组件,无需编写代码。不需要程序员编码扩展UI组件。

3、强大的文本控件。支持动态字体,位图字体,以及BMFont制作的位图字体,支持HTML语法和UBB语法,支持图文混排。

4、强大的列表控件,支持多种布局,支持虚拟列表和循环列表,即使列表项目数量巨大也拒绝卡顿。

5、支持图片的九宫格和平铺处理,支持图片变色和灰度,支持序列帧动画编辑和使用。

6、内置手势支持。

7、提供时间轴设计UI动效,可实时看到每帧的位置或其他效果。

8、编辑状态下使用分散的素材,发布时自动打包图集。支持定义多个图集,自动支持抽出A通道的压缩方式。

9、多国语言支持。

10、各种分辨率自适应。

11、提供插件机制,可以根据项目的需要为编辑器加入个性功能。

12、为各个游戏平台提供了一致的API,得益于编辑器强大的编辑功能,程序员只需要了解少量API就能完成UI展现,相比Feathers, NGUI, UGUI等UI框架,FairyGUI提高了UI制作效率,降低了成本。

三、FairyGUI的项目文件结构

1.jpg

.objs 内部数据目录。注意:不要加入版本管理,因为这里的内容是不需要共享的。

assets 包内容放置目录,资源内容都在这里面,里面还可以分不同的包,便于区分管理(看下图)。

settings 配置文件放置目录。

****.fairy 项目识别文件,也就是项目名称。

2.jpg

在编辑器中对应显示如下:

1.jpg

四、Unity项目为什么要使用FairyGUI?

Unity 项目选用 FairyGUI 主要有以下几个原因,这些优点使得 FairyGUI 相较于 NGUI 和 UGUI 更具吸引力,特别是在特定的开发需求和场景下:

1、跨平台能力

FairyGUI 提供了强大的跨平台支持,不仅可以导出到 Unity,还支持 Flash、Starling 等其他平台,并计划或已经支持 UE4、Cocos2d-x、libgdx 等更多游戏引擎。对于需要跨平台开发的游戏项目,使用 FairyGUI 可以简化 UI 开发流程,实现一套 UI 设计在多个平台上的复用,降低跨平台适配成本。

2、独立 UI 编辑器

FairyGUI 拥有独立的 UI 编辑器,提供了直观的所见即所得(WYSIWYG)设计体验,设计师可以直接在编辑器中完成界面布局、动画制作、交互设置等工作,无需直接操作 Unity。这种分离的设计与编码工作流有利于提升团队协作效率,减少美术与程序员之间的沟通成本,使美术人员能够在不了解具体编程细节的情况下独立完成 UI 创作。

直观易用:FairyGUI提供了一个功能丰富的编辑器,内置了大量预制的UI组件,如按钮、列表、滚动面板等,并支持自定义组件。编辑器具备高度模块化和可视化操作的特性,使开发者能够轻松进行UI布局、动画制作、字体设置等操作,大大缩短了UI制作的周期。

多平台支持:FairyGUI的编辑器支持Windows、MacOS等操作系统,方便开发者在不同平台上进行UI设计和调试。

3、设计模式与协作

MVC/MVVM模式:FairyGUI提供了MVC或MVVM的设计模式,帮助开发者分离数据与视图,增强了代码的可维护性和可扩展性。这种设计模式允许设计师与程序员分工合作,设计师在FairyGUI编辑器中独立完成复杂的UI设计和动画制作,而程序员则专注于游戏逻辑的实现,大大提高了团队开发的效率。

动态数据绑定:FairyGUI的动态数据绑定机制使得数据与UI的同步变得异常简单。开发者只需定义好数据和视图模型,FairyGUI就能够自动将数据的变更实时反映到UI上,减少了繁琐的手动UI更新代码。

4、高效的工作流程与丰富的功能

FairyGUI 提供了丰富的预制组件和高度可定制的界面元素,支持复杂的界面布局、动态面板、序列帧动画、粒子特效、文本富文本、数据绑定等功能。它还封装了许多 Unity 内部处理起来较为繁琐的逻辑,简化了诸如列表滚动、拖拽排序、窗口管理等常见 UI 功能的实现,有助于提高开发效率。

5、良好的性能与优化

FairyGUI 在设计之初就考虑了性能优化,通过高效的渲染机制和资源管理策略,确保在移动设备上也能提供流畅的用户体验。它支持图集打包、纹理压缩、批处理绘制等优化手段,减少 draw call,降低内存占用,有助于提升游戏的整体性能。

智能渲染批处理:FairyGUI采用了智能的渲染批处理机制,如FairyBatching技术,有效减少了Draw Call,提高了渲染效率。这在处理复杂UI时尤为重要,因为分层和剔除不可见元素的方式能够显著减少渲染负担。

资源管理和缓存:FairyGUI具有高效的UI对象池,可以复用UI组件,减少实时的内存分配,避免在UI频繁更新时引起的性能抖动。此外,其动态图集功能可以在运行时根据需要加载和卸载图集资源,进一步提升性能。

6、丰富的功能和定制性

复杂UI支持:FairyGUI支持复杂的界面布局、动态面板、序列帧动画、粒子特效、文本富文本等功能,满足了现代游戏开发中对于高品质UI的需求。

高度定制性:FairyGUI提供了丰富的扩展接口,允许开发者通过脚本编写自定义组件和动画效果,以满足不同项目的需求。

7、易用性与学习曲线

相比于 NGUI 和 UGUI,许多开发者反馈 FairyGUI 使用起来更加舒适,API 设计更友好,文档齐全,社区支持良好。对于初学者或者希望快速迭代 UI 的项目而言,FairyGUI 的易用性有助于缩短开发周期,减少调试和学习成本。

8、脚本化与数据驱动

FairyGUI 强调脚本化和数据驱动的开发模式,通过 JSON 或 Lua 等脚本语言来描述界面逻辑和数据绑定,使得 UI 状态的变化可以脱离代码而独立管理,有利于实现界面逻辑与业务逻辑的解耦,提高代码的可维护性和灵活性。

9、多屏显示支持与问题解决

FairyGUI 对于多屏显示等复杂场景提供了较好的支持,并有专门的问答社区来解决相关问题。当项目涉及到多显示屏交互或需要复杂窗口管理时,FairyGUI 的解决方案可能更为成熟和完善。


综合来看,FairyGUI 之所以被选用,是因为它能够提供高效的跨平台开发、便捷的设计工具、丰富的功能集、良好的性能表现、较低的学习门槛以及灵活的开发模式,这些优势能够适应现代游戏开发对快速迭代、高效协作、跨平台发布以及高品质用户体验的需求。

尽管 NGUI 和 UGUI 各有特点(如 NGUI 的成熟度、社区支持,UGUI 的原生集成与优化),但在某些特定场景下,FairyGUI 的综合优势使其成为更优的选择。当然,具体选用哪款 GUI 工具还需根据项目的具体需求、团队技能栈、预算以及对各工具深入评估后的实际感受来决定。

五、FairyGUI和UGUI类比

从基础角度

UGUI是基于Unity编辑器的,相比于以前的UI技术方案有了很大的提升,虽然扩展性强一些,但想要实现的更炫,更优雅,还是需要从程序角度下功夫,延长了开发周期和人员占用。

FariyGUI是一个独立的编辑器,可视化的操作,各种动效点点鼠标即可实现,虽然扩展性差了点,但想要的效果基本都能实现,再高深的效果深入学习下FairyGUI也能再自己扩展。

从技术角度

Unity的锚点系统可以说很优秀了,快捷默认的十几个锚点工具帮助开发人员快速定位,但也存在缺点,因为锚点是针对父物体的,所以要考虑好各种父子关系,搞不好就懵了。

FairyGUI除了支持官方的锚点系统,还有自己的关联系统,任意俩组件关联,不用考虑任何的父子关系,这就像Android里面的相对布局。

从提供的基本组件数量上来看,FairyGUI明显多很多,从动画效果上看,FairyGUI实现起来更迅速。

从整体角度

UGUI仍然在Unity编译器中操作,和项目不分开,需要有些动效的话,就需要写代码,多人开发的话很可能代码耦合

FariyGUI是真的将UI分出单独的工作,她都在自己的UI编辑器中完成,不需要代码。

更关键的是利用FairyGUI可以妥善划分工作模块,比如将UI这块分给前端开发或者UI设计人员(我们公司前端和UI空闲时间较多),这样既可以减轻Unity开发的压力,还能让其他员工行动起来,从项目角度缩短开发周期。

当然了刚开始的时候沟通成本可能有些花费,节点命名层次结构需要相互约定好,员工之间多磨合熟练增进下友谊也挺好

所以在项目中大胆的尝试吧,本系列作者小空已经实际项目中应用了。

友情提示:本内容是在官方文档的基础上学习做的笔记,有官方内容也有自己的理解