cocos creator主程入门教程(二)—— 弹窗管理

时间:2022-09-19 16:56:49

五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑。本系列文章以TypeScript为介绍语言。

我们已经知道怎样制作、加载、显示界面。但cocos没有提供一个弹窗管理模块,对于一个多人合作的项目,没有统一的管理,界面层级容易混乱。作为主程,在项目开始就应该处理好这些问题,将弹窗划分为不同的层次,不同类型的信息显示在不同的层中。下面将讲解怎样设计弹窗堆栈。

一般地,从下向上,我会将弹窗划分为以下层:

1)内容层,展示游戏相关的信息界面。

2)tips层,显示提示性信息界面,例如获得物品的浮窗、网络异常的提示。

3)新手引导层,主要显示新手引导的手指、新手提示文本框等。

4)alert层,主要显示系统级的信息、错误,例如断网、被踢下线。

5)loading层,显示加载动画。

cocos creator主程入门教程(二)—— 弹窗管理

具体怎样实现?弹窗通常有统一的动画,所以定义一个界面逻辑的基类ViewCtrl,定义一些通用的属性和方法。每个层中可能同时存在多个界面,我把每个层做成组ViewGroup。再写一个类PopupCtrl,对界面分层,并对外提供编程接口。

先来说说ViewCtrl这个类,继承自cc.Component,这样我们写的ViewCtrl子类就可以挂载到prefab的节点上。定义两个boolean属性:hasMask、touchOutClose,用于控制是否有灰色半透明遮罩,和是否点击弹窗外关闭。后面在介绍ViewGroup时会介绍怎样实现这两个功能。

cc.Component本身有onEnable,onDisable两个生命周期方法,但我们希望同屏不出现太多弹窗,弹出新弹窗时隐藏上一个弹窗,这会导致这两个方法频繁调用。对于打开界面时的刷新,在界面放到堆栈时回调更合适。同理对重用的界面的重置,在界面移出堆栈时回调重置。可以在ViewCtrl定义onAddToStack和onRemoveFromStack两个生命周期方法,在ViewGroup里在合适的时机触发,后面会介绍。再添加两个方法,onPlayShowAni,onPlayHideAni,在这里可以实现统一的弹窗动画。子类的特殊显示和关闭动画由子类重写这两个方法实现。这两个方法也由ViewGroup在合适的时机触发。

/**
* auth: 关健昌
* date: 2018-11-17
* desc: 界面基类
* modify:
*/ const {ccclass, property} = cc._decorator; @ccclass
export default class ViewCtrl extends cc.Component { @property
hasMask: boolean = true; @property
touchOutClose: boolean = false; public onAddToStack(): void {
} public onRemoveFromStack(): void {
} public onPlayShowAni(): void {
} public onPlayHideAni(): void {
}
}

接下来是ViewGroup这个类,它代表一个弹窗层,也继承自cc.Component,它的node可以添加到PopupCtrl的node上从而展示这个弹窗层。它应该有自己的maskLayer、blockLayer,用于显示灰色半透明遮罩,和屏蔽下层界面的触屏事件。当然,像tips层,我们不希望屏蔽下层界面的触屏事件,可以提供接口来控制这两个layer是否生效。

ViewGroup最重要的作用是管理一层的弹窗。所以它应该有一个Array<ViewCtrl>类型的viewArr属性。基本的操作包括:

/**
* auth: 关健昌
* date: 2018-11-17
* desc: 界面组
* modify:
*/ export default class ViewGroup extends cc.Component { private maskLayer: cc.Node = null;
private blockLayer: cc.Node = null;
private viewArr: Array<ViewCtrl> = []; public pushView(ctrl: ViewCtrl, hideOld: boolean): void {
} public popView(cleanup: boolean): void {
} public insertView(ctrl: ViewCtrl): void {
} public removeView(ctrl: ViewCtrl): void {
} public pushViews(ctrls: Array<ViewCtrl>, hideOld: boolean): void {
} public removeAllViews(cleanup: boolean): void {
} public lastView(): ViewCtrl {
} public getViewByName(name: string): ViewCtrl {
} public getViewCount(): number {
} public isEmpty(): boolean {
}
}

其中pushView、insertView、pushViews会将对应ViewCtrl放入viewArr,并触发ViewCtrl.onAddToStack。通过ViewGroup.node.addChild将ViewCtrl.node添加为子节点将对应界面显示出来。具体是否要添加到界面要看是否在hideOld的界面下面。pushViews主要是为自动弹窗设计的,例如登录后自动显示公告、签到等,关闭一个自动打开下一个。

popView、removeView、removeAllViews通过ViewCtrl.node.removeFromParent将ViewCtrl.node移出界面,同时将ViewCtrl移出viewArr,并触发ViewCtrl.onRemoveFromStack。pushView、popView还会触发onPlayShowAni,onPlayHideAni这两个生命周期方法。

