前言

本章节博客是在项目需要使用FGUI的前提下，驱动深入学习FGUI的使用的。关于FGUI个人的认知还停留在第三方跨平台跨引擎制作UI的工具的层面上，接下来还是遵循老规矩从What,Why,How三个步骤来一步一步深入学习FGUI。

FGUI

什么是FGUI了？

FGUI全称是FairyGUI。官方的介绍是:专业游戏 UI 解决方案从对设计师友好的编辑器 到支持 10+ 款引擎的 SDK 助力您生产力翻倍

为什么要选择FGUI了？

从官网的介绍可以看出，使用FGUI有以下几个好处:

1. 跨平台，多引擎支持(意味着一套UI多处使用)
2. 内部支持的多国语言
3. 高性能DralCall合并优化机制
4. 丰富的UI库(跨平台的UI组件库—省去了从零造UI轮子的功夫)

接下来就是学习如何使用FGUI了？

这里依然选择从官网教程入手:

编辑器使用基础

FGUI使用

第一步：

下载FGUI编辑器

第二步:

创建第一个FGUI项目(创建新项目->输入新项目名称以及选择位置)

编辑器的基础使用参考这里

项目设置参考这里

接下来学习下FGUI里总要的一些独有概念：

包

包的定义

FairyGUI是以包为单位组织资源的。包在文件系统中体现为一个目录。assets目录下每个子目录都表示一个包。**包内的每个资源都有一个是否导出的属性，一个包只能使用其他包设置为已导出的资源，而不设置为导出的资源是不可访问的。

包的依赖

FairyGUI是不处理包之间的依赖关系的，如果B包导出了一个元件B1，而A包的A1元件使用了元件B1，那么在创建A1之前，必须保证B包已经被载入，否则A1里的B1不能正确显示（但不会影响程序正常运行）。这个载入需要由开发者手动调用，FairyGUI不会自动载入。

资源URL地址

在FairyGUI中，每一个资源都有一个URL地址。选中一个资源，右键菜单，选择“复制URL”，就可以得到资源的URL地址。无论在编辑器中还是在代码里，都可以通过这个URL引用资源。

Note:

1. URL有两种格式(一种是不可读的一个编码，另一种是ui://包名//资源名)

发布

可以看到FGUI发布是针对前面设定的包的概念来发布的，可以发布一个包也可以发布所有包。发布里面还有很多设置，比如对纹理图片的导出设置等，具体后续用到详细研究详情参考:发布

这里主要说下发布代码这个设置，看介绍是一个FGUI提供的组件绑定代码自动化生成机制。

FGUI发布后会得到一个*_fui.bytes的二进制文件:

Note:

1. 当我们载入包时，需要使用这里设定的文件名，而当创建对象时，需要使用包名称

元件

每个舞台中的组成元素我们称之为元件

元件的类型有很多，他们是:

1. 基础元件(图片，图形，动画，装载器，文本，富文本，组，组件)
2. 组合型元件(标签，按钮，下拉框，滚动条，滑动条，进度条)
3. 特殊元件(列表)

Note:

1. 关联系统只对元件的宽高有效，不计入Scale的影响
2. 设置元件的倾斜值。 对于Unity平台，你可以放心地对图片、动画、装载器使用倾斜，这几乎不会带来额外消耗，但对于其他类型的元件，例如组件，请谨慎使用
3. BlendMode这个提供了一部分的混合选项设置。对于Unity平台，对图片、动画、文字，你可以放心地修改它们的BlendMode。但对于组件，请谨慎使用。滤镜设置同理。

GObject

FGUI里大部分元件类的基类。个人理解是元件的根Object抽象。

关键元件的位置，缩放，旋转，可见，大小等设置接口都在这个类里。

GComponent

与Unity里的Component组件不同。个人理解更像是一种包含关系的Component而非GameObject那种绑定Component概念。

图片

可以理解成Unity里导入图片资源，然后可以对图片资源的大小，是否切九宫，纹理集导出设置等进行设置。

设置图片资源为导出后，发布包会看到生成了两份数据:

一份为图片资源导出后的图集资源

一份为包的二进制资源

GImage是图片对应FGUI里的类型，类似Unity的Image，相关设置接口都在GImage类里。

Note:

1. FairyGUI支持的图片格式有：PNG，JPG，TGA，SVG。
2. 默认导入的图片是没有标记小红点的也就是默认不导出的，这里需要选中后右键设置为导出，最后导出包的时候才会导出资源。(只有导出后的资源才允许被其他包使用)

动画

FGUI支持三种方式创建动画，详情参考：动画

这里主要学习直接在FGUI里创建动画的方式：

1. 资源-> 新建动画
2. 导入序列帧图片资源
3. 设置动画属性参数

动画文件对应FGUI里的GMoviewClip类，相关API参考GMoviewClip源码

骨骼动画

暂时略过

图形

FairyGUI支持生成简单的图形。

多边形图形编辑支持直接操作顶点。

图形的主要用途是用于占位，支持设置绑定原生对象(e.g. Image)

图形对应FGUI里的GGraph类，相关API参考GGraph源码

Note:

1. 图形支持动态创建，动态创建图形需要注意一定要设置图形的大小，否则显示不出来。

装载器

装载器的用途是动态载入资源。

装载器对应FGUI里的GLoader类，相关API参考GLoader源码。

GLoader可以载入图片、动画和组件。如果是UI包里的资源，那么通过“ui://包名/图片名”这种格式的地址就可以载入。

FGUI支持了我们自定义装载器实现自定义加载，详情参考官网:装载器

Note:

1. 默认的GLoader具有有限度的的加载外部资源的能力，详情参考参考官网说明
2. GLoader不管理外部对象的生命周期，不会主动销毁自定义加载的外部资源需要自行管理

3D内容装载器

3D内容装载器的用途是动态载入比较复杂的资源，例如骨骼动画、模型（暂未支持）、粒子特效（暂未支持）等。

暂时略过

文本

文本是FairyGUI的基础控件之一。文本不支持交互，鼠标/触摸感应是关闭的。

文本对应FGUI里的GTextField类，相关API参考GTextField源码。

使用文本模板可以更灵活的动态调整文本输出。解决文本占位输出问题。比如我的元宝:{jin=100}金{yin=200}银。勾选文本模板即可通过直接更新关键字数值即可。

事例:

1

aTextField.SetVar("jin", "500").SetVar("yin", "500").FlushVars();

Note:

1. 设置文本支持UBB语法。使用UBB语法可以使单个文本包含多种样式，例如字体大小，颜色等。请参考UBB语法。
2. 文本模板优先于UBB解析

富文本

富文本与普通文本的区别在于：

1. 普通文本不支持交互，鼠标/触摸感应是关闭的；富文本支持。
2. 普通文本不支持链接和图文混排；富文本支持。
3. 普通文本不支持HTML语法（但可以使用UBB实现不同样式）；富文本支持。

富文本对应FGUI里的GRichTextField类，相关API参考GRichTextField源码。

输入文本

输入文本元件用于接收用户输入文字。

输入文本对应FGUI里的GTextInput类，相关API参考GTextInput源码。

Note:

1. 设置文本支持UBB语法。

字体

FairyGUI支持3种字体的使用方式:

1. 系统字体
2. TTF字体
3. 位图字体

Note:

1. 无论字体是否设置为导出，它都不会被发布。UI包发布后，引用此字体资源的文本元件的字体名称是该字体的资源名字。
2. FairyGUI内置支持使用TextMeshPro插件。

组

在舞台上选定一个或多个元件，然后按Ctrl+G，就可以建立一个组。 FairyGUI的组有两种类型，普通组和高级组。

• 普通组

  普通组仅在编辑时有效，是辅助你进行UI设计的。普通组发布后不存在，也就是在运行时无法访问到普通组。

  普通组作用:

  1. 可以整体一起移动；
  2. 可以整体一起调整深度；
  3. 可以整体复制和粘贴。
  4. 双击组，进入组内部后，可以随意调整各个元件的深度，不影响组外的东西。
  5. 当组大小改变时，组内的内容将同时增大或者缩小。

• 高级组

  高级组除了具有普通组所有的功能外，它在发布后仍然保留，也就是在运行时可以通过代码访问高级组对象。所以它可以像一个普通元件那样设置关联和属性控制。

  高级组作用:

  1. 可以设置可见性。如果组不可见，则组内的所有元件均不可见。
  2. 设置属性控制。高级组支持的属性控制有：显示控制，位置控制，大小控制。
  3. 设置关联。
  4. 设置布局。

个人觉得FGUI里的组类似Unity里的父节点，同时高级组实现了一些类似Layout排版组件的布局效果以及其他特殊控制效果。

高级组对应FGUI里的GGroup类，相关API参考GGroup类源码。

组件

组件是FairyGUI中的一个基础容器。组件可以包含一个或多个基础显示对象，也可以包含组件。

• 自定义属性

  当组件被拖入到到其他组件后，能通过检查器设置的属性一般是固定的，例如一个按钮，我们可以改变它的标题、图标、是否选中等，这些都是编辑器提供的固定属性。但如果我在按钮中放置了额外的文本或者装载器，而且需要设定他们在实例化后的属性时，就需要用自定义属性，将组件的子元件甚至更深层次的元件的属性暴露出来。

• 自定义数据

  可以设置一个自定义的数据，这个数据FairyGUI不做解析，按原样发布到最后的描述文件中。开发者可以在运行时获取。

设计图功能是为了快速拼出效果图要的效果。

点击穿透设置可以快速将点击事件向后传递。

点击测试用于不规则区域的点击响应。

遮罩FGUI里分两种：

• 矩形遮罩

• 自定义遮罩

扩展功能，选择哪种“扩展”，组件就有了那种扩展的属性和行为特性。

组件对应FGUI里的GComponent类，相关API详情参考GComponent源码。

动态创建的组件是空组件，可以作为其他组件的容器。一个常见的用途，如果你要建立一个多层的UI管理系统，那么空组件就是一个合适的层级容器选择。

Note:

1. 动态创建的组件默认是点击穿透的，也就是说如果直接new一个空组件作为接收点击用途，你还得有额外设置
2. 在FairyGUI中，显示列表是以树形组织的，下面说的渲染顺序均指在同一个父元件下安排的顺序，不同父元件的元件是不可能互相交错的，这是前提，请注意。
3. GObject.sortingOrder。**这个属性只用于特定的用途，不作常规的使用。它一般用于类似固定置顶的功能，另外，永远不要将sortingOrder用在列表中。

滚动容器

滚动容器对应FGUI里的ScrollPane类，相关API详情参考ScrollPane源码。

……

控制器

控制器是FairyGUI核心功能之一，它为UI制作中以下类似需求提供了支持：

• 分页 一个组件可以由多个页面组成。
• 按钮状态 按钮通常有按下、鼠标悬浮等多个状态，我们可以利用控制器为每个状态安排不同的显示内容。
• 属性变化 利用控制器，我们可以使元件具有多个不同的形态，并且可以方便地切换。

这里提到了一个重要的概念:分页。

控制器的概念是基于分页的，意思就是通过设计控制的页面的控制效果，我们可以提前做好多个页面效果，运行时只需切页来达到对应效果即可。

显示控制-2一般和显示控制搭配使用，它可以实现两个控制器控制一个元件显隐的需求。特别还提供了一个逻辑关系的选项，可以选择“与”或者“或”。

控制器可以很方便实现类似Button多种点击状态以及Toggle选中和未选中效果(程序只需负责切页即可，所有显示效果在FGUI编辑器里定义好)。

比如单选按钮就是通过多个单选按钮配合多个页面控制+按钮联动实现的。

这里的控制器相当于把操作表现流程放到UI制作流程里了(不得不说FGUI确实对于UI制作流有很大好处，部分逻辑都不再需要程序自行编写了)

滚动容器对应FGUI里的Controller类，相关API详情参考Controller源码。

关联系统

关联系统是FairyGUI实现自动布局的核心技术。其他UI框架提供的布局系统，一般只提供各种固定的layout，或者锚点，都只能定义元件与容器之间的关系。而FairyGUI的关联能够定义任意两个元件的关系，而且互动方式更多样。

FGUI的关联系统，个人理解更偏向于美术的概念，而非传统程序锚点的概念，左左，左右，右左这些都是显示知名两个Component的位置关系。

标签

标签对应FGUI里的GLabel类，相关API详情参考GLabel源码。

Note:

1. 标签里title和icon是两个特殊的名字，FGUI设置标签文本和图表会快速查找对应名字作为对应组件。

按钮

标签对应FGUI里的GButton类，相关API详情参考GButton源码。

……

下拉框

下拉框对应FGUI里的GComboBox类，相关API详情参考GComboBox源码。

……

进度条

进度条对应FGUI里的GProgressBat类，相关API详情参考GProgressBar源码。

……

滑动条

滑动条对应FGUI里的GSlider类，相关API详情参考GSilder源码。

……

滚动条

与很多UI框架使用皮肤机制定义滚动条不同，在FairyGUI中，滚动条是可以随心设计的。
滚动容器和滚动条是独立的，也就是说，即使没有滚动条，滚动容器也能完成滚动的功能。
注意：滚动条不能直接拖到舞台上使用，永远不要这样做。

滚动条对应FGUI里的GScrollBar类，相关API详情参考GScrollBar源码。

Note:

1. 运行时滚动条组件的类型是GScrollBar，但你不需要访问GScrollBar对象。所有滚动相关的操作都通过ScrollPane完成

列表

滚动条对应FGUI里的GList类，相关API详情参考GList源码。

这是我们游戏中会比较常用的组件，FGUI的列表已经实现了数据与渲染分离(虚拟列表)，也实现了列表所需的几乎所有需求(e.g. 动态大小，动态魔板，循环列表，滚动到指定单元格等)

详情参考:FGUI列表

Note:

1. 不允许使用AddChild或RemoveChild对虚拟列表增删对象。如果要清空列表，必须要通过设置numItems=0，而不是RemoveChildren。

FGUI设计

显示UI面板

待续……

Reference

FGUI