本文章已于2021.1.29更新,新增新版FGUI插件(Lua版本)安装与配置相关教程。TS版本将在未来放出。

前言

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

环境准备

FairyGUI

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

Duke大佬的FairyGUI分支

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

开发工具

Unity 2017.4
Rider 2018.3

正式开始

Unity项目结构梳理

Hotfix部分
Asset/Bundles/FUI/Common_atlas0.png!webp:会被打成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!webp:处于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);
}
}
}

完整工作流(老版本)

打开FairyGUI编辑器

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


选择一个包,右键



然后点击发布即可

完整工作流(新版本)

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

首先大家可以去 https://github.com/DukeChiang/FGUI2ET 下载由Duke大佬提供的最新的FGUI插件

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

例如我有一个NKGMoba项目(一个FGUI项目,不是Unity项目),这个插件所在目录就是:(图中插件大家也可以直接从我Moba项目中获取 https://gitee.com/NKG_admin/NKGMobaBasedOnET/tree/master/FGUIProject/NKGMoba/plugins )

image-20210129221021569

随后打开FGUI编辑器即可启用插件

image-20210129223609524

然后设置方面的内容其实比之前还要简单一些,不需要设置自定义属性了

image-20210129221500798

回到Unity

在Bundles下面设置FUI相关标签,图片资源为不带_fui后缀,布局文件带_fui后缀
这里举例为Common
那么Common_atlas0AB标签为common.untiy3d
Common_fui标签为common_fui.unity3d
更多加载详情请查看
ETModel.FUIPackageComponent