cocos creator主程入门教程(二)—— 弹窗治理_玖


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

我们已晓得如何制造、加载、显现界面。但cocos没有供应一个弹窗治理模块,关于一个多人协作的项目,没有一致的治理,界面层级轻易杂沓。作为主程,在项目最先就应该处理好这些题目,将弹窗划分为分歧的条理,分歧范例的信息显如今分歧的层中。下面将解说如何设想弹窗客栈。

一样平常地,从下向上,我会将弹窗划分为以基层:

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

2tips层,显现提醒性信息界面,比方取得物品的浮窗、收集非常的提醒。

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

4alert层,主要显现体系级的信息、毛病,比方断网、被踢下线。

5loading层,显现加载动画。

详细如何完成?弹窗一般有一致的动画,以是界说一个界面逻辑的基类ViewCtrl,界说一些通用的属性和要领。每一个层中能够同时存在多个界面,我把每一个层做成组ViewGroup。再写一个类PopupCtrl,对界面分层,并对外供应编程接口。

先来说说ViewCtrl这个类,继续自cc.Component,如许我们写的ViewCtrl子类就能够挂载到prefab的节点上。界说两个boolean属性:hasMasktouchOutClose,用于掌握是不是有灰色半透明遮罩,和是不是点击弹窗外封闭。背面在引见ViewGroup时会引见如何完成这两个功用。

cc.Component自身有onEnableonDisable两个生命周期要领,但我们愿望同屏不涌现太多弹窗,弹出新弹窗时隐蔽上一个弹窗,这会致使这两个要领频仍挪用。关于翻开界面时的革新,在界面放到客栈时回调更适宜。同理对重用的界面的重置,在界面移出客栈时回调重置。能够在ViewCtrl界说onAddToStackonRemoveFromStack两个生命周期要领,在ViewGroup里在适宜的机遇触发,背面会引见。再增加两个要领,onPlayShowAnionPlayHideAni,在这里能够完成一致的弹窗动画。子类的特别显现和封闭动画由子类重写这两个要领完成。这两个要领也由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能够增加到PopupCtrlnode上从而展现这个弹窗层。它应该有本身的maskLayerblockLayer,用于显现灰色半透明遮罩,和屏障基层界面的触屏事宜。固然,像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 {
     }
}

 

个中pushViewinsertView、pushViews会将对应ViewCtrl放入viewArr,并触发ViewCtrl.onAddToStack。经由过程ViewGroup.node.addChildViewCtrl.node增加为子节点将对应界面显现出来。详细是不是要增加到界面要看是不是在hideOld的界面下面。pushViews主如果为自动弹窗设想的,比方登录后自动显现通知布告、签到等,封闭一个自动翻开下一个。

popViewremoveView、removeAllViews经由过程ViewCtrl.node.removeFromParentViewCtrl.node移出界面,同时将ViewCtrl移出viewArr,并触发ViewCtrl.onRemoveFromStackpushViewpopView还会触发onPlayShowAnionPlayHideAni这两个生命周期要领。

如今来说说PopupCtrl这个类,它也继续自cc.Component,能够直接挂载到prefab的节点上,在引见游戏进口时我们给Canvas增加了popupLayer子节点,经由过程增加组件将PopupCtrl挂上去。PopupCtrl要完成分层,它有Array<ViewGroup>范例的groupArr属性。在onLoaded生命周期要领里按弹窗层递次,经由过程PopupCtrl.addChild增加对应的弹窗层。PopupCtrl供应跟ViewGroup相似的接口,分歧的是PopupCtrlpushViewinsertView、pushViews供应layer参数,用于指定弹窗增加的层。

 

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

 

弹窗治理先说到这里,下一篇我们将引见下如何做资本加载治理。

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。