Fairy下载和使用

写在最前：本系列中将会涉及到 Unity，C#，Lua和FairyGUI（FGUI）。

FairyGUI介绍

官网： FairyGUI

编辑器下载： FairyGUI

截至文档记录最新版： https://res.fairygui.com/FairyGUI-Editor_2022.1.0p1.zip

编辑器使用教程： FairyGUI

Unity版教程配套示例资源下载：

Master：https://github.com/fairygui/FairyGUI-unity/archive/refs/heads/master.zip

Release：https://github.com/fairygui/FairyGUI-unity/archive/refs/tags/4.3.0.zip

FairyGUI是游戏开发领域中制作UI的一个利器。它支持Unity，Cocos2dx，Egret，LayaAir，Cocos Creator等，基本上国内主流的引擎都支持了。而且使用FGUI编辑器制作UI的效率非常高，它有很多独特的功能，比如控制器，关联系统，分包，分支等，全部零代码，方便策划或者美术快速上手搭建UI。

获取FairyGUI Unity SDK

        下载配套的示例资源并解压到合适的位置。使用Unity打开示例demo，工程Unity版本：2018.4.29f1，建议使用对应Unity的版本或更高的版本打开。我手头目前使用的是Unity2021.3.26f1。打开后可以看到如下图所示的目录结构：

        将“Extensions”，“Resources”和“Scripts”拷贝到自己项目Assets下的一个空文件夹下如“FGUI”，即可为自己的项目引入FairyGUI库。

注意：FairyGUI支持TextMeshPro，所以在“FairyGUI-TMP.shader”文件中要注意“TextMesh Pro Shaders”的引用。

FairyGUI编辑器的概念词

1、包：FairyGUI是以包为单位组织资源的。包在文件系统中体现为一个目录。assets目录下每个子目录都表示一个包。默认情况下包和包之间无法建立依赖关系，需要包下面的资源设置为“导出”，才可以被其他包使用。包的定义

2、舞台：舞台是组件的编辑区域。中间区域就是舞台

 

3、元件：每个舞台中的组成元素我们称之为元件，元件的类型有很多，他们是：

• 基础元件：图片、图形、动画、装载器、文本、富文本、组、组件。
• 组合型元件：标签、按钮、下拉框、滚动条、滑动条、进度条。
• 特殊元件：列表。
• 在舞台上选中任意一个元件，右边的属性栏（检测器）会出现当前元件的属性数据。元件详情

4、组件：组件是FairyGUI中的一个基础容器。组件可以包含一个或多个基础显示对象（元件），也可以包含组件。组件详情

• 组件的创建：在资源库中右键“xx包”，即可在当前包下面创建组件。

5、右键导出：资源库中的资源设置为导出后，才能被其他包引用，以及在代码中动态的获取。设置为导出的资源会有红点提示。右键导出

6、发布：发布有三种方式：全部发布，仅发布定义和发布。全部发布和发布就字面意思，发布全部包和发布当前活跃包。而当资源越来愈多的时候，一个包的发布时间会越来越长，这时如果我们只是修改了界面参数，那就可以使用仅发布定义来跳过资源纹理集的重新生成。这样子可以提高发布速度。详情在主工具栏

7、更多的请阅读更加具体的编辑器使用教程

创建Unity工程

1、创建一个Unity，导入FairyGUISDK。

注意：在导入FairyGUISDK后如果出现Shader报错，请检查“Window→TextMeshPro”是否存在，如果不存在尝试导入TextMeshPro支持库。

如果存在，请尝试查找工程中是否存在“TMPro_Properties”文件，找不到的话请执行“Window→TextMeshPro→Import TMP Essential Resources”，之后修改报错的位置，将TMPro_Properties和TMPro的引用指向正确位置。

FairyGUI项目创建、配置和发布

1、下载并解压FairyGUI编辑器，双击“FairyGUI-Editor.exe”打开。

 

2、（可选）点击“文件→切换颜色空间”，将UI编辑器的颜色空间和引擎中的设置一样。Linear 和 Gamma 两种，后面也可以切换。

3、点击“创建新项目”，会弹出创建项目窗口，这里可以设置项目的名字、位置和类型。这里我使用的引擎是Unity，项目位置建议放置到工程的Assets同级目录中，方便后期管理。点击“创建”进入正式的UI编辑窗口中。

 4、编辑窗口中，“资源库”存放所有的资源和UI，毕竟UI也是资源。资源库中默认会有个“Package1”包，“Package1”包下存在一个被导出的组件“Component1”。按照项目的习惯重命名包和组件。比如我习惯在组件名字前使用UI来表示这个组件是UI界面，Comp开头表示这是个UI中的自定义组件需要代码操作，其他命名则为默认，之后的发布代码插件会详细说明。这里使用Test作为测试示例。

改之前的：

改之后的：

 5、点击“文件→发布设置”菜单，可以设置项目资源包的发布路径，发布路径分为包设置和全局设置，包设置中可以为当前选中活跃包设置单独的发布路径，默认“使用全局配置”。

 

6、点击“全局设置”。

        发布路径中支持相对路径，如果你的FGUI工程和Assets同级目录，那你的发布路径可以设置为“../Assets/UI存放路径”，这时候点击发布或全部发布，就可以在你UI存放路径的文件夹下发现一堆FGUI生成出来的二进制文件和相关的纹理集等，UI存放路径根据自己的项目文件结构来。这里我测试在Resources下新建一个UI文件夹来存放所有的UI，发布路径：../Assets/Resources/UI

        发现一堆资源后，想将一堆的资源按包分类可以在发布路径后面加{publish_file_name}，这时候再次点击发布后，生成文件就会按钮当前文件所在的包进行划分。发布路径：../Assets/Resources/UI/{publish_file_name}

注意：发布出来的资源只会同名覆盖，而不会删除。也就是说如果文件A被你在FGUI工程中删除了，之前在UI存放路径下的文件A还是存在的。

 7、回到Unity中，在“Hierarchy”面板中右键点击“FairyGUI→UI Panel”，创建UI面板。

 8、选中UIPanel，点击“Inspector”面板中的“Package Name”会出现之前导出的UI资源，依次点选“Test”和“UITest”后点击OK即可在场景中查看UITest。

注意：

1、如果这时候Game窗口出现了双重UI，请检查是否有多个相机同时渲染了UI层级。建议使用默认FairyGUI相机“Stage Camera”渲染UI即可。

2、如果Game窗口没有显示UI，运行后也没有显示，则排查一下UI界面是否有内容显示，以及当前Unity版本中是否需要将UI相机加入到主相机的“Stack”列表中。

这篇文章只是粗略的概括一下FGUI的UI导出和展示流程，详细的UI制作可以查看编辑器使用教程