laya fgui 超簡單的UI架構

FairyGUI 超簡單的UI架構

Laya使用fgui的超簡單UI架構

使用場景：用于使用fgui進行layaUI開發的程式人員

整個架構分為3個子產品，共有4個類:

FGUIManager ：FGUI的管理類,繼承于IUIManager 負責所有UI的打開關閉等事項
FUIBase ：UI的管理基類，具體實作
IUIManager ：FGUI的接口類規定管理類的各個方法
UILayerType： UI 層級分類

FGUIManager管理類

import IUIManager from "./IUIManager";
    import { FUIBase } from "./FUIBase";
    import GameEntry from "../../GameEntry";

    /**
    * @ name:FGUIManager
    * @ desc:自動建立說明
    * @ user:By NUOLO
    * @ data: 2021-06-02 18:14
    */
    export default class FGUIManager implements IUIManager {
    /**
    *
    */
    constructor() {
        this.Init();
    }

    Init(): void {
        Laya.stage.addChild(fgui.GRoot.inst.displayObject);		//初始化FGUI
        this.UIroot = fgui.GRoot.inst.displayObject;
        this.UIroot.width = Laya.stage.width;
        this.UIroot.height = Laya.stage.height;
        fgui.UIConfig.packageFileExtension = "fui";			//設定導出檔案的拓展名  代碼預設的拓展名為fui，可能于自身導出的拓展名不同 但最好這樣做因為有些平台隻認這種檔案名
        this.UIDic = {};
    }

        /**
        * UI字典
        */
        UIDic: { [name: string]: FUIBase<fgui.GComponent>};
        
        /**
        * UI的根節點
        */
        private UIroot: Laya.Sprite;
        /**
        * 注入FUIBase 
        */
        RigisterUIBase(name: string, ui: FUIBase<fgui.GComponent>): void {
            if (this.UIDic[name]) {
                console.log(name + "::字段已存在UI界面，請勿重複添加")
                return;
            }
            else {
                this.UIDic[name] = ui;
            }
        }

        CreateOrOpenPanel(name: string, data?:new () => FUIBase<fgui.GComponent> , isCloseOther?: boolean): FUIBase<any> {
        if (!this.UIroot) {
                this.Init();
            }
            if (this.UIDic[name]) {
            return this.OpenPanel(name, isCloseOther);
            }
            else {
                let cla = new data();

                if (fgui.UIPackage.addPackage(data['ResName']) == null) {
                    console.log('資源包未加載,将進行自動加載');
                    fgui.UIPackage.addPackage(data['ResName']);
                }

                // let com = fgui.UIPackage.createObject(data['UIpackName'], data['UIName'], cla.ClassType).asCom;
                let com =  fgui.UIPackage.createObjectFromURL(cla.ClassType.URL,cla.ClassType).asCom ;
                com.name = data['UIName'];
                fgui.GRoot.inst.addChild(com);
                com.makeFullScreen();

                com.sortingOrder = cla.LayerType;
                cla.MUI = com;
                cla.UIMgr = this;
                cla.AutoRigisterToUIManager();
                cla.onAwake();
                cla.onEnable();
                return cla;
            }
        }

        OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any> {
            if (isCloseOther) {
                for (let uiname in this.UIDic) {
                    this.UIDic[uiname].Close();
                }
            }
            if (this.UIDic[name]) {
                let ui = this.UIDic[name];
                ui.Open();
                return ui;
            }
            else {
        
                console.error(name + "::字段在UI字典中不存在，請檢查是否有誤")
                return null;
            }
        }
        ClosePanel(name: string, toOpenWindow?: string): void {
            if (this.UIDic[name]) {
                let ui = this.UIDic[name];
                ui.Close();
                if (toOpenWindow != null) {
                    this.OpenPanel(toOpenWindow);
                }
            }
            else {
                console.log(name + "::字段在UI字典中不存在，請檢查是否有誤")
            }
        }
        CloseAllPanel(): void {
            for (const key in this.UIDic) {
                this.UIDic[key].Close();
            }
        }
        GetUIPanel(name: string): any {
            if (this.UIDic[name]) {
                return this.UIDic[name] ;
            }
            else {
                console.log(name + "::字段在Ui字典中不存在，請檢查")
                return null;
            }
        }
        DestoryUIPanel(name: string) {
            if (this.UIDic[name]) {
                this.UIDic[name].Destory();
            }
            else {
                console.log(name + "::字段在Ui字典中不存在，請檢查")
            }
        }

        
    }

