五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑。本系列文章以TypeScript为介绍语言。
我们已经知道怎样制作、加载、显示界面。但cocos没有提供一个弹窗管理模块,对于一个多人合作的项目,没有统一的管理,界面层级容易混乱。作为主程,在项目开始就应该处理好这些问题,将弹窗划分为不同的层次,不同类型的信息显示在不同的层中。下面将讲解怎样设计弹窗堆栈。
一般地,从下向上,我会将弹窗划分为以下层:
1)内容层,展示游戏相关的信息界面。
2)tips层,显示提示性信息界面,例如获得物品的浮窗、网络异常的提示。
3)新手引导层,主要显示新手引导的手指、新手提示文本框等。
4)alert层,主要显示系统级的信息、错误,例如断网、被踢下线。
5)loading层,显示加载动画。
具体怎样实现?弹窗通常有统一的动画,所以定义一个界面逻辑的基类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主程入门教程(二)—— 弹窗管理的更多相关文章
-
cocos creator主程入门教程(七)—— MVC架构
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇将介绍在游戏客户端常用的架构MVC架构.一个游戏的MVC如下划分: M:1)单例全局的数据中心Wo ...
-
cocos creator主程入门教程(一)—— 初识creator
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 我们在cocos creator新建一个Hello TypeScript项目,都会有一个assets/S ...
-
cocos creator主程入门教程(四)—— 网络通信
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 前面已经介绍怎样加载资源.管理弹窗.开发一个网络游戏,难免要处理网络通信.有几点问题需要注意: 1.服务 ...
-
cocos creator主程入门教程(五)—— 日志系统
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍日志系统的设计.一般我们开发一个demo,只会简单的用cocos提供的cc.log打印下日志, ...
-
cocos creator主程入门教程(三)—— 资源管理
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 在初识篇,我介绍过怎样加载prefab.cocos提供了一系列的加载接口,包括cc.loader.loa ...
-
cocos creator主程入门教程(十一)—— 有限状态机和行为树
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...
-
cocos creator主程入门教程(十)—— A*寻路
摘要: 五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍A*寻路算法.在RPG.SLG.模拟经营类游戏,有需要给角色寻路的需求,一般寻路我们采 ...
-
cocos creator主程入门教程(九)—— 瓦片地图
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍瓦片地图,在开发模拟经营类游戏.SLG类游戏.RPG游戏,都会使用到瓦片地图.瓦片地图地面是通 ...
-
cocos creator主程入门教程(八)—— 代码结构
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇简单介绍下代码结构,清晰的代码结构更有利于团队对项目的理解和维护. 1.前面我们介绍了一系列基础功 ...
随机推荐
-
POJ3249:Test for Job
传送门 很简单的一道题,被卡了几次,死于答案非法统计. 题意是求图里的一条最长的路径满足起点的入度和终点的出度都是0,而且图是DAG. 既然是DAG求最长路,DP即可.搞出拓扑序,逆序DP,然后统计所 ...
-
lunece全文检索的入门与简单优化
2016-12-15 项目中需要加载下面几个工具包 1 package com.cn.shupu.util; import java.io.BufferedReader; import java.io ...
-
字符串string类型转换成DateTime或DateTime?类型
常用的Convert.ToDateTime方法 //将含有正确日期格式的string类型转换成DateTime类型 string strDate = "2014-08-01"; D ...
-
2016年11月3日JS脚本简介数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6.布尔型数据:bool 7.对象类型:object 8.二进制:binary 语言类型: 1.强类型语言:c++ c c# java 2.弱类型语
数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6 ...
-
Codeforces Round #147 (Div. 2)
A. Free Cash 判断值相同的最长长度. B. Young Table 按从上到下,从左到右排序,每个位置最多交换一次. C. Primes on Interval \(p_i\)表示位置\( ...
-
JavaScript中的继承模式总结
一.总结: //js中的几种继承 //原型链的问题,包含引用类型的原型属性会被实例共享,子类型无法给超类型传递参数 function SuperType() { this.colors = [&quo ...
-
⑦bootstrap按钮 图片 辅助使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
802.1X和NAP整合实验手册
实验描述 公司内部有多个部门,创建了域的架构,并搭建了DHCP服务器和Radius服务器,要求每个部门都独享一个网段,实现每位用户插上网线后,跳出窗体进行身份验证,如果用户通过验证,根据用户所在的部门 ...
-
新手使用mac上的textedit写HTML时遇到的问题及解决办法
刚开始在mac上学习HTML,总结一下遇到的问题和解决办法 问题:使用textedit编写html,在网页上却仍然显示的是代码. 解决办法: 打开textedit后打开文本编辑 选择偏好设置 按如图所 ...
-
Selenium分布式自动化测试平台 Standalone Server 4.0 搭建
最新的selenium测试平台大概有这么几个组件 Selenium Standalone Server: 用来搭建远程测试平台以及分布式测试. Selenium WebDriver: 最基础的用来创建 ...