这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

👉即将学会

从头到尾了解并学习FairyGUI在Unity平台的应用

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

FairyGUI简介导读

她提供了超强的UI编辑器，界面操作与PS类似，友善且简单。主打的是摒弃了脚本和配置文件这些需要代码思维的操作，设计或者美术都可以轻轻松松学会并生产界面。

能实现功能非常之多：最基本的按钮，图片，富文本，进度条，滑动条，列表，树

进阶的有动画，控制器，关联系统，装载器，窗口，动效

支持的引擎也非常之多：Unity,Unreal,Cocos,ThreeJS,Egret,LayaAir等十多款游戏引擎

通过简单的操作来实现复杂的功能，提高开发效率，UI 制作效率提升昂昂的，有效减少了工作耦合性。

更关键的是她是开源的https://github.com/fairygui

遇到问题也可以去官方社区寻找答案https://ask.fairygui.com/

官方也有学习教程https://www.fairygui.com/docs/guide/

FairyGUI效果演示

视频

FairyGUI和UGUI类比

从基础角度

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

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

从技术角度

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

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

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

从整体角度

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

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

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

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

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

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

FairyGUI编辑器使用

FairyGUI的项目文件结构

公众号：空名先生

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

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

settings 配置文件放置目录。

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

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

编译器主界面

注意左方功能区的显示列表，按显示顺序排列，列表中越往下的元件显示在越前面。可以在列表中直接拖拽改变元件改变它们在显示列表中的位置。

动效时间轴

公众号：空名先生

在左侧功能区动效里面增加动效后双击动效即可进去时间轴

公众号：空名先生

时间显示单位是秒
参与动效的各个元件和属性，左边元件名称可以起名规范些，以后若是想在Unity中用代码控制也方便（因为代码中控制是需要用名字来查找的），右侧显示的是属性（XY-改变位置，Size-改变大小，Rotation-改变旋转，还有改变透明度，颜色，缩放，倾斜，可见性，声音，震动，滤镜等等）。想要添加新属性的话，在舞台(中央操作区)右键元件即可出现
各个属性的时间轴。表示关键帧，表示两个关键帧之间使用插值动画（右键创建Tween，支持自定义：选中关键帧后在右侧功能区有缓动函数），红色小红旗则表示这个关键帧有Label（标签），可以通过代码按标签名称访问进而实现帧监听（比如走到某一帧执行其他逻辑）。
信息显示区，FPS是帧率，在右侧功能区检查器最上方修改；frame便是当前从第几帧开始播放；time表示播放头的时间是多少，单位是秒
时间轴放大/缩小，当编辑的动效很长时，将她拉大即可
时间轴上和Unity时间轴一样都可以在上面操作，左键包含单选/多选/拖动，右键包含转换为关键帧/清除关键帧/插入帧/创建或删除Tween等

今天小空就学到这了，我们下期见！！！

👉其他

📢作者：小空和小芝中的小空
📢转载说明：务必注明来源：芝麻粒儿的个人主页 (juejin.cn)。
📢欢迎点赞👍收藏🌟留言📝