正文

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

一、彈出式對話框原理解析

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

1. ?`根節(jié)點(diǎn) -->` 2. ?`mask: 全屏的單色精靈，監(jiān)聽事件，關(guān)閉對話框;` 3. ?`dlg 與它的孩子: 對話框的內(nèi)容,監(jiān)聽事件，擋住不讓他傳遞到mask節(jié)點(diǎn)上;` 4. ?`彈出時(shí)動畫:` 5. ?`mask: 漸變進(jìn)來;` 6. ?`對話框內(nèi)容縮放,并加上easing緩動對象;` 7. ?`收起時(shí)動畫:` 8. ?`mask: 漸變出去;` 9. ?`對話框內(nèi)容縮小，并加上easing 緩動對象;`

2: 對話框組件腳本

1. ?`(1)show_dlg` 2. ?`(2)hide_dlg`

二、彈出式對話框控制組件

1. ?`const {ccclass, property} = cc._decorator;` 3. ?`@ccclass` 4. ?`export default class PopDialogCtrl extends cc.Component {` 5. ?` ? ?@property({type:cc.Node, tooltip:"彈出式對話框的遮罩節(jié)點(diǎn)"})` 6. ?` ? ?mask : cc.Node = null;` 7. ?` ? ?@property({type:cc.Node, tooltip:"彈出式對話框的主體內(nèi)容節(jié)點(diǎn)"})` 8. ?` ? ?content : cc.Node = null;` 9. ?` ? ?@property({tooltip:"彈出式對話框初始化時(shí)的透明度"})` 10. ?`maskOpacity : number = 200;` 12. ?` ? ?onLoad(){` 13. ?` ? ? ? ?this.node.active = false;` 14. ?` ? ? ? ?this.mask.opacity = this.maskOpacity;` 15. ?`}` 17. ?` ? ?showDialog(){` 18. ?` ? ? ? ?this.node.active = true;` 19. ?` ? ? ? ?// mask淡入` 20. ?` ? ? ? ?this.mask.opacity = 0;` 21. ?` ? ? ? ?let fIn : cc.Action = cc.fadeTo(0.1, this.maskOpacity);` 22. ?` ? ? ? ?this.mask.runAction(fIn);` 24. ?` ? ? ? ?// content縮放顯示` 25. ?` ? ? ? ?this.content.setScale(0, 0);` 26. ?` ? ? ? ?let s : cc.Action = cc.scaleTo(0.2, 1, 1).easing(cc.easeBackOut());` 27. ?` ? ? ? ?this.content.runAction(s);` 28. ?` ? ?}` 29. ?` ? ?hideDialog(){` 30. ?` ? ? ? ?// mask淡出` 31. ?` ? ? ? ?this.mask.opacity = 0;` 32. ?` ? ? ? ?let fOut : cc.Action = cc.fadeTo(0.3, 0);` 33. ?` ? ? ? ?this.mask.runAction(fOut);` 34. ?` ? ? ? ?// content縮放隱藏` 35. ?` ? ? ? ?let s : cc.Action = cc.scaleTo(0.4, 0, 0).easing(cc.easeBackIn());` 36. ?` ? ? ? ?let endf : cc.Action = cc.callFunc(function(){` 37. ?` ? ? ? ? ? ?this.node.active = false;` 38. ?` ? ? ? ?}.bind(this));` 39. ?` ? ? ? ?let seq : cc.ActionInterval = cc.sequence([s, endf]);` 40. ?` ? ? ? ?this.content.runAction(seq);` 41. ?` ? ?}` 42. ?`}`

三、彈出式對話框UI制作

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

四、彈出式對話框組件的使用

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

1. ?`import PopDialogCtrl from "./PopDialogCtrl";` 3. ?`const {ccclass, property} = cc._decorator;` 4. ?`@ccclass` 5. ?`export default class GameMgrextends cc.Component { ? ?` 6. ?` ? ?@property({type:PopDialogCtrl, tooltip:"彈出式對話框"})` 7. ?` ? ?popDialog : PopDialogCtrl = null;` 8. ?` ? ?showDialog(){` 9. ?` ? ? ? ?this.popDialog.showDialog();` 10. ?` ? ?}` 11. ?`}`