本文章已于2021.8.31更新，新增为ET6.0而生的FGUI插件（Lua版本）安装与配置相关教程

本文章已于2021.1.29更新，新增为ET5.0而生的FGUI插件（Lua版本）安装与配置相关教程

环境准备

FairyGUI

官网：http://www.fairygui.com
编辑器下载：http://www.fairygui.com/product/
官方教程：http://www.fairygui.com/guide/

开发工具

Unity 2017.4
Rider 2018.3

ET5.0

感谢有招小弟的大佬吗的大力支持

Duke大佬的FairyGUI分支

链接：https://github.com/DukeChiang/DCET

Unity项目结构梳理

Hotfix部分
Asset/Bundles/FUI/Common_atlas0.png:会被打成AB包的FGUI图片资源（AB标签：Common.unity3d）
Asset/Bundles/FUI/Common_fui.bytes：会被打成AB包的FGUI布局数据（AB标签：Common_fui.unity3d）
Asset/Hotfix/Module/FairyGUI/AutoGeneratedCode:由FGUI编辑器生成的代码（Duke大佬写的插件）
Asset/Hotfix/Module/FairyGUI/Core：Hotfix层使用FGUI所必须的代码
Asset/Hotfix/Module/FairyGUI/Logic：UI逻辑
Model部分
Asset/Resources/FUI/Model_atlas0.png:处于Resources中的资源，不能被热更，建议只放检查资源更新界面UI
Asset/Resources/FUI/Model_fui.bytes：处于Resources中的资源，不能被热更，建议只放检查资源更新界面UI布局数据
Asset/Resources/FZXuanZhenZhuanBianS-R-GB：FGUI所用到的字体资源
Asset/Model/Module/FairyGUI/AutoGeneratedCode：由FGUI编辑器生成的代码（原生）
Asset/Model/Module/FairyGUI/Core：Model层使用FGUI所必须的代码
Asset/Model/Module/FairyGUI/Logic：UI逻辑

Hotfix实例化FGUI

先给ETHotfix.Game.Scene添加两个组件

1
2
3
Game.Scene.AddComponent<FUIComponent>();
// 这里调用了Model层的FUIPackageComponent来加载默认界面UI资源包（例如登录注册界面）
Game.Scene.AddComponent<FUIInitComponent>().Init();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
namespace ETHotfix
{
    [Event(EventIdType.InitSceneStart)]
	public class InitSceneStart_CreateLoadingUI : AEvent
	{
        public override void Run()
        {
			// 创建ui实例，这里的UI使用了模板生成，可以当做ET中的Component使用
            var fui = FUILoading.CreateInstance();
            // 默认将会以Id为Name，也可以自定义Name，方便查询和管理
            fui.Name = FUILoading.UIResName;
            fui.MakeFullScreen();
            Game.Scene.GetComponent<FUIComponent>().Add(fui, true);
        }
    }
}

Model实例化FGUI

建议单独为每个FUI做一个Component，其中只需要缓存自动生成代码里的类就可以了，比如这里是FUILoading，自动生成代码里有FUILoading这个类，我们需要新建一个FUILoadingComponet类
里面写上public FUILoading m_FUILoading，之后就和ET里正常UGUI一样的流程了，组件的获取上面多看看FGUI官方教程

1
2
3
4
5
6
// FUI包加载和管理组件
Game.Scene.AddComponent<FUIPackageComponent>();
// FUI组件，负责显示和管理UI
Game.Scene.AddComponent<FUIComponent>();
// FUI的初始化组件，主要作用是预加载一个初始界面（例如资源下载更新界面）
Game.Scene.AddComponent<FUIInitComponent>();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
namespace ETModel
{
    [Event(EventIdType.LoadingBegin)]
    public class CheckForUpdateBeginEvent_CreateCheckForUpdateUI: AEvent
    {
        public override void Run()
        {
			// 创建一个FUI实例
            FUI fui = ComponentFactory.Create<FUI, GObject>(FUILoading.CreateInstance());
			// 为这个实例赋予Name
            fui.Name = "Laoding";
			// 全屏显示（FairyGUI官方推荐显示方式）
            fui.MakeFullScreen();
			// 加入FUIComponent的Root中，显示这个FUI
            Game.Scene.GetComponent<FUIComponent>().Add(fui);
        }
    }
}

