在Cocos Creator游戲開發(fā)中，經(jīng)常需要使用到彈出式對(duì)話框，下面我們就一起來封裝下自己的彈出式對(duì)話框。

一、 彈出式對(duì)話框原理解析

1:對(duì)話框的結(jié)構(gòu):

根節(jié)點(diǎn) -->

mask: 全屏的單色精靈，監(jiān)聽事件，關(guān)閉對(duì)話框;

dlg 與它的孩子: 對(duì)話框的內(nèi)容,監(jiān)聽事件，擋住不讓他傳遞到mask節(jié)點(diǎn)上;

彈出時(shí)動(dòng)畫:

mask: 漸變進(jìn)來;

對(duì)話框內(nèi)容縮放,并加上easing緩動(dòng)對(duì)象;

收起時(shí)動(dòng)畫:

mask: 漸變出去;

對(duì)話框內(nèi)容縮小，并加上easing 緩動(dòng)對(duì)象;

2: 對(duì)話框組件腳本

(1)show_dlg

(2)hide_dlg

二、 彈出式對(duì)話框控制組件

const {ccclass, property} = cc._decorator;

@ccclass

export default class PopDialogCtrl extends cc.Component {

? ?@property({type:cc.Node, tooltip:"彈出式對(duì)話框的遮罩節(jié)點(diǎn)"})

? ?mask : cc.Node = null;

? ?@property({type:cc.Node, tooltip:"彈出式對(duì)話框的主體內(nèi)容節(jié)點(diǎn)"})

? ?content : cc.Node = null;

? ?@property({tooltip:"彈出式對(duì)話框初始化時(shí)的透明度"})

maskOpacity : number = 200;

onLoad(){

this.node.active = false;

this.mask.opacity = this.maskOpacity;

}

showDialog(){

this.node.active = true;

// mask淡入

this.mask.opacity = 0;

let fIn : cc.Action = cc.fadeTo(0.1, this.maskOpacity);

this.mask.runAction(fIn);

// content縮放顯示

this.content.setScale(0, 0);

let s : cc.Action = cc.scaleTo(0.2, 1, 1).easing(cc.easeBackOut());

this.content.runAction(s);

? ?}

hideDialog(){

// mask淡出

this.mask.opacity = 0;

let fOut : cc.Action = cc.fadeTo(0.3, 0);

this.mask.runAction(fOut);

// content縮放隱藏

let s : cc.Action = cc.scaleTo(0.4, 0, 0).easing(cc.easeBackIn());

let endf : cc.Action = cc.callFunc(function(){

this.node.active = false;

? ? ? ?}.bind(this));

let seq : cc.ActionInterval = cc.sequence([s, endf]);

this.content.runAction(seq);

? ?}

}

三、 彈出式對(duì)話框UI制作

上面設(shè)置，可以保證點(diǎn)擊遮罩層的時(shí)候隱藏對(duì)話框。

四、 彈出式對(duì)話框組件的使用

新建GameMgr.ts掛載到Canvas節(jié)點(diǎn)上。

import PopDialogCtrl from "./PopDialogCtrl";

const {ccclass, property} = cc._decorator;

@ccclass

export default class GameMgr extends cc.Component { ? ?

? ?@property({type:PopDialogCtrl, tooltip:"彈出式對(duì)話框"})

? ?popDialog : PopDialogCtrl = null;

showDialog(){

this.popDialog.showDialog();

? ?}

}