/** @format */ /** * UIManager界面管理类 * * 1.打开界面,根据配置自动加载界面、调用初始化、播放打开动画、隐藏其他界面、屏蔽下方界面点击 * 2.关闭界面,根据配置自动关闭界面、播放关闭动画、恢复其他界面 * 3.切换界面,与打开界面类似,但是是将当前栈顶的界面切换成新的界面(先关闭再打开) * 4.提供界面缓存功能 * */ import {BaseUI, UIShowTypes} from '../ui/BaseUI' import {IUIConfig, UICfg} from '../config/UICfg' import {ccUtils} from '../utils/ccUtils' import {UI} from '../enums/UI' import {Data, Mgr} from '../GameControl' import {IOperateNeed} from '../interface/GlobalInterface' import {IMessage, IReward, IRewardNty, ItemUICfg} from '../interface/UIInterface' import {SOUND} from '../enums/Sound' import {GOODS} from '../enums/Enum' import {TopCell} from '../cell/TopCell' import {FootCell} from '../cell/FootCell' /** UI栈结构体 */ export interface UIInfo { uiID: number baseUI: BaseUI uiArgs: any uiCfg: IUIConfig preventNode?: cc.Node aniNode?: cc.Node zOrder?: number isClose?: boolean hideTime?: number prefab?: cc.Prefab } export interface GroupUIInfo { uiID: number uiArgs?: any } export class UIManager { /** 是否正在关闭UI */ private isClosing = false /** 是否正在打开UI */ private isOpening = false /** UI界面缓存(key为UIId,value为BaseUI节点)*/ private UICache: {[UIId: number]: UIInfo} = {} /** UI界面栈({UIID + BaseUI + UIArgs}数组)*/ private UIStack: UIInfo[] = [] /** UI待打开列表 */ private UIOpenQueue: UIInfo[] = [] /** UI待关闭列表 */ private UICloseQueue: number[] = [] /** UI配置 */ private releaseTimeID: any /** 打开一组UI */ private groupUIs: GroupUIInfo[] = [] private curGroupUI: GroupUIInfo = null public prefabBundle: cc.AssetManager.Bundle = null /** UI打开前回调 */ public uiOpenBeforeDelegate: (uiID: number, preUIId: number) => void = null /** UI打开回调 */ public uiOpenDelegate: (uiID: number, preUIId: number) => void = null /** UI关闭回调 */ public uiCloseDelegate: (uiID: number) => void = null private topNode: cc.Node private footNode: cc.Node public async init() { if (this.releaseTimeID) clearInterval(this.releaseTimeID) this.releaseTimeID = setInterval(this.cleanUI.bind(this), 15000) Data.main.texBundle = await ccUtils.getBundleAsync('texture') this.prefabBundle = await ccUtils.getBundleAsync('prefab') //加载全局通用预制体 let itemsPrefabArr = (await Mgr.res.loadDirSync(this.prefabBundle, 'items', cc.Prefab)) as cc.Prefab[] for (let j = 0; j < itemsPrefabArr.length; j++) { Data.main.itemsPrefabMap.set(itemsPrefabArr[j].name, itemsPrefabArr[j]) let pool = Data.main.itemsPoolMap.get(itemsPrefabArr[j].name) if (!pool) { pool = new cc.NodePool() Data.main.itemsPoolMap.set(itemsPrefabArr[j].name, pool) } } //顶部预制体 let topPrefab = (await Mgr.res.loadSync(this.prefabBundle, 'cell/topCell', cc.Prefab)) as cc.Prefab this.topNode = cc.instantiate(topPrefab) //底部预制体 let footPrefab = (await Mgr.res.loadSync(this.prefabBundle, 'cell/footCell', cc.Prefab)) as cc.Prefab this.footNode = cc.instantiate(footPrefab) return this.prefabBundle != null } /****************** 私有方法,UIManager内部的功能和基础规则 *******************/ /** * 添加防触摸层 * @param zOrder 屏蔽层的层级 */ private preventTouch(zOrder: number) { let node = new cc.Node() node.name = 'preventTouch' node.setContentSize(cc.winSize) node.on( cc.Node.EventType.TOUCH_START, (event: cc.Event.EventCustom) => { event.stopPropagation() }, node, ) let child = cc.director.getScene().getChildByName('Canvas') child.addChild(node, zOrder) return node } /** 自动执行下一个待关闭或待打开的界面 */ private autoExecNextUI() { // 逻辑上是先关后开 if (this.UICloseQueue.length > 0) { let closeUI = this.UICloseQueue[0] this.UICloseQueue.splice(0, 1) this.hide(closeUI) } else if (this.UIOpenQueue.length > 0) { let uiQueueInfo = this.UIOpenQueue[0] this.UIOpenQueue.splice(0, 1) this.show(uiQueueInfo.uiID, uiQueueInfo.uiArgs) } } /** * 自动检测动画组件以及特定动画,如存在则播放动画,无论动画是否播放,都执行回调 * @param aniName 动画名 * @param aniOverCallback 动画播放完成回调 */ private autoExecAnimation(baseUI: BaseUI, aniName: string, aniOverCallback: () => void) { // 暂时先省略动画播放的逻辑 let node = baseUI.node switch (aniName) { case 'uiOpen': if ( baseUI.showType >= UIShowTypes.UIAddition && ![UI.LoadingUI, UI.TipUI, UI.PowerUpUI, UI.GameLoadingUI].includes(baseUI.uiID) ) { Mgr.audio.playSFX(SOUND.uiPop) node.setScale(0) node.opacity = 0 cc.tween(node) .to(0.3, {scale: 1.1}, {easing: 'backOut'}) // 缩放动作,0.3秒内从 0 缩放到 1,使用 backOut 缓动效果 .to(0.3, {opacity: 255}) // 渐显动作,0.1秒内从透明度 0 到 255 .union() .to(0.1, {scale: 1}) // 缩小一点,形成回弹效果 .call(aniOverCallback) .start() } else { aniOverCallback() } break case 'uiClose': aniOverCallback() break } } /** * 异步加载一个UI的prefab,成功加载了一个prefab之后 * @param uiID 界面id * @param processCallback 加载进度回调 * @param completeCallback 加载完成回调 * @param uiArgs 初始化参数 */ private getOrCreateUI( uiID: number, processCallback: any, completeCallback: (baseUI: BaseUI, prefab?: cc.Prefab) => void, uiArgs: any, ): void { // 如果找到缓存对象,则直接返回 let baseUI: BaseUI let cacheUIInfo = this.UICache[uiID] if (cacheUIInfo) { completeCallback(cacheUIInfo.baseUI) return } // 找到UI配置 let uiPath = UICfg.get(uiID).url if (null == uiPath) { cc.log(`getOrCreateUI ${uiID} faile, prefab conf not found!`) completeCallback(null) return } this.prefabBundle.load(uiPath, cc.Prefab, processCallback, (err: Error, prefab: cc.Prefab) => { // 检查加载资源错误 if (err) { cc.error(`getOrCreateUI loadRes ${uiID} faile, path: ${uiPath} error: ${err}`) completeCallback(null) return } // 检查实例化错误 let uiNode: cc.Node = cc.instantiate(prefab) if (null == uiNode) { cc.error(`getOrCreateUI instantiate ${uiID} faile, path: ${uiPath}`) completeCallback(null) cc.assetManager.releaseAsset(prefab) return } // 检查组件获取错误 baseUI = uiNode.getComponent(BaseUI) if (null == baseUI) { cc.error(`getOrCreateUI getComponent ${uiID} faile, path: ${uiPath}`) uiNode.destroy() completeCallback(null) cc.assetManager.releaseAsset(prefab) return } baseUI.uiID = uiID baseUI.init(uiArgs) completeCallback(baseUI, prefab) }) } /** * UI被打开时回调,对UI进行初始化设置,刷新其他界面的显示,并根据 * @param uiID 哪个界面被打开了 * @param baseUI 界面对象 * @param uiInfo 界面栈对应的信息结构 * @param uiArgs 界面初始化参数 */ private onUIOpen(uiID: number, baseUI: BaseUI, uiInfo: UIInfo, uiArgs: any) { if (null == baseUI) { return } // 激活界面 uiInfo.baseUI = baseUI baseUI.node.active = true let realZIndex = uiInfo.zOrder + baseUI.showType baseUI.node.zIndex = realZIndex if (baseUI.prevent) { let blockInputEvents = baseUI.node.getChildByName('blockInputEvents') if (!blockInputEvents) { blockInputEvents = new cc.Node() blockInputEvents.name = 'blockInputEvents' blockInputEvents.setContentSize(cc.winSize) blockInputEvents.addComponent(cc.BlockInputEvents) baseUI.node.addChild(blockInputEvents, -9999) } // 这里直接给node添加BlockInputEvents导致子节点setSwallowTouches无法吞噬,改成上面的实现方式 // baseUI.node.setContentSize(cc.winSize) // if (!baseUI.node.getComponent(cc.BlockInputEvents)) baseUI.node.addComponent(cc.BlockInputEvents) } // 快速关闭界面的设置,绑定界面中的background,实现快速关闭 if (baseUI.quickClose) { let backGround = baseUI.node.getChildByName('background') if (!backGround) { backGround = new cc.Node() backGround.name = 'background' backGround.setContentSize(cc.winSize) baseUI.node.addChild(backGround, -1) } backGround.targetOff(cc.Node.EventType.TOUCH_START) backGround.on( cc.Node.EventType.TOUCH_START, (event: cc.Event.EventCustom) => { event.stopPropagation() this.hideBaseUI(baseUI) }, backGround, ) } // 添加到场景中 let child = cc.director.getScene().getChildByName('Canvas') child.addChild(baseUI.node) // 从那个界面打开的 let fromUIID = 0 if (this.UIStack.length > 1) { fromUIID = this.UIStack[this.UIStack.length - 2].uiID } // 打开界面之前回调 if (this.uiOpenBeforeDelegate) { this.uiOpenBeforeDelegate(uiID, fromUIID) } // 执行onOpen回调 下一帧执行保证onLoad onEnable先执行 baseUI.scheduleOnce(() => { if (!uiInfo.isClose && baseUI.node.activeInHierarchy) baseUI.onShow(uiArgs, fromUIID) }) this.autoExecAnimation(baseUI, 'uiOpen', () => { baseUI.onOpenAniOver() if (this.uiOpenDelegate) { this.uiOpenDelegate(uiID, fromUIID) } }) } /** 打开界面并添加到界面栈中 */ public show(uiID: number, uiArgs: any = null, progressCallback: Function = null): void { let uiInfo: UIInfo = { uiCfg: UICfg.get(uiID), uiID: uiID, uiArgs: uiArgs, baseUI: null, } if (this.isOpening || this.isClosing) { // 插入待打开队列 let openIndex = this.UIOpenQueue.findIndex(item => item.uiID == uiID) if (openIndex >= 0) this.UIOpenQueue.splice(openIndex, 1) this.UIOpenQueue.push(uiInfo) return } let uiInfoTmp = this.getUIInfo(uiID) if (uiInfoTmp) { // 重复打开了同一个界面 this.hide(uiID) this.show(uiID, uiArgs) return } // 设置UI的zOrder uiInfo.zOrder = this.UIStack.length this.UIStack.push(uiInfo) // 先屏蔽点击 uiInfo.preventNode = this.preventTouch(10000) this.isOpening = true // 预加载资源,并在资源加载完成后自动打开界面 this.getOrCreateUI( uiID, progressCallback, (baseUI: BaseUI, prefab: cc.Prefab): void => { if (uiInfo.preventNode) { uiInfo.preventNode.destroy() uiInfo.preventNode = null } // 如果界面已经被关闭或创建失败 if (uiInfo.isClose || null == baseUI) { cc.log(`getOrCreateUI ${uiID} faile! close state : ${uiInfo.isClose} , baseUI : ${baseUI}`) this.isOpening = false return } if (prefab) uiInfo.prefab = prefab this.onUIOpen(uiID, baseUI, uiInfo, uiArgs) this.isOpening = false this.autoExecNextUI() }, uiArgs, ) } /** 显示一组UI */ showUIs(UIs: GroupUIInfo[]) { if (!UIs) return UIs = UIs.filter(value => value) if (UIs.length <= 0) return this.groupUIs = UIs this.curGroupUI = this.groupUIs.splice(0, 1)[0] this.show(this.curGroupUI.uiID, this.curGroupUI.uiArgs) } /** 替换栈顶界面 */ public replace(uiID: number, uiArgs: any = null) { this.hideBaseUI(this.UIStack[this.UIStack.length - 1].baseUI) this.show(uiID, uiArgs) } /** * 关闭当前界面 * @param closeUI 要关闭的界面 */ public hideBaseUI(closeUI?: BaseUI) { let uiCount = this.UIStack.length if (uiCount < 1 || this.isClosing || this.isOpening) { if (closeUI) { // 插入待关闭队列 let closeIndex = this.UICloseQueue.findIndex(v => v == closeUI.uiID) if (closeIndex >= 0) this.UICloseQueue.splice(closeIndex, 1) this.UICloseQueue.push(closeUI.uiID) } return } let uiInfo: UIInfo if (closeUI) { let isSplice = false for (let index = this.UIStack.length - 1; index >= 0; index--) { let ui = this.UIStack[index] if (ui.baseUI === closeUI) { uiInfo = ui isSplice = true this.UIStack.splice(index, 1) break } } if (isSplice) this.resetUIStackZIndex() // 找不到这个UI if (uiInfo === undefined) { let index = this.UIOpenQueue.findIndex(value => value.uiID == closeUI.uiID) if (index >= 0) { this.UIOpenQueue.splice(index, 1) } this.autoExecNextUI() return } } else { uiInfo = this.UIStack.pop() } // 关闭当前界面 let uiID = uiInfo.uiID let baseUI = uiInfo.baseUI uiInfo.isClose = true // 回收遮罩层 if (uiInfo.preventNode) { uiInfo.preventNode.destroy() uiInfo.preventNode = null } if (null == baseUI) { return } this.isClosing = true let preUIInfo = null for (let i = uiCount - 2; i >= 0; i--) { if (this.UIStack[i] && this.UIStack[i].baseUI.showType == baseUI.showType) { preUIInfo = this.UIStack[i] break } } let close = () => { this.isClosing = false // 显示之前的界面 if (preUIInfo && preUIInfo.baseUI && preUIInfo.baseUI.node.activeInHierarchy) { // 回调onTop onTop只是当前层级生效 preUIInfo.baseUI.onTop(uiID) } if (this.uiCloseDelegate) { this.uiCloseDelegate(uiID) } this.releaseUI(uiInfo) baseUI.onHide() this.autoExecNextUI() if (this.groupUIs.length > 0) { this.curGroupUI = this.groupUIs.splice(0, 1)[0] this.show(this.curGroupUI.uiID, this.curGroupUI.uiArgs) } } // 执行关闭动画 this.autoExecAnimation(baseUI, 'uiClose', close) } /** * 关闭当前界面 * @param uiID 要关闭的界面 */ public hide(uiID: UI) { let uiCount = this.UIStack.length if (uiCount < 1 || this.isClosing || this.isOpening) { if (uiID) { // 插入待关闭队列 const openIndex = this.UIOpenQueue.findIndex(v => v.uiID == uiID) if (openIndex != -1) { this.UIOpenQueue.splice(openIndex, 1) } else { this.UICloseQueue.push(uiID) } } return } if (this.getUI(uiID)) this.hideBaseUI(this.getUI(uiID)) } /** 关闭所有界面 */ public closeAll(remainUIs: UI[] = []) { // 不播放动画,也不清理缓存 let remainUIInfo = [] for (const uiInfo of this.UIStack) { if (remainUIs.includes(uiInfo.uiID)) { remainUIInfo.push(uiInfo) continue } uiInfo.isClose = true if (uiInfo.preventNode) { uiInfo.preventNode.destroy() uiInfo.preventNode = null } if (uiInfo.baseUI) { //uiInfo.baseUI.decAllRef() this.releaseUI(uiInfo) uiInfo.baseUI.onHide() } } this.UIOpenQueue = [] this.UICloseQueue = [] this.UIStack = remainUIInfo this.resetUIStackZIndex() this.isOpening = false this.isClosing = false this.curGroupUI = null this.groupUIs = [] } releaseUI(uiInfo: UIInfo) { let baseUI = uiInfo.baseUI baseUI.node.parent = null this.UICache[uiInfo.uiID] = uiInfo if (!baseUI.cache) { uiInfo.hideTime = Date.now() } } cleanUI() { let now = Date.now() for (let key in this.UICache) { let uiInfo = this.UICache[key] if (uiInfo) { let node = uiInfo.baseUI.node let hideTime = uiInfo.hideTime let prefab = uiInfo.prefab if (!node.parent && hideTime > 0 && now - hideTime > 15000 && !this.isClosing && !this.isOpening) { console.log('UIMgr releaseUI:', node.name) uiInfo.baseUI.decAllRef() node.destroy() cc.assetManager.releaseAsset(prefab) delete this.UICache[key] } } } } resetUIStackZIndex() { for (let i = 0; i < this.UIStack.length; i++) { let uiInfo = this.UIStack[i] uiInfo.zOrder = i uiInfo.baseUI.node.zIndex = i + uiInfo.baseUI.showType } } /******************** UI的便捷接口 *******************/ //可能存在当时UI正在加载node,没有baseUI,顶层不是那么精确 public isTopUI(uiID, isCurLayer: boolean = true): boolean { let curUIs = this.UIStack let uiInfo = curUIs.find(v => v.uiID == uiID) if (!uiInfo) return false if (uiInfo && isCurLayer) { curUIs = this.UIStack.filter(v => v.baseUI && uiInfo.baseUI && v.baseUI.showType == uiInfo.baseUI.showType) } return curUIs[curUIs.length - 1]?.uiID == uiID } public getUI(uiID: number): BaseUI { for (let index = 0; index < this.UIStack.length; index++) { const element = this.UIStack[index] if (uiID == element.uiID) { return element.baseUI } } return null } //返回uiID,可能存在当时UI正在加载node,没有baseUI public getTopUI(): number { if (this.UIStack.length > 0) { return this.UIStack[this.UIStack.length - 1].uiID } return null } public getUIInfo(uiID: number): UIInfo { for (let index = 0; index < this.UIStack.length; index++) { let element = this.UIStack[index] if (uiID == element.uiID) { return element } } return null } public getGroupUIInfo(uiID: number, args?: any): GroupUIInfo { return {uiID, uiArgs: args} } public getRewardGroupUIInfo(rewardNty: IRewardNty): GroupUIInfo | null { let hasReward = false for (let key in rewardNty) { hasReward ||= Array.isArray(rewardNty[key]) && rewardNty[key].length > 0 } if (hasReward) { let rewardArgs: IReward = {idNumArr: Mgr.goods.getGoodsListByRewardNty(rewardNty)} return {uiID: UI.RewardUI, uiArgs: rewardArgs} } else { return null } } public callOnShow(uiID: UI, args: any) { let uiInfo = this.getUIInfo(uiID) if (uiInfo && uiInfo.baseUI) { uiInfo.baseUI.onShow(args, null) } } /******************** 通用UI的操作接口 *******************/ public tip(text: string = '') { if (text == '') { return } this.hide(UI.TipUI) this.show(UI.TipUI, text) } /** * 显示网络请求等待响应屏蔽触摸的界面 * @param str 显示的文本 * @param isDelay 是否延时显示可见的屏蔽层,延时中为透明的屏蔽层 * @param cutNet 超时后是否重启游戏 */ public showLoading(str: string = '', isDelay: boolean = true, cutNet: boolean = false, timeOut: boolean = false) { this.show(UI.LoadingUI, {str, isDelay, cutNet, timeOut}) } /** * 隐藏网络请求等待响应屏蔽触摸的界面 */ public hideLoading() { this.hide(UI.LoadingUI) } public message(text: string = '', sureFunc: Function, isHideCancel: boolean = false, sureLb: string = '') { if (text == '') { return } let args: IMessage = { sureFuc: sureFunc, tip: text, isHideCancel, sureLb, } this.show(UI.MessageUI, args) } public fadeShow(uiID: number, uiArgs: any = null, inOrOut = true) { this.show(UI.FadeInOutUI, { inOrOut, aniFinishFuc: () => {}, }) if (uiID > 0) this.show(uiID, uiArgs) } public showReward(rewardNty: IRewardNty, itemUICfgArr?: ItemUICfg[]) { if (!rewardNty) return let hasReward = false for (let key in rewardNty) { hasReward ||= Array.isArray(rewardNty[key]) && rewardNty[key].length > 0 } if (hasReward) { let rewardArgs: IReward = {idNumArr: Mgr.goods.getGoodsListByRewardNty(rewardNty), itemUICfgArr} this.show(UI.RewardUI, rewardArgs) } } //传入needNum表示根据needGoods道具ID判断是否显示UI。不传值默认显示UI public showObtain(needGoods: number | IOperateNeed, needNum: number = 0): boolean { let operateNeed: IOperateNeed let showObtain = true if (typeof needGoods == 'number') { operateNeed = { canUp: false, isMax: false, need: [ { id: needGoods, num: Data.user.goods.get(needGoods) ? Data.user.goods.get(needGoods) : 0, need: needNum, }, ], } } else { operateNeed = needGoods } if (needNum > 0) { let hasNum = Data.user.goods.get(operateNeed.need[0]?.id) showObtain = hasNum < needNum } if (showObtain) this.show(UI.ObtainChannelUI, operateNeed) return showObtain } //显示顶部UI public showTop(baseUI: BaseUI, goodsIDs: GOODS[]) { this.topNode.parent = baseUI.node this.topNode.zIndex = 2000 this.topNode.getComponent(TopCell).init(goodsIDs, baseUI) } //显示底部UI public showFoot(baseUI: BaseUI) { this.footNode.parent = baseUI.node this.footNode.zIndex = 2000 this.topNode.getComponent(FootCell).init(baseUI) } }