FairyGUI官网:https://www.fairygui.com/
FairyGUI版本:2022.1.0p1
cocos版本:2.4.4
Laya收购了FairyGUI,看到某些公司也有在使用,下载下来看看。
FairyGUI优点:
1.提供了更丰富的组件。比cocos自带组件要多,例如虚拟列表
2.一套UI多个游戏引擎可用。比如unity做手游,cocos发小游戏平台的。或者玩多个平台的游戏开发者,只学fairygui不用再去细学每个引擎的UI了。
3.drawcall优化方案。采用矩形碰撞判断组件是否遮挡,调整深度排序,尽量将同纹理的图片摆在一起,减少dc数。
4.多国语言和分支。根据语言类型替换文本和图片,而且在编辑UI时就能看到显示效果。
下载FairyGUI
https://www.fairygui.com/download
绿色版,不需要安装,在这个编辑器下编辑UI。
发现个bug输入法不能打字,必须将编辑器置于后台,然后再置于前台才能打字。
下载FairyGUI的演示Demo
https://github.com/fairygui/FairyGUI-cocoscreator
可以看看fairygui都支持哪些UI,大致心里有个数,可以看到就是游戏中常用的UI。
cocos到现在都没有官方的虚拟列表...
在cocos中使用fairygui运行库
新建一个cocos空项目,把从github上下载的demo中fairygui运行库复制到新项目中。
可以看到这个库有将近800kb,构建项目发布后有350kb左右。
在cocos中选择fairygui.js,在属性面板勾选允许编辑器加载。
在vscode中输入fgui有提示,则表示导入成功了。
使用FairyGUI编辑一个简单页面
创建了一个登录页,比较简单,只有背景、开始按钮、版本文本。
编辑后,发布得到两个文件,图片已经自动合图了。
将这2个文件放入cocos中
代码中创建这个登录页
onLoad() { //创建UI根节点 fgui.GRoot.create(); //加载UI包 fgui.UIPackage.loadPackage("UI/Login", function (err) { let view: fgui.GComponent = fgui.UIPackage.createObject("Login", "LoginScene").asCom; fgui.GRoot.inst.addChild(view); }); }
显示效果
获取组件通过getchild获取
const { ccclass, property } = cc._decorator; @ccclass export default class MainScene extends cc.Component { onLoad() { //创建UI根节点 fgui.GRoot.create(); //加载UI包 fgui.UIPackage.loadPackage("UI/Login", function (err) { let view: fgui.GComponent = fgui.UIPackage.createObject("Login", "LoginScene").asCom; fgui.GRoot.inst.addChild(view); //按钮 view.getChild("startBtn").onClick(() => { console.log("点击开始"); }, this); //文本 view.getChild("verLab").asTextField.text = "v1.2.3"; }); } }
到此一个简单的fairygui界面就制作完成了... ...