前言

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

环境准备

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:会被打成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添加两个组件

Game.Scene.AddComponent<FUIComponent>();
// 这里调用了Model层的FUIPackageComponent来加载默认界面UI资源包(例如登录注册界面)
Game.Scene.AddComponent<FUIInitComponent>().Init();
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官方教程

// FUI包加载和管理组件
Game.Scene.AddComponent<FUIPackageComponent>();
// FUI组件,负责显示和管理UI
Game.Scene.AddComponent<FUIComponent>();
// FUI的初始化组件,主要作用是预加载一个初始界面(例如资源下载更新界面)
Game.Scene.AddComponent<FUIInitComponent>();
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编辑器根目录
文件-项目设置-自定义属性

选择一个包,右键



然后点击发布即可

回到Unity

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


一位梦想成为TA的大学生。