Laya FairyGui系列一 FairyGui接入_fairygui 资源加载和释放-优快云博客

【公开课 | Unity进阶 | FGUI】国内强大的UI编辑器-FairyGUI

一，什么是FairyGui

FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器，使用习惯与Adobe系列软件保持一致，美术设计师和策划都可以轻松上手。与市场上其他UI编辑器不同...。一堆介绍不抄了，有兴趣得自己去看官网。

我选择FairyGUI的最大的原因就是对策划和美术人员比(zi)较(ji)友(tou)好(lan)，学习成本较低，组件完善，不用任何扩展UI也能实现奇葩的UI需求。预览效果中即可看到按钮的不同状态切换，列表的滚动效果，动效的运行效果等等。

二，获取FGUI以及LayaSDK

FGUI编辑器下载链接。

LayaSDK获取：

从官网下载Laya版本的demo(只有Laya2.0版本的SDK)。
从Github下载Laya版本的demo（可以在分支中选择Laya1.0或者2.0）。

本文主要以Laya2.0为例，某些Laya1.0和2.0不同之处会标注。

三，集成SDK

把上面下载的demo中的libs/fairygui.d.ts，bin/libs/fairygui(Laya1.0还需拷贝bin/libs/rawinflate)拷贝到自己项目的对应文件夹中。
Laya2.0再项目中index.js引入FGUI库：

loadLib('libs/laya.html.js')
loadLib('libs/rawinflate/rawinflate.min.js')
loadLib('libs/fairygui/fairygui.js')

Laya1.0在项目index.html 中引入FGUI库：

<script type="text/javascript" src="libs/rawinflate/rawinflate.min.js"></script >
<script type="text/javascript" src="libs/fairygui/fairygui.js"></script >

运行项目，在控制台中能正确打印 fairygui.GRoot.inst，Laya中集成FGUI就完成了。

四，FGUI 的使用

FGUI的使用比较简单，看看教程即可。
FGUI以包为单位管理资源，使用时可以将包理解为模块，每个模块独立一个包。将发布后的文件拷贝到自己项目的bin/res目录下。
添加FGUI显示列表的根节点到舞台中：

Laya.stage.addChild(fairygui.GRoot.inst.displayObject);

使用发布的资源包

LoadPackageRes(){
    Laya.loader.load([{
        type: Laya.Loader.BUFFER,
        url: 'res/Package1.fui'
    }], Laya.Handler.create(this, () => {
        this.AddPackageRes();
    }))
}

AddPackageRes(){
    fairygui.UIPackage.addPackage('res/Package1');
}

判断资源包有没有被加载：

if(fairygui.UIPackage.addPackage('res/Package1') == null){
    console.log('资源包未已加载');
}

创建组件并显示到舞台上：

const testCom = fairygui.UIPackage.createObject('Package1','com_Test').asCom;
fairygui.GRoot.inst.addChild(testCom );

完整代码：

LoadPackageRes(){
    Laya.loader.load([{
        type: Laya.Loader.BUFFER,
        url: 'res/Package1.fui'
    }], Laya.Handler.create(this, () => {
        this.AddPackageRes();
    }))
}

AddPackageRes(){
    if(fairygui.UIPackage.addPackage('res/Package1') == null){
        console.log('资源包未已加载');
    }
    fairygui.UIPackage.addPackage('res/Package1');
    Laya.stage.addChild(fairygui.GRoot.inst.displayObject);
    const testCom = fairygui.UIPackage.createObject('Package1','com_Test').asCom;
    fairygui.GRoot.inst.addChild(testCom );
}

注：创建项目时注意项目类型选择LayaBox