一，什么是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')

引入库列表.png

• 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.getById("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.getById("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

01.png

PS：第一次写文章，文笔不好，不喜勿喷。谢谢！