FUIBase

import AssetData from "../../Asset/AssetData";
    import Debug from "../../Debug/Debug";
    import GameEntry from "../../GameEntry";
    import IUIManager from "./IUIManager";
    import { UILayerType } from "./UILayerType";

    /**
    * @ name:FUIBase
    * @ desc:自動建立說明
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:24
    */
    export class FUIBase<T extends fgui.GComponent>  {

        /**需子類設定 導出包的路徑 */
        public static ResName: string = "res/UIVSLoading";
        /**需子類設定 圖集的數量 從0 開始 */
        public static AtliasCount: number = 1;

        public static UIName: string = "1";                     //UI的名字 要存在字典中
        public get UIName(): string { return FUIBase.UIName; }
        public set UIName(v: string) { FUIBase.UIName = v; }

        /** UI的層級  預設0級為最底層 */
        public LayerType: UILayerType = UILayerType.Normal;

        /**fgui 元件 */
        private m_uiComPonent: T;
        public get MUI(): T { return this.m_uiComPonent; }
        public set MUI(v: T) { this.m_uiComPonent = v;  }

        /**fgui 元件 */
        public ClassType: any;
 
        /**UI管理類 */
        private m_uimgr: IUIManager;
        public get UIMgr(): IUIManager { return this.m_uimgr; }
        public set UIMgr(v: IUIManager) { this.m_uimgr = v; }

        /**
        * 自動注冊進UIManager
        */
        public AutoRigisterToUIManager() {
            this.UIMgr.RigisterUIBase(this.UIName, this);
        }


        /**
        * 打開界面
        */
        public Open() {
            this.onEnable();
            this.m_uiComPonent.visible = true;

        }
        /**
    * 關閉界面
    */
        public Close() {
            this.onDisable();
            this.m_uiComPonent.visible = false;
        }

        /**
        * 銷毀界面
        */
        public Destory() {
            this.m_uiComPonent.dispose();
        }

        //#region fgui加載

        /**
        * 擷取目前界面所對應的資源檔案
        * @returns 
        */
        public static GetLoadUIPackDic(): any[] {
            let urls = [];
            urls.push({ url: this.ResName + ".fui", type: Laya.Loader.BUFFER });
            urls.push({ url: this.ResName + "_atlas0.png", type: Laya.Loader.IMAGE });
            //加載紋理集
            if (this.AtliasCount >=1) {
                for (let i = 1; i <= this.AtliasCount; i++) {
                    urls.push({ url: this.ResName + "_atlas0_" + i + ".png", type: Laya.Loader.IMAGE });
                }
            }
            return urls;
        }

        /**
        * 擷取FGUI 二進制檔案路徑
        * @returns 對應路徑
        */
        public static GetUIByte(): string {
            return this.ResName + ".fui";
        }
        /**
        * 加載完成之後 将包添加到fgui包管理中
        */
        public static AddPackage() {
            fgui.UIPackage.addPackage(this.ResName);
        }
        //#endregion


        //#region  功能

        /**
        *  獲得子節點
        * @param path 路徑資訊  s.b.v
        */
        public FindChild<T extends fgui.GObject>(path: String): T {
            return this.m_uiComPonent.getChildByPath(path) as T;
        }

        /**
        * 添加事件監聽
        * @param btn 點選按鈕
        * @param callback 回調
        * @param args 傳遞資料
        */
        public AddLinster(btn: fgui.GObject, callback, ...args) {
            btn.onClick(this, callback, args);
        }

        /**
        * 移除事件監聽
        * @param btn 按鈕
        * @param callback 回調
        */
        public RemoveLinster(btn: fgui.GObject, callback) {
            btn.offClick(btn, callback);
        }
        //#endregion


        //#region 生命流程

        onAwake() {}        //onAwake 建立時調用
        onEnable() {}       //每次打開時調用，可自行拓展打開時的打開效果等功能
        onDisable() {}      //每次關閉時調用，可自行拓展關閉時的 所需調用的功能
        //#endregion
    }

IUIManager

