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.前面我们介绍了一系列基础功 ...
随机推荐
- Tensor基本操作
Tensor(张量) 1.Tensor,又名张量,从工程角度来说,可简单地认为它就是一个数组,且支持高效的科学计算.它可以是一个数(标量).一维数组(向量).二维数组(矩阵)或更高维的数组(高阶数组) ...
- python学习:字典
字典 1.查询内存地址 a = 10 print(id(a)) b = a print(id(b)) b = 15 print(id(b)) 2. 数据类型 不可变类型:整型.字符串.元组 可变类型: ...
- vue创建状态管理(vuex的store机制)
1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...
- 马昕璐 201771010118《面向对象程序设计(java)》第十四周学习总结
第一部分:理论知识学习部分 一.Swing和MVC设计模式 1. MVC模式可应用于Java的GUI组件设计中 2.MVC模式GUI组件设计的唯一的模式,还有很多设计的模式 二.布局管理器 1. 布局 ...
- pickle 模块
序列化和反序列化的定义 序列化:就是把不可传输的对象转换为可存储或可传输的过程 反序列化:就是把在磁盘,等介质中的数据转换为对象 import pickle #dic={'name':'alex',' ...
- Spring Security 整合freemaker 实现简单登录和角色控制
Spring Security 整合freemaker 实现简单登录和角色控制 写这篇文章是因为我做了一个电商网站项目,近期刚加上权限控制.整个过程很简单,在此给大家梳理一下,也算是自己对知识 ...
- 分割字节流为G,MB,KB的算法
String HumanReadableFilesize(double size) { var units = new[] { "B", "KB", " ...
- jieba库的使用与词频统计
1.词频统计 (1)词频分析是对文章中重要词汇出现的次数进行统计与分析,是文本 挖掘的重要手段.它是文献计量学中传统的和具有代表性的一种内容分析方法,基本原理是通过词出现频次多少的变化,来确定热点及其 ...
- java字符串应用之字符串编码转换
[转载]原文地址:https://blog.csdn.net/zhouyong80/article/details/1900100 无论是对程序的本地化还是国际化,都会涉及到字符编码的转换的问题.尤其 ...
- JAVA设计模式—观察者模式和Reactor反应堆模式
被观察者(主题)接口 定义主题对象接口 /**抽象主题角色: 这个主题对象在状态上发生变化时,会通知所有观察者对象 也叫事件对象 */ public interface Subject { //增加一 ...