现在来说说PopupCtrl这个类,它也继承自cc.Component,可以直接挂载到prefab的节点上,在介绍游戏入口时我们给Canvas添加了popupLayer子节点,通过添加组件将PopupCtrl挂上去。PopupCtrl要实现分层,它有Array<ViewGroup>类型的groupArr属性。在onLoaded生命周期方法里按弹窗层顺序,通过PopupCtrl.addChild添加对应的弹窗层。PopupCtrl提供跟ViewGroup类似的接口,不同的是PopupCtrl的pushView、insertView、pushViews提供layer参数,用于指定弹窗添加的层。

enum PopupLayer {
CONTENT = 0,
TIPS,
GUIDE,
ALERT,
LOADING
}

弹窗管理先说到这里,下一篇我们将介绍下怎样做资源加载管理。

cocos creator主程入门教程(二)—— 弹窗管理的更多相关文章

  1. cocos creator主程入门教程(七)—— MVC架构

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇将介绍在游戏客户端常用的架构MVC架构.一个游戏的MVC如下划分: M:1)单例全局的数据中心Wo ...

  2. cocos creator主程入门教程(一)—— 初识creator

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 我们在cocos creator新建一个Hello TypeScript项目,都会有一个assets/S ...

  3. cocos creator主程入门教程(四)—— 网络通信

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 前面已经介绍怎样加载资源.管理弹窗.开发一个网络游戏,难免要处理网络通信.有几点问题需要注意: 1.服务 ...

  4. cocos creator主程入门教程(五)—— 日志系统

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍日志系统的设计.一般我们开发一个demo,只会简单的用cocos提供的cc.log打印下日志, ...

  5. cocos creator主程入门教程(三)—— 资源管理

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 在初识篇,我介绍过怎样加载prefab.cocos提供了一系列的加载接口,包括cc.loader.loa ...

  6. cocos creator主程入门教程(十一)—— 有限状态机和行为树

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...

  7. cocos creator主程入门教程(十)—— A&ast;寻路

    摘要: 五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍A*寻路算法.在RPG.SLG.模拟经营类游戏,有需要给角色寻路的需求,一般寻路我们采 ...

  8. cocos creator主程入门教程(九)—— 瓦片地图

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍瓦片地图,在开发模拟经营类游戏.SLG类游戏.RPG游戏,都会使用到瓦片地图.瓦片地图地面是通 ...

  9. cocos creator主程入门教程(八)—— 代码结构

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇简单介绍下代码结构,清晰的代码结构更有利于团队对项目的理解和维护. 1.前面我们介绍了一系列基础功 ...

随机推荐

  1. POJ3249&colon;Test for Job

    传送门 很简单的一道题,被卡了几次,死于答案非法统计. 题意是求图里的一条最长的路径满足起点的入度和终点的出度都是0,而且图是DAG. 既然是DAG求最长路,DP即可.搞出拓扑序,逆序DP,然后统计所 ...

  2. lunece全文检索的入门与简单优化

    2016-12-15 项目中需要加载下面几个工具包 1 package com.cn.shupu.util; import java.io.BufferedReader; import java.io ...

  3. 字符串string类型转换成DateTime或DateTime&quest;类型

    常用的Convert.ToDateTime方法 //将含有正确日期格式的string类型转换成DateTime类型 string strDate = "2014-08-01"; D ...

  4. 2016年11月3日JS脚本简介数据类型: 1&period;整型:int 2&period;小数类型: float(单精度) double(双精度) decimal () 3&period;字符类型: chr 4&period;字符串类型:sting 5&period;日期时间:datetime 6&period;布尔型数据:bool 7&period;对象类型:object 8&period;二进制:binary 语言类型: 1&period;强类型语言:c&plus;&plus; c c&num; java 2&period;弱类型语

    数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6 ...

  5. Codeforces Round &num;147 &lpar;Div&period; 2&rpar;

    A. Free Cash 判断值相同的最长长度. B. Young Table 按从上到下,从左到右排序,每个位置最多交换一次. C. Primes on Interval \(p_i\)表示位置\( ...

  6. JavaScript中的继承模式总结

    一.总结: //js中的几种继承 //原型链的问题,包含引用类型的原型属性会被实例共享,子类型无法给超类型传递参数 function SuperType() { this.colors = [&quo ...

  7. ⑦bootstrap按钮 图片 辅助使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 802&period;1X和NAP整合实验手册

    实验描述 公司内部有多个部门,创建了域的架构,并搭建了DHCP服务器和Radius服务器,要求每个部门都独享一个网段,实现每位用户插上网线后,跳出窗体进行身份验证,如果用户通过验证,根据用户所在的部门 ...

  9. 新手使用mac上的textedit写HTML时遇到的问题及解决办法

    刚开始在mac上学习HTML,总结一下遇到的问题和解决办法 问题:使用textedit编写html,在网页上却仍然显示的是代码. 解决办法: 打开textedit后打开文本编辑 选择偏好设置 按如图所 ...

  10. Selenium分布式自动化测试平台 Standalone Server 4&period;0 搭建

    最新的selenium测试平台大概有这么几个组件 Selenium Standalone Server: 用来搭建远程测试平台以及分布式测试. Selenium WebDriver: 最基础的用来创建 ...