import { FUIBase } from "./FUIBase";

    /**
    * @ name:IUIManager
    * @ desc:UI管理類的接口
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:14
    */
    export default interface IUIManager {
        
        /**
        * 初始化
        */
        Init():void

        /**
        * UI字典
        */
        UIDic: { [name: string]: FUIBase<any> };

        /**
        * 注入FUIBase 
        */
        RigisterUIBase(name: string, ui: FUIBase<any>): void;
        
        /**
        * 自動建立 或者打開 界面 注意：建立UI是異步操作的
        * @param name 名字
        * @param isCloseOther 是否關閉其他界面
        * @param data 資料
        */
        CreateOrOpenPanel(name: string, data?:any, isCloseOther?: boolean ): FUIBase<any>

        /**
        * 打開UI界面
        * @param name 要打開界面的名字
        * @param isCloseOther 是否關閉其他界面 預設否
        */
        OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any>;

        /**
        * 關閉UI界面 
        * @param name 要關閉UI界面的名字
        * @param TOOpen 關閉此界面後要打開的界面的名字  預設無  不打開其他界面
        */
        ClosePanel(name: string,toOpenWindow?:string): void;
        /**
        * 關閉所有UI界面
        */
        CloseAllPanel(): void;
        /**
        * 根據辨別符擷取FUIBase
        * @param name 辨別符
        */
        GetUIPanel(name: string):any;

        /**
        * 銷毀UIPanel
        * @param name 辨別符
        */
        DestoryUIPanel(name: string);

    }

UILayerType

/**
    * @ name:UILayerType
    * @ desc:UI 層級分類
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:55
    */
    export  enum UILayerType {
    //普通窗體
    Normal=0,
    //固定窗體
    Fixed=20,
    //彈出窗體
    PopUp = 50,
    //提示窗體
    Tip = 40,
    }

架構就分為這4個類使用的話就每個UI界面都繼承 FUIBase<具體fgui導出的UI類>

并重寫參數

如例子：

fgui 導出檔案為  Package1.fui
                Package1Binder.ts
                UI_Component1.ts
                Package1Binder.ts

建立一個ShowUI 的腳本 繼承與FUIBase <UI_Component1>

示例 ShowUI類

import { FUIBase } from "../Core/UI/FGUI/FUIBase";
    import { UILayerType } from "../Core/UI/FGUI/UILayerType";
    import Package1Binder from "./Package1/Package1Binder";
    import UI_Component1 from "./Package1/UI_Component1";


    /**
    * @ name:ShowUI
    * @ desc:UI的控制類 
    * @ user:By NUOLO
    * @ data: 2021-06-09 11:00
    */
    export default class ShowUI extends FUIBase <UI_Component1>{


        public static ResName: string = "res/FGUI/Package1";    //路徑
        public static AtliasCount: number = 0;                  //圖集數量 從0開始
        public static UIName: string = "1";                     //名稱
        constructor() {
            super();
            this.LayerType = UILayerType.Normal;                //設定層級
            this.ClassType = UI_Component1;                     //設定UI所對應的類，，确定好再填
            Package1Binder.bindAll();                           //UI綁定類
        }

        
        onAwake() {
            super.onAwake();
        }
        onEnable() {
            super.onEnable();
        }
        onDisable() {
            super.onDisable();
        }
    }

示例調用方法

onConfigLoaded(): void {
        //加載IDE指定的場景
        //  GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
        this.openFGUI();
    }
    openFGUI() {
        let uimagr = new FGUIManager();			//初始化UI管理類

        //打開界面
        Laya.loader.create(ShowUI.GetLoadUIPackDic(), Laya.Handler.create(this, () => {
            uimagr.CreateOrOpenPanel(ShowUI.UIName, ShowUI);
        }));
    }

整個調用過程都很簡單，代碼邏輯也很明了，自己正在使用中

如果有更好的方法和更優雅的寫法，也請通過郵件聯系我，共同學習一下，多謝！

個人部落格位址 https://nuolo.xyz

laya fgui 超簡單的UI架構

FairyGUI 超簡單的UI架構

繼續閱讀

【Laya】發送和接收事件

學習 Layabox 遇到的異常以及解決方案！

unity程式員轉Laya入門(2) UI-Button綁定事件建立按鈕按鈕綁定腳本

laya-zip讓你的遊戲加載速度提升插件

細述Cocos Creator Shader與材質，能看完的都說好！

Laya學習筆記

你要找的cocos面試答案都在這裡了！

LayaBox List使用記錄建立增加修改滾動

Laya暫停

laya3d系列——如何用vscode編譯laya項目

laya3d版本的捕魚源碼

laya 阿拉丁自定義統計

Laya shader opengles 2.0 第一章-飄揚的旗幟 gitee代碼

Laya2踩坑日志-1

LayaBox學習記錄（不定時更新ing~）

Laya的骨骼換裝