cocos creator中使用UI框架(一)

cocos creator中使用UI框架SUIFW

已上传到github https://github.com/kirikayakazuto/UIFrameWorld  满意请点个星星  谢谢

简单的UI框架

 

1, Step1

首先进入我的github中, 下载项目 https://github.com/kirikayakazuto/UIFrameWorld

将其中的UIFrame文件夹导入到你的Cocos creator中

UIFrame的简单介绍

1. BaseUIForm 窗体的基类**

2. UIManager    窗体管理类***

3. UIMaskManager 遮罩管理类 **

4. UIloader 资源加载类    (论坛中其他人写的)

5. GMessageManager 消息委托类

6. cocosHelper    工具类

7. UIType   窗体类型

以上七个类

   其中BaseUIForm和UIManager是我们的重点内容, 

BaseUIForm 中定义了一些方法 状态相关的

1. DisPlay() 显示
2. Hiding() 隐藏
3. ReDisPlay() 重新显示
4. Freeze() 冻结

UIManager 中的重要方法

1. ShowUIForms()  显示一个窗体 参数是窗体的名字
2. CloseUIForms() 关闭一个窗体

2, step2

打开cocos creator,  新建UIRoot结点 这个结点作为窗体的根结点(名字可以随意取, 但是要在config文件夹中SysDefine进行相应修改)

1. NorMal表示 普通的窗体, 一般是登录界面, 之类比较大的窗体
2. Fixed 固定窗体 , 比如玩家的个人信息(放在屏幕上方的), 以及一些屏幕下面的一些技能
3. PopUp 弹窗, 比如玩家网络不好, 弹出一个窗口提示, 以及一些物品介绍的弹窗

2, step3

 创建一个窗体保存为Prefab

创建一个同名脚本, 将其挂载到MainPanel上

打开MainPanel.ts文件, 修改其继承类为BaseUIForm

在onload中设置窗体类型

import BaseUIForm from "../UIFrame/BaseUIForm";
import { UIFormShowMode } from "../UIFrame/config/SysDefine";

const {ccclass, property} = cc._decorator;

@ccclass
export default class MainPanel extends BaseUIForm {


    onLoad () {
        this.CurrentUIType.UIForms_ShowMode = UIFormShowMode.HideOther;
        
    }
}

配置config中的ConfigUIFrame.ts中的UIFormPathConfig的对应路径

最后调用 UIManager的ShowUIForms方法

/**
     * 窗口生命周期
     */
    public OpenUIForm(uiFormName: string) {
        UIManager.GetInstance().ShowUIForms(uiFormName);
    }

/**

this.OpenUIForm("MainPanel")

*/

4, Step4

窗体间的消息传递, 为了让两个窗体间的耦合度降低, 我们不直接采取方法调用的方式传递消息, 而是用一个全局唯一的GMessageManager类来处理消息

GMessageManager就是一个增强版的 订阅 - 发布模式 , 普通的订阅 - 发步模式是 :

窗体一订阅一条消息, 窗体二发布一条消息, 如果窗体一订阅了该信息, 那么将消息转发给窗体一

而我们这个对功能进行了一些加强, 就是如果窗体一没有订阅该消息, 将此消息保存在内存中(类似qq的离线消息), 当窗体一某个时候订阅该消息(玩家上线了), 就将该内存中的消息发给窗体一(玩家收到其他人的离线消息), 并将消息清除

/**
 * 消息代理类
 */
export default class GMessageManager {

    private static _eventMap: {[key: string]: Array<ElementEvent>} = {};
    private static _eventMsg: {[key: string]: any} = {};

    public static emit(eventName: string, parameter: any) {
        let array = this._eventMap[eventName];
        if(array === undefined) {       // 没有 人监听
            this._eventMsg[eventName] = parameter;  // 缓存消息
            return ;
        }
        for(let i=0; i<array.length; i++) {
            let element = array[i];
            if(element) element.callback.call(element.target, parameter);
        }
        
    }

    public static on(eventName: string, callback: Function, target: any) {
        if(this._eventMap[eventName] === undefined) {
            this._eventMap[eventName] = [];
        }
        this._eventMap[eventName].push({callback: callback, target: target});

        if(this._eventMsg[eventName]) {     // 有缓存消息
            this.emit(eventName, this._eventMsg[eventName]);
            this._eventMsg[eventName] = null;
            delete this._eventMsg[eventName];
        }
    }

    public static off(eventName: string, callback: Function, target: any) {
        let array = this._eventMap[eventName];
        if(array === undefined) return ;
        for(let i=0; i<array.length; i++) {
            let element = array[i];
            if(element && element.callback === callback && element.target === target) {
                array[i] = undefined;
                break;
            }
        }
    }
}
export class ElementEvent {
    callback: Function;
    target: any;
}