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

 

　

 

 

 

 

搜索

復制