一常侦，什么是FairyGui
FairyGUI(下面簡稱FGUI)提供了一個強(qiáng)大的UI編輯器，使用習(xí)慣與Adobe系列軟件保持一致贬媒，美術(shù)設(shè)計師和策劃都可以輕松上手聋亡。與市場上其他UI編輯器不同...。一堆介紹不抄了际乘，有興趣得自己去看官網(wǎng)坡倔。
我選擇FairyGUI的最大的原因就是對策劃和美術(shù)人員比(zi)較(ji)友(tou)好(lan)，學(xué)習(xí)成本較低脖含，組件完善罪塔，不用任何擴(kuò)展UI也能實現(xiàn)奇葩的UI需求。預(yù)覽效果中即可看到按鈕的不同狀態(tài)切換养葵，列表的滾動效果征堪，動效的運(yùn)行效果等等，
二关拒，獲取FGUI以及LayaSDK
FGUI編輯器下載鏈接佃蚜。
LayaSDK獲取：
- 從官網(wǎng)下載Laya版本的demo(只有Laya2.0版本的SDK)着绊。
- 從Github下載Laya版本的demo（可以在分支中選擇Laya1.0或者2.0）谐算。
本文主要以Laya2.0為例，某些Laya1.0和2.0不同之處會標(biāo)注
三归露，集成SDK
- 把上面下載的demo中的libs/fairygui.d.ts洲脂，bin/libs/fairygui(Laya1.0還需拷貝bin/libs/rawinflate)拷貝到自己項目的對應(yīng)文件夾中。
- 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>
- 運(yùn)行項目靶擦，在控制臺中能正確打印 fairygui.GRoot.inst腮考，Laya中集成FGUI就完成了雇毫，
四玄捕，F(xiàn)GUI 的使用
- FGUI的使用比較簡單，看看教程即可棚放。
- FGUI以包為單位管理資源枚粘，使用時可以將包理解為模塊，每個模塊獨(dú)立一個包飘蚯。將發(fā)布后的文件拷貝到自己項目的bin/res目錄下馍迄。
- 添加FGUI顯示列表的根節(jié)點(diǎn)到舞臺中：
Laya.stage.addChild(fairygui.GRoot.inst.displayObject);
- 使用發(fā)布的資源包
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('資源包未已加載')
}
- 創(chuàng)建組件并顯示到舞臺上:
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);
}
注：創(chuàng)建項目時注意項目類型選擇LayaBox
01.png
PS：第一次寫文章，文筆不好局骤，不喜勿噴攀圈。謝謝！
