👉即将学会
从头到尾了解并学习FairyGUI在Unity平台的应用
👉背景
Unity 2019.x系列
FairyGUI 2021.2系列
👉实践过程
元件
在舞台(中央操作区)的任意都是元件,右边操作区是元件的属性面板设置
基础元件:图片,图形,动画,文本,装载器,组件
组合型元件:标签,按钮,下拉框,滚动条,滑动条,进度条
特殊元件:列表,树
不同属性面板可修改的内容大同小异,基本围绕在修改名称,位置,尺寸,缩放,轴心,遮罩,穿透,文本修改,图片,属性控制(缩放移动等过度动效)。
图片
视觉效果上最常见实现之一就是图片了,她是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来实现展示视频和模型。具体操作步骤小空会在系列里单独开设一片文章详细讲解。记得持续关注哦。
今天小空就学到这了,我们下期见!!!
👉其他
📢作者:小空和小芝中的小空
📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。