👉即将学会
从头到尾了解并学习FairyGUI在Unity平台的应用
👉背景
Unity 2019.x系列
FairyGUI 2021.2系列
👉实践过程
FairyGUI简介导读
她提供了超强的UI编辑器,界面操作与PS类似,友善且简单。主打的是摒弃了脚本和配置文件这些需要代码思维的操作,设计或者美术都可以轻轻松松学会并生产界面。
能实现功能非常之多:最基本的按钮,图片,富文本,进度条,滑动条,列表,树
进阶的有动画,控制器,关联系统,装载器,窗口,动效
支持的引擎也非常之多:Unity,Unreal,Cocos,ThreeJS,Egret,LayaAir等十多款游戏引擎
通过简单的操作来实现复杂的功能,提高开发效率,UI 制作效率提升昂昂的,有效减少了工作耦合性。
更关键的是她是开源的github.com/fairygui
遇到问题也可以去官方社区寻找答案ask.fairygui.com/
官方也有学习教程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-改变旋转,还有改变透明度,颜色,缩放,倾斜,可见性,声音,震动,滤镜等等)。想要添加新属性的话,在舞台(中央操作区)右键元件即可出现
- 各个属性的时间轴。
网络异常,图片无法展示|网络异常,图片无法展示|网络异常,图片无法展示|网络异常,图片无法展示|
- 信息显示区 ,FPS是帧率,在右侧功能区检查器最上方修改;frame便是当前从第几帧开始播放;time表示播放头的时间是多少,单位是秒
- 时间轴放大/缩小,当编辑的动效很长时,将她拉大即可
- 时间轴上和Unity时间轴一样都可以在上面操作,左键包含单选/多选/拖动,右键包含转换为关键帧/清除关键帧/插入帧/创建或删除Tween等
今天小空就学到这了,我们下期见!!!
👉其他
📢作者:小空和小芝中的小空
📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。