【学习】FairyGUI试用

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界面就制作完成了... ...　

 

　

 

 

 

 

搜索

复制