完整工作流（SWC-ET5.0）

打开FairyGUI编辑器

它位于Unity/FairyGUI-Editor中
如果要使用新版，可以把FairyGUI-Editor/plugins和template文件夹复制到自己的FairyGUI编辑器根目录
文件-项目设置-自定义属性

选择一个包，右键

然后点击发布即可

完整工作流（Lua-ET5.0）

随着FGUI的更新换代，2020版的FGUI插件已经支持Lua编写，甚至在笔者更新这篇文章的时候已经支持ts编写插件了，但是我个人目前只更新到了Lua版本的插件。

首先大家可以去 https://github.com/wqaetly/FGUI2ET 下载的为ET5定做的FGUI插件

然后将FGUI插件复制到自己FGUI工程根目录的plugins文件夹中（如果没有请新建）

ET6.0

完整工作流（Lua-ET6.0）

因为项目升级到ET6.0，所以索性重写了一版FGUI代码导出插件，可前往 https://github.com/wqaetly/FGUI2ET 下载，如果感觉有困惑可以前往 https://github.com/wqaetly/ET 查看使用示例

如果想学习FGUI插件开发的，我也写了一篇FGUI插件开发指南，可以看下

新版的Lua插件抛弃了FGUI编辑器中复杂的代码生成配置，自己在Lua中做好了配置，并且支持自定义修改

配置文件位于 /插件目录/CodeGenConfig.lua

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---@class CodeGenConfig 代码生成配置
local GenerateHotfixCodeConfig = {
    --- 热更代码配置
    --- 热更层命名空间
    HotfixNameSpace = "ET",
    --- 热更层代码输出目录
    HotfixCodeOutPutPath = "../../Unity/Assets/ModelView/Demo/FGUI/AutoGeneratedCode/",

    --- 非热更代码配置
    --- 非热更层命名空间
    ModelNameSpace = "ET",
    --- 非热更层代码输出目录
    ModelCodeOutPutPath = "../../Unity/Assets/Mono/Demo/AutoGeneratedCode/",
    
    --- 代码裁剪，即是否为默认名称对象生成获取代码，如果为true，代表不会生成，否则会生成，注意如果开启可能会导致需要导出的类也没有导出的情况
    CodeStrip = false,
    
    --- 组件名前缀
    ClassNamePrefix = "FUI_",
    --- 成员名前缀
    MemerVarNamePrefix = "m_"
}

return GenerateHotfixCodeConfig

需要注意的是，其中相对路径的含义是相对于FGUI编辑器路径的（因为插件的寄居主体是FGUI编辑器），例如有以下目录结构

1
2
3
4
5
6
7
8
9
10
11
ET // ET项目目录
--FGUIProject //FGUI目录
----FGUIEditor //FGUI编辑器
----FGUIFiles //FGUI工程文件
------plugins //FGUI插件目录
--------NKGCodeGenForET6 //具体插件
--Unity
----Asset
------Model
--------FUI
----------AutoGeneratedCode

如果我们想把代码生成到FUI/AutoGeneratedCode文件夹下，就需要这样填写路径

1
"../../Unity/Assets/Model/FUI/AutoGeneratedCode/"

在FGUI编辑器中的配置，注意图中代码生成部分的路径配置是无效的，只是为了能够绕过FGUI的导出保护机制，实际导出路径还是以我们Lua文件配置为准，我们只需要配置资源导出路径和决定是否勾选 为本包生成代码 即可

因为我们所有配置都在Lua里写好了，所以只需要勾选 允许发布代码即可，其余的一律留空，否则会出现兼容问题

然后是路径说明

Mono层

ET6使用Mono作为非热更层，既然非热更了我们就把FGUI资源放在Resources目录中（热更新界面，Loading界面等）

与之前ET不同的是Mono层没有任何ET组件，所以需要我们自己写一套逻辑来加载FGUI，核心逻辑依旧是三步走

1
2
3
4
UIPackage.AddPackage
BindAll
CreateInstance
GRoot.inst.AddChild

Hotfix层

由于Hotfix层由Model，ModelView，Hotfix，HotfixView组成，所以需要细分下目录功能

  • Model && Hotfix：与FGUI无关，是纯业务逻辑
  • ModelView：FGUI热更层框架和代码生成目录
  • HotfixView：FGUI热更层Component管理和具体的逻辑处理