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的简单介绍
-
BaseUIForm 窗体的基类**
-
UIManager 窗体管理类***
-
UIMaskManager 遮罩管理类 **
-
UIloader 资源加载类 (论坛中其他人写的)
-
GMessageManager 消息委托类
-
cocosHelper 工具类
-
UIType 窗体类型
以上七个类
其中BaseUIForm和UIManager是我们的重点内容,
BaseUIForm 中定义了一些方法 状态相关的
- DisPlay() 显示
- Hiding() 隐藏
- ReDisPlay() 重新显示
- Freeze() 冻结
UIManager 中的重要方法
- ShowUIForms() 显示一个窗体 参数是窗体的名字
- CloseUIForms() 关闭一个窗体
2, step2
打开cocos creator, 新建UIRoot结点 这个结点作为窗体的根结点(名字可以随意取, 但是要在config文件夹中SysDefine进行相应修改)
- NorMal表示 普通的窗体, 一般是登录界面, 之类比较大的窗体
- Fixed 固定窗体 , 比如玩家的个人信息(放在屏幕上方的), 以及一些屏幕下面的一些技能
- 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} = {};
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