在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();

? ?}

}

想要獲取更多課程和知識(shí)請(qǐng)點(diǎn)擊：

https://bycwedu.vipwan.cn/promotion_channels/630597732