cocos creator主程入门教程(二)—— 弹窗管理
五邑隐侠,本名关健昌,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.前面我们介绍了一系列基础功 ...
随机推荐
- openCV 简单实现身高测量(未考虑相机标定,windows)
(一) OpenCV3.1.0+VS2015开发环境配置 下载OpenCV安装包(笔者下载3.1.0版本) 环境变量配置(opencv安装路径\build\x64\vc14\bin,注意的是x64文件 ...
- 压力测试工具 ab
ab 是Apache 自带的一个压力测试工具,命令行,是 ApacheBench 命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基 ...
- 你不知道的JS之作用域和闭包 附录
原文:你不知道的js系列 A 动态作用域 动态作用域 是和 JavaScript中的词法作用域 对立的概念. 动态作用域和 JavaScript 中的另外一个机制 (this)很相似. 词法作用域是 ...
- Spring 复习第一天
一.Sping的优点 1.方便解耦,简化开发 ----Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理. 2.AOP编程的支持 ----Spring提供面向切面编程, ...
- Katalon Studio之swagger中的API导入
约束条件: swagger中一定要在注解@ApiOperation中设置nickname的唯一值,例如: @ApiOperation(value="新增用户",notes=&quo ...
- kvm虚拟机克隆
1.先关闭被克隆的虚拟机: 2.克隆命令 virt-clone -o 192.168.0.242_sw_web -n 192.168.0.163_nginx -f /data/kvm/images/1 ...
- DOS命令(二)
1. findstr “要查找的字符串” 文件,用来从文件中检索包含相关内容的字符串集合. [例如:查找包含“TTL”的字符串] 2. del 要删除的文件,用来删除某个文件. 3. pause,用 ...
- Hadoop 集群安装(主节点安装)
1.下载安装包及测试文档 切换目录到/tmp view plain copy cd /tmp 下载Hadoop安装包 view plain copy wget http://192.168.1.100 ...
- Lesson 27 A wet night
Text Late in the afternoon, the boys put up their tent in the middle of a feild. As soon as this was ...
- 从SQL注入到内网漫游
前言 在一次渗透实战中,发现了一个注入点,最后成功的漫游了内网. 正文 在渗透中遇到一个站点,顺手测试了一下,在搜索框随便输入了一个字符加个单引号直接报错了,差不多可以确认这里存在注入了.一般这种站安 ...