Unity跨平台UI解决方案：可能是最全的FairyGUI系列教程-第三天

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

👉关于作者

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

👉即将学会

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

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

元件

在舞台（中央操作区）的任意都是元件，右边操作区是元件的属性面板设置

基础元件：图片，图形，动画，文本，装载器，组件

组合型元件：标签，按钮，下拉框，滚动条，滑动条，进度条

特殊元件：列表，树

不同属性面板可修改的内容大同小异，基本围绕在修改名称，位置，尺寸，缩放，轴心，遮罩，穿透，文本修改，图片，属性控制（缩放移动等过度动效）。

图片

视觉效果上最常见实现之一就是图片了，她是FairyGUI中最基础的元素，它的设计是尽量考虑到简洁而且高效的。支持的格式PNG，JPG，TGA，SVG。

在这我们强调下九宫格缩放和平铺，九宫格绘制会遵循下面的规则：

1. 保持4个角部分不变形
2. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）
3. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）

这个Android的.9图片异曲同工

如果你想使用平铺来进行缩放的话，除了Flash和Haxe版本，应该尽量避免使用较小面积的图片平铺填充到较大的面积，因为这样会产生大量的网格，甚至可能溢出报错。

图片还支持填充效果，比如顺时针，90度等，修改填充比列可以实现技能CD冷却效果。

资源适配

Android有布局适配，里面同样需要对mdpi,xhdpi,xxhdpi等切不同分辨率的图，FairyGUI同样支持，你只需要让美工切出图，并且相同图片不同分辨率的文件名后缀用@2x、@3x、@4x结尾，只有放好资源即可，在发布对话框里的时候勾选@2x，@3x，@4x选项，后续处理机制是自动无感知的，我们不需要关心。

​

动画

编辑器支持创建、编辑和使用序列帧动画。创建序列帧动画的方式共有三种：

1. 使用Adobe Animate CC/Flash等动画编辑工具制作好动画，导出带plist或eas扩展名的描述文件以及相关的贴图（应放置在相同目录），然后将描述文件（仅描述文件，不是贴图）拖入编辑器即可生成动画素材。
2. 点击菜单“资源”->”新建动画”，或者点击主工具栏按钮，可以创建一个新的空白动画。然后在动画编辑界面点击“导入图片序列”，导入多张图片。
3. 直接拖入一个GIF文件到编辑器，GIF会自动转换为序列帧动画。

无论从何种方式创建的动画，在编辑器里，动画素材都是以一个单一文件存在（扩展名为jta）。也就是说，无论动画是从库里的图片文件创建的，还是从外面导进来的，都不会再有对单个图片的依赖。例如，如果你是从资源库里拖图片进入动画编辑器创建动画的，创建完成后，这些图片与动画再没有任何关系。如果你要设置动画所在的纹理集，在动画编辑器里对动画进行设置，对那些图片设置是无效的。

图形

FairyGUI支持生成简单的图形，比如矩形，圆形，正多边形，和多边形（这个支持任意编辑），还有一个无（空白），这个无，她不消耗任何显示资源，一般用来做占位用途，但有一点这个空白类型的图形和全透明的图形是不一样的。透明的图形可以阻挡点击事件，而空白类型的图形点击事件会穿透下去。

强调：不要小瞧这个图形组件，她的作用可真不小，小空玩的不亦乐乎，可谓是发挥极限。

拿来阻挡事件，拿来做多样化遮罩都是小操作，什么伪关联，伪动效，各种伪中介。

我会在后续的案例教程中实践应用到，记得给个三连哦（关注点赞+收藏）

刚才说了多边形是支持编辑的，那怎么编辑呢？

​

常用的操作有：

1. 拖动圆点调整顶点位置；
2. 左键点击一个圆点，在检查器里改变点的坐标数值；
3. 右键点击舞台，选择右键菜单中的“增加顶点”；
4. 右键点击一个圆点，选择右键菜单中的“删除顶点”；
5. 在检查器里勾选“锁定形状”，然后通过第1或者第2种方法改变某个顶点位置，其他顶点会同时改变位置，相当于一个整体移动所有顶点的效果。

占位

上面说了占位，就跟排队买票或者打饭一样，你有事不在先找个人帮你占着排队，等你回来和对方替换一下。空白图形就是这个功能，你可以在Unity中用代码来将原生对象放进这个占位上，blankObject.SetNativeObject(UnitySprite); 很丝滑的就插进去了。

装载器

装载,，装载，装装载载，加载，加载，加加载载，一看就是用来动态载入资源的玩意。

​

具有什么属性右侧一目了然，可以随便试试，一般勾选下自动大小就行。重点是我们如何动态赋值：利用GLoader

GLoader可以载入图片、动画和组件。如果是UI包里的资源，那么通过“ui://包名/图片名”这种格式的地址就可以载入。但实际项目中，可能我们还需要载入和显示一些不在UI包里的，我们称之为“外部”的图片。默认的GLoader具有有限度的的加载外部资源的能力，它们是：

1. AS3 使用flash.display.Loader加载的外部资源。
2. Starling 使用flash.display.Loader加载的位图资源。加载后转化为Texture。
3. Egret 使用egret.RES.getResAsync加载的外部位图资源。
4. Layabox 使用Laya.loader.load加载的外部资源。
5. Unity 使用Resources.Load加载的外部贴图资源。
6. 其他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来实现展示视频和模型。具体操作步骤小空会在系列里单独开设一片文章详细讲解。记得持续关注哦。

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

👉其他

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