TGX联机对战框架 easy_ui_framework

Cocos小书包

已于 2024-01-12 18:50:25 修改

阅读量460

点赞数 10

分类专栏： TGX联机对战框架文章标签： cocos2d 游戏引擎

于 2024-01-12 17:45:09 首次发布

本文链接：https://blog.csdn.net/m0_46320670/article/details/135558747

版权

TGX联机对战框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一 UILayers

定义了Layer名称

enum UILayers {
    GAME,
    JOY_STICK,
    HUD,
    POPUP,
    POPUP1,
    POPUP2,
    ALERT,
    NOTICE,
    LOADING,
    OVERLAY,
    NUM
}
const UILayerNames = [
    'game',
    'joy_stick',
    'hud',
    'popup',
    'popup1',
    'popup2',
    'alert',
    'notice',
    'loading',
    'overlay'
];

二、UIController

在这里插入图片描述

UIController的功能有点类似this.node.on(TouchType,method, this)，起到了桥接事件监听与事件调用的作用

调用：由实现类提供，以UIEnterRoom为例，onButtonEvent()中的匿名方法就是事件的回到函数

protected onCreated(): void {
    let layout = this.layout as Layout_UIEnterRoom;
    this.onButtonEvent(layout.btnClose, () => {
        this.close();
    });
	this.onButtonEvent(layout.btnEnter, this.onBtnCreateClicked, this);
}

桥接：btn.clickEvents = clickEvents可以理解为this.node.on()，而clickEvenets包含了上述的回调函数，即cb

// 事件监听
// 可以理解为 this.node.on(...)
onButtonEvent(){
     ...;
    let agent = this.node.getComponent(__NodeEventAgent__);
    let btn = buttonNode.getComponent(Button);
    let clickEvents = btn.clickEvents;
    let handler = new EventHandler();
    handler.target = this.node;
    handler.component = 'tgxNodeEventAgent';
    handler.handler = 'onButtonClicked';
    handler.customEventData = '' + UIController._idBase++;
    //附加额外信息 供事件转发使用
    handler['$cb$'] = cb;
    handler['$target$'] = target;
    handler['$args$'] = args;
    btn.clickEvents = clickEvents;
}

#三、 __NodeEventAgent__

实现了事件分发，UIController中注册了一堆事件的监听，NodeEventAgent通过h.customEventData筛选出事件对应的回调

onButtonClicked(evt: EventTouch, customEventData) {
    ...;
    for (let i = 0; i < clickEvents.length; ++i) {
        if (h.customEventData == customEventData) {
            let cb = h['$cb$'];
            let target = h['$target$']
            let args = h['$args$'];
            cb.apply(target, [btn, args]);
        }
    }
    ...;
}