Egret5.0使用FairyGUI教程（各种坑点）

下载FairGUI-egret SDK

https://github.com/fairygui/FairyGUI-egret 

导入fairygui库（坑点）

将bin目录下文件保存到 项目根目录/libs/fairygui/目录下

将libs目录下文件保存到 项目根目录/libs/rawinflate/目录下 

注意如果rawinflate 目录下没有rawinflate.js，则复制rawinflate.min.js保存为rawinflate.js

（egret在本地调试调用的是.js文件，如果不存在则会报错，未找到Zlib库）



在egretProperties.json文件中添加（重点）

{
"name": "rawinflate",
"path": "./libs/rawinflate"
},
{
"name": "fairygui",
"path": "./libs/fairygui"
}

测试UI案例

将导出的资源添加到resource/fairygui/目录下



修改default.res.json文件,导出的图片文件注意TankGame@atlas0命名规范

{
"groups": [
{
"keys": "TankGame,TankGame@atlas0",
"name": "preload"
}
],
"resources": [
{
"name": "TankGame",
"type": "bin",
"url": "fairygui/TankGame.fui"
},
{
"name": "TankGame@atlas0",
"type": "image",
"url": "fairygui/TankGame@atlas0.png"
}
]
}

修改Main.ts文件

protected startCreateScene(): void {
fairygui.UIPackage.addPackage("TankGame")
this.addChild(fairygui.GRoot.inst.displayObject)
let uiPanel = new UIPanel()
}

class UIPanel {
private root: fairygui.GComponent;

public constructor() {
this.root = fairygui.UIPackage.createObject("TankGame","Main").asCom;
this.root.setSize(fairygui.GRoot.inst.width,fairygui.GRoot.inst.height)
fairygui.GRoot.inst.addChild(this.root)
}
}

演示效果