Unity跨平台UI解决方案:可能是最全的FairyGUI系列教程.Part1
作者:互联网
目录
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效果演示
<iframe allowfullscreen="true" data-mediaembed="csdn" id="ypc3pG9K-1616115423141" src="https://live.csdn.net/v/embed/157284"></iframe>Unity技术-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等
引用/搜索/控制台
引用:查询一个资源被其他资源引用的情况,或者查询一个资源引用其他资源的情况,关键是还能替换,6的很
搜索:输入关键字,检索出相关内容
控制台:显示软件的提示信息,分为提示信息,警告信息和错误信息。
测试界面:
当你想看看运行效果的时候,可以点击主工具栏的测试按钮或者F5运行
你可以设置全局适配参数,修改设备预览,横竖屏等操作。当时要注意在动效播放过程中,不要改变屏幕大小,否则会出现异常。
项目设置
默认值
注意:这些参数是编辑器内的默认值,与运行时无关。运行时需要用UIConfig重新进行全局的设置。而且后者的设置也不一定需要和这里的设置相同。
字体:修改所有文本的默认字体,可以使用项目中的字体(ttf文件)也可以用系统自带的(你电脑C:\Windows\Fonts下有什么字体这就有什么字体)
字体颜色/大小:设置在舞台中(中央操作区)新建文本的默认颜色和大小
默认轴心:即坐标原点,默认左上角即可
垂直滚动条/水平滚动条:设置制作UI时所有带滚动功能的容器需要使用的滚动条资源。这就是说,你将一个组件或者一个列表的“溢出处理”设置为“垂直滚动”、“水平滚动”或者“自由滚动”后,不需要每次设置滚动条,自动就会使用这里设置的滚动条资源。如果某个组件需要使用和全局设置不一样的滚动条,在当前组件拖动上去覆盖掉即可。全局设置和单独设置都支持。
按钮点击声音:设定按钮的默认点击声音。设置后,所有按钮点击都会播放这个声效,除非按钮自己独立设置另外的声效。这个设置仅用于编辑器内,运行时使用UIConfig.buttonSound设定。
快捷菜单
在这设置后,当以后你在任何地方修改字体大小颜色或字体样式的时候,不用设置了,直接用下拉菜单选择即可。
项目分支
对有的项目来说这节很重要。
分支功能是用来实现多态设计的,比如多语言版本存在UI的差别,除了基本文字的中英文差别,还有图片艺术字中英文等差别,要保证资源名称一致,这和Android的思想一致。
我们都是在主干上开发,随时可以建立任意多个分支,然后分支上添加有差别的内容即可
注意,它和代码仓库中的分支概念不一样。UI分支不包含主干的资源,它只放置与主干有差别的内容,降低资源容量
详细内容可看官方文档教程
发布设置
纹理集
发布的时候编辑器会将项目中的图片资源放到一起,当放不小的时候会自动分页,如图
这的设置修改影响着发布出来的纹理集大小,一般默认的即可,自己可以修改看看都有什么效果,除了发布路径你自己修改,其他内容一般情况下保持默认的即可。
难道真这么简单?小空刚开始也挺顺利,后面资源多了也开始蹦出不少问题:
问题一:Gif图的序列帧刚好被分配到了两个纹理集上,而要求Gif帧需要在一张纹理集上,编辑器就会在你发布的时候给你提示:发布失败,动画被自动发布到不同的纹理集上,这会导致......
想要解决,我们只需要将这个Gif图改为单独的纹理集就行了(双击会弹出设置)。Gif在编辑器中是动画形式,详情请看本系列的动画小节。
问题二:再深入的问题又来了,一款游戏,再小他也是有不少资源的。纹理集设置默认是2048*2048像素的(在发布设置中可修改),保不齐修改更大的尺寸(4096像素?或者8192像素?)。发布后放到Unity运行你会发现,哎呦我去,怎么变模糊了?UI给图给岔劈了?不对啊,在FairyGUI中看没问题啊。难道问题出在Unity?
不错,你发布出来的纹理集资源放到Unity里默认是2048的,你已经修改成更高像素的了,还用2048的来解析,不出问题才怪。只需要修改最大尺寸对应上即可。
问题三:以为这就完了?还能再深入,这点小空也是着实被坑了一把。即使你设置了如上内容,睁大钛合金双眼仔细看,还是能看出一些不舒服的地方:可能部分有点点“灰边”,而在FairyGUI中却没有。
没错又是Unity搞得鬼,看上图右侧部分,有个压缩选项,默认Unity纹理集是法线压缩,你改为none即可。
读者要是第一次学习FairyGUI,这几个问题能看着不知其所以然。没关系,接着往下了解,当看完教程实际上手后,你会发现这的坑。
FairyGUI基础元素
元件
在舞台(中央操作区)的任意都是元件,右边操作区是元件的属性面板设置
基础元件:图片,图形,动画,文本,装载器,组件
组合型元件:标签,按钮,下拉框,滚动条,滑动条,进度条
特殊元件:列表,树
不同属性面板可修改的内容大同小异,基本围绕在修改名称,位置,尺寸,缩放,轴心,遮罩,穿透,文本修改,图片,属性控制(缩放移动等过度动效)。
图片
视觉效果上最常见实现之一就是图片了,她是FairyGUI中最基础的元素,它的设计是尽量考虑到简洁而且高效的。支持的格式PNG,JPG,TGA,SVG。
在这我们强调下九宫格缩放和平铺,九宫格绘制会遵循下面的规则:
- 保持4个角部分不变形
- 单向拉伸4条边(即在4个角两两之间的边,比如上边,只做横向拉伸)
- 双向拉伸中间部分(即九宫格的中间部分,横向,纵向同时拉伸,PS:拉伸比例不一定相同)
这个Android的.9图片异曲同工
如果你想使用平铺来进行缩放的话,除了Flash和Haxe版本,应该尽量避免使用较小面积的图片平铺填充到较大的面积,因为这样会产生大量的网格,甚至可能溢出报错。
图片还支持填充效果,比如顺时针,90度等,修改填充比列可以实现技能CD冷却效果。
资源适配
Android有布局适配,里面同样需要对mdpi,xhdpi,xxhdpi等切不同分辨率的图,FairyGUI同样支持,你只需要让美工切出图,并且相同图片不同分辨率的文件名后缀用@2x、@3x、@4x结尾,只有放好资源即可,在发布对话框里的时候勾选@2x,@3x,@4x选项,后续处理机制是自动无感知的,我们不需要关心。
动画
编辑器支持创建、编辑和使用序列帧动画。创建序列帧动画的方式共有三种:
- 使用Adobe Animate CC/Flash等动画编辑工具制作好动画,导出带plist或eas扩展名的描述文件以及相关的贴图(应放置在相同目录),然后将描述文件(仅描述文件,不是贴图)拖入编辑器即可生成动画素材。
- 点击菜单“资源”->”新建动画”,或者点击主工具栏按钮,可以创建一个新的空白动画。然后在动画编辑界面点击“导入图片序列”,导入多张图片。
- 直接拖入一个GIF文件到编辑器,GIF会自动转换为序列帧动画。
无论从何种方式创建的动画,在编辑器里,动画素材都是以一个单一文件存在(扩展名为jta)。也就是说,无论动画是从库里的图片文件创建的,还是从外面导进来的,都不会再有对单个图片的依赖。例如,如果你是从资源库里拖图片进入动画编辑器创建动画的,创建完成后,这些图片与动画再没有任何关系。如果你要设置动画所在的纹理集,在动画编辑器里对动画进行设置,对那些图片设置是无效的。
图形
FairyGUI支持生成简单的图形,比如矩形,圆形,正多边形,和多边形(这个支持任意编辑),还有一个无(空白),这个无,她不消耗任何显示资源,一般用来做占位用途,但有一点这个空白类型的图形和全透明的图形是不一样的。透明的图形可以阻挡点击事件,而空白类型的图形点击事件会穿透下去。
强调:不要小瞧这个图形组件,她的作用可真不小,小空玩的不亦乐乎,可谓是发挥极限。
拿来阻挡事件,拿来做多样化遮罩都是小操作,什么伪关联,伪动效,各种伪中介。
我会在后续的案例教程中实践应用到,记得给个三连哦(关注点赞+收藏)
刚才说了多边形是支持编辑的,那怎么编辑呢?
常用的操作有:
- 拖动圆点调整顶点位置;
- 左键点击一个圆点,在检查器里改变点的坐标数值;
- 右键点击舞台,选择右键菜单中的“增加顶点”;
- 右键点击一个圆点,选择右键菜单中的“删除顶点”;
- 在检查器里勾选“锁定形状”,然后通过第1或者第2种方法改变某个顶点位置,其他顶点会同时改变位置,相当于一个整体移动所有顶点的效果。
占位
上面说了占位,就跟排队买票或者打饭一样,你有事不在先找个人帮你占着排队,等你回来和对方替换一下。空白图形就是这个功能,你可以在Unity中用代码来将原生对象放进这个占位上,blankObject.SetNativeObject(UnitySprite); 很丝滑的就插进去了。
装载器
装载,,装载,装装载载,加载,加载,加加载载,一看就是用来动态载入资源的玩意。
具有什么属性右侧一目了然,可以随便试试,一般勾选下自动大小就行。重点是我们如何动态赋值:利用GLoader
GLoader可以载入图片、动画和组件。如果是UI包里的资源,那么通过“ui://包名/图片名”这种格式的地址就可以载入。但实际项目中,可能我们还需要载入和显示一些不在UI包里的,我们称之为“外部”的图片。默认的GLoader具有有限度的的加载外部资源的能力,它们是:
- AS3 使用flash.display.Loader加载的外部资源。
- Starling 使用flash.display.Loader加载的位图资源。加载后转化为Texture。
- Egret 使用egret.RES.getResAsync加载的外部位图资源。
- Layabox 使用Laya.loader.load加载的外部资源。
- Unity 使用Resources.Load加载的外部贴图资源。
- 其他SDK请参考源码GLoader里的loadExternal方法
比如://Unity, 这里加载的是路径为Assets/Resources/demo/aimage的一个贴图
gLoader.url = “demo/aimage”;
如果这些默认的外部加载机制不能满足你的需求,例如,你希望从AssetBundle中获取资源,或者你需要加入缓存机制(这是有必要的,如果需要重复加载,建议做缓存),或者需要控制素材的生命期(这也是必要的,因为GLoader不会销毁外部载入的资源),那么你需要扩展GLoader。
你就需要继承GLoader编写自己的Loader类,然后注册Loader类,注册完成后,游戏中所有装载器都变成由你编写的类实例化产生。
如注册:UIObjectFactory.SetLoaderExtension(typeof(MyGLoader));
视频/模型
FairyGUI是专注于UI的方案,没有对视频这些的支持,但是她是支持展示的。同样用到这个GLoader(装载器)。单纯用Unity我们想要模型显示的UI上的话都会使用Render Texture,在这展示视频我们也是同样的道理。借住RawImage和Render Texture来实现展示视频和模型。具体操作步骤小空会在系列里单独开设一片文章详细讲解。记得持续关注哦。
系列文章Part1到这就结束了,小空要赶紧去开Part2了。记得回来哦,拜拜。
作者:小空和小芝中的小空
公众号:【空名先生】,专注于分享Android/Unity以及自己掌握的资源。期待与你交流。互利共赢。
转载说明:务必注明来源。
标签:动画,Unity,编辑器,FairyGUI,Part1,跨平台,UI,设置 来源: https://blog.csdn.net/qq_27489007/article/details/114976482