By

文章目录
  1. 1. 前言
    1. 1.1. FGUI
    2. 1.2. FGUI使用
      1. 1.2.1. 包
        1. 1.2.1.1. 包的定义
        2. 1.2.1.2. 包的依赖
        3. 1.2.1.3. 资源URL地址
      2. 1.2.2. 发布
      3. 1.2.3. 元件
        1. 1.2.3.1. GObject
        2. 1.2.3.2. GComponent
        3. 1.2.3.3. 图片
      4. 1.2.4. 动画
      5. 1.2.5. 骨骼动画
      6. 1.2.6. 图形
      7. 1.2.7. 装载器
      8. 1.2.8. 3D内容装载器
      9. 1.2.9. 文本
      10. 1.2.10. 富文本
      11. 1.2.11. 输入文本
      12. 1.2.12. 字体
      13. 1.2.13. 组
      14. 1.2.14. 组件
      15. 1.2.15. 滚动容器
    3. 1.3. 控制器
    4. 1.4. 关联系统
    5. 1.5. 标签
    6. 1.6. 按钮
    7. 1.7. 下拉框
    8. 1.8. 进度条
    9. 1.9. 滑动条
    10. 1.10. 滚动条
    11. 1.11. 列表
  2. 2. FGUI设计
    1. 2.1. 显示UI面板
  3. 3. Reference

前言

本章节博客是在项目需要使用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项目(创建新项目->输入新项目名称以及选择位置)

FGUIProjectsCapture

FGUIProjectsStructure

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

项目设置参考这里

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

包

包的定义

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

包的依赖

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

资源URL地址

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

Note:

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

发布

FGUIPublicInterface

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

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

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

FGUIPublishAssets

Note:

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

元件

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

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

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

Note:

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

GObject

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

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

GComponent

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

图片

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

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

PictureResourceExport

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

一份为包的二进制资源

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的组有两种类型，普通组和高级组。

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

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

组件

组件是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

文章目录
  1. 1. 前言
    1. 1.1. FGUI
    2. 1.2. FGUI使用
      1. 1.2.1. 包
        1. 1.2.1.1. 包的定义
        2. 1.2.1.2. 包的依赖
        3. 1.2.1.3. 资源URL地址
      2. 1.2.2. 发布
      3. 1.2.3. 元件
        1. 1.2.3.1. GObject
        2. 1.2.3.2. GComponent
        3. 1.2.3.3. 图片
      4. 1.2.4. 动画
      5. 1.2.5. 骨骼动画
      6. 1.2.6. 图形
      7. 1.2.7. 装载器
      8. 1.2.8. 3D内容装载器
      9. 1.2.9. 文本
      10. 1.2.10. 富文本
      11. 1.2.11. 输入文本
      12. 1.2.12. 字体
      13. 1.2.13. 组
      14. 1.2.14. 组件
      15. 1.2.15. 滚动容器
    3. 1.3. 控制器
    4. 1.4. 关联系统
    5. 1.5. 标签
    6. 1.6. 按钮
    7. 1.7. 下拉框
    8. 1.8. 进度条
    9. 1.9. 滑动条
    10. 1.10. 滚动条
    11. 1.11. 列表
  2. 2. FGUI设计
    1. 2.1. 显示UI面板
  3. 3. Reference