Laya开发-FairyGui使用

xzhuan原创稿件,转载请注明出处!

1. FairyGui简介
   FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器，使用习惯与Adobe系列软件保持一致，美术设计师和策划都可以轻松上手。更多介绍 请参考官网

2. 集成SDK

这里使用的LayaAir IDE2.10
git上下载Laya sdk  FairyGui 2.0
2.1 下载的demo中
libs/fairygui.d.ts
bin/libs/fairygui
拷贝到自己项目对应文件夹
注意: Laya1.0 还需拷贝bin/libs/rawinflate

2.2 Laya2.0 项目
bin/index.js引入FGUI库

loadLib("libs/laya.html.js")
注意: 尽量不要放在
//-----libs-begin-----
//-----libs-end-------
注释中间，因为会被ide'项目设置-类库设置'所覆盖
loadLib("libs/fairygui/rawinflate.min.js");// 如果勾选了不压缩，这个库不需要
loadLib("libs/fairygui/fairygui.js");// 只依赖laya.core,laya.html两个模块

2.3 Laya1.0 项目
bin/index.html引入FGUI库

<!--如果勾选了不压缩，这个库不需要-->
<script type="text/javascript" src="libs/fairygui/rawinflate.min.js"></script>
<!--只依赖laya.core,laya.html两个模块-->
<script type="text/javascript" src="libs/fairygui/fairygui.js"></script>

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

3. FGUI使用

3.1 初始化
Laya.stage.addChild(fgui.GRoot.inst.displayObject)
3.2 使用发布的资源包
资源包目录 
bin/res/MainMenu.fui
bin/res/MainMenu_atlas0.png

方式1 fgui API
           fgui.UIPackage.loadPackage("res/MainMenu", Laya.Handler.create(this, ()=>
           {
               if(fairygui.UIPackage.getById("res/MainMenu")!=null)
               {
                   console.log("资源已加载")
               }
               fairygui.UIPackage.addPackage("res/MainMenu")
               let view = fairygui.UIPackage.createObject("MainMenu", "Main").asCom
               view.makeFullScreen()
               fairygui.GRoot.inst.addChild(view)
           }))

方式2 Laya API
           Laya.loader.load([{type:Laya.Loader.IMAGE, url:"res/MainMenu_atlas0.png"},
{type:Laya.Loader.BUFFER, url:"res/MainMenu.fui"}], Laya.Handler.create(this,()=>
           {
               if(fairygui.UIPackage.getById("res/MainMenu")!=null)
               {
                   console.log("资源已加载")
               }
               fairygui.UIPackage.addPackage("res/MainMenu")
               let view = fairygui.UIPackage.createObject("MainMenu", "Main").asCom
               view.makeFullScreen()
               fairygui.GRoot.inst.addChild(view)
           }))

注意：使用Laya API加载 不会自动加载依赖资源