FairyGUI1：FairyGUI 编辑器_fairygui教程

FairyGUI 官网：https://www.fairygui.com/

官方手册已经很齐全了，但是内容太多刚看容易迷失方向，所以还是可以记录下重点，可以当作是非常简单的概括式教程

一、FairyGUI 编辑器入门

FairyGUI 编辑器教程：https://www.fairygui.com/docs/editor/component

1.1 组件与基本元件

组件就是根节点(Panel)，元件就是指具体的一个一个 UI 元素，像图片、文字、按钮这些就是最最基础的元件，为了方便编辑，可以把多个元件放在一个组里

Editor 也分预览模式和运行模式，动画以及某些设置（例如不可见）只能在运行模式下测试

1.2 文本

相对于文本，富文本可以额外支持交互、图文混排以及 Html 语法，当然无论哪种都支持 UBB 语法，根据需求的不同尽量使用普通文本

字体支持导入自己的 TTF 文件

每次新增文本都要设置字体太麻烦，可以通过文件 → 项目设置 → 默认值 → 字体去设置默认字体，它会被当作全局默认字体

• SDFAA：可以修改的字体渲染方式为 SDFAA，该渲染方式和 Unity TextMeshPro 一致，基于SDF渲染文字可无限放大并保持清晰，几乎没有开销就可实现描边，发光，抗锯齿等效果

1.3 装载器与控制器

这个概念是 FGUI 特有的，因此刚看到这个词的时候比较陌生

• 装载器：UI 中很多的图片/动画资源都是动态载入的，例如显示玩家头像、显示 URL 链接中的图片、又或者是显示玩家的 RT 模型等等，就需要用到装载器

装载器的 URL 指向的资源可以是图片、动画或者组件，如果选中右边的图片，则在发布时会自动清空这里的值，毕竟它往往在运行时由程序指定

• 控制器：FGUI 核心功能之一，可以使元件/组件具有多个不同的形态，并且可以方便地切换，最经典的运用例子就是按钮，除此之外还可以实现页签切换等等

组件中当前显示的页面发生变化时，元件的变化通过属性控制这一栏去设置

例如如上设置后，当前元件仅在 Tab1 和 Tab2 两个页面下显示，并且位置是可以不一样的

在我的理解，控制器就是 FGUI 底层支持帮程序做一些 View 上状态的改变

1.4 按钮

按钮看上去很简单，实际上逻辑还是较为复杂

由于任何东西（文字、图片、甚至一块看上去透明的区域）都可以是按钮，触发点击事件，因此按钮在 FGUI 中默认是一个组件

可以通过资源 → 新建按钮来添加按钮组件，FGUI 中对按钮的操作就相当于是对组件的多个控制器进行操作，每个控制器对应按钮的一个状态

一个样例就是页签的制作，步骤如下：

1. 新建一个按钮，模式设置为单选模式，其它不用管：
2. 添加图片或者文本到对应的按钮组件中，并且通过调整属性控制来实现点击（未选中）和按下（选中）的差异化
3. 新建一个有多个页面的组件，每个页面就是一个页签，并将②中的按钮复制多份（数量与页签数量对应，也可以使用列表）拖到这个组件中，或者使用一个按钮列表也可以
4. 修改连接属性，当按钮被点击（选中）时就会切换到指定的页面，搞定！

1.5 关联系统

FGUI 核心系统之二：用于控制元件之间的互动，维护元件之间的关系、可以用于实现 Unity 中的 Layout、锚点布局等多个重要的功能

需要注意的是：列表根据 item 数量动态控制大小的功能目前不好在编辑中实现，可以通过代码中调用 GList.ResizeToFit 接口去修改

二、高级资源

2.1 动画

1. Adobe Animate CC/Flash 等编辑动画、帧动画：直接拖入编辑器，或者通过资源 → 新建动画添加动画序列帧
2. 平移/旋转动画等简单动效：类 Flash 操作界面，设置关键帧即可
3. Spine 骨骼动画

2.2 列表

新建列表后，优先设置列表中显示的单位元件（项目资源），并编辑数据，重点注意下面三项，其它依旧可以参考官方文档

• 溢出处理：可以做到 Unity 的 ScrollView 滚动效果
• 选择模式：像页签这种同时又且有个被选中的状态，就是对应单选模式
• 选择控制：可以绑定一个控制器，这样当列表选中项目发生改变时，控制器也同时跳转到相同索引的页面。反之亦然，如果控制器跳转到某个页面，那么列表也同时选定相同索引的项目

3.3 复合资源

• 下拉框
• 进度条
• 滑动条
• 滚动条

三、编辑器注意事项

3.1 显示列表

 

需要注意的是，虽然点击眼睛按钮可以隐藏元件，但是它仅在编辑器下隐藏，想要游戏中实际隐藏，需要设置基本 → 不可见属性去修改

除此之外有些元件设置了属性控制：只在某些组件页面下显示，为了方便修改和参考可以通过点击左边的第二个眼睛按钮打开以在所有页面下都显示，当然这也是个编辑器操作，实际逻辑上该不显示还是会不显示的

组与高级组：在舞台上选定一个或多个元件，然后按 Ctrl+G，就可以建立一个组，普通组和高级组的作用完全不同，普通组单纯只用于辅助设计，你可以对这些组里的元件做统一的操作，而高级组可以在运行时操作逻辑，例如控制整个组的显隐

3.2 设计图功能

由于新增的组件大部分情况下会是某个组件的子节点，而在编辑该组件时看不到 UI 背景，可以设置设计图，这样就可以有个参照

3.3 资源包管理

所有的包都在资源库中显示，可以进行分类和筛选

对于大型项目，最好将一些常用资源、通用组件放在一些特定的资源包里，通过编辑分组的方式将这些资源包作为公共素材包，后面做实际 UI 的时候，直接引用这些包里面的资源即可，这样减少大量的重复工作

如果想要对应的资源在另一个包里使用，或者能够在代码中动态创建，需要设置资源为导出（已导出的资源的图标右下角有一个小红点）

3.4 打包发布

这一部分可以直接参考官网，想要在游戏中展示 UI 需要对应的 U3D FGUI 运行库：https://github.com/fairygui/FairyGUI-unity/releases

一个完美的设置参考：

对于包设置使用全局配置就好