The body of the

In the development of Cocos Creator game, pop-up dialog box is often used. Let’s encapsulate our own pop-up dialog box.

First, pop-up dialog box principle analysis

1: Dialog box structure:

1. 'root node -->' 2. 'mask: full-screen monochrome wizard, listen to events, close the dialog box; '3.' DLG and its children: the contents of the dialog box, listening to the event, blocking it from being passed to the mask node; '4.' pop-up animation: '5.' Mask: gradient in; '6.' dialog to scale and add easing object; '7.' Mask: gradient out; '9.' dialog shrinks and adds easing object; `Copy the code

2: dialog box component script


1.  `(1)show_dlg`

2.  `(2)hide_dlg`
Copy the code

Two, the pop-up dialog box control components

1. `const {ccclass, property} = cc._decorator; ` 3. `@ccclass` 4. `export default class PopDialogCtrl extends cc.Component {` 5. ` @property({type:cc.Node, Tooltip :" Pop-up dialog mask Node "}) '6.' mask: cc.Node = null; '@Property ({type:cc.Node, tooltip:" Pop-up main content Node "})' 8. 'Content :cc.Node = null; '9.' @Property ({tooltip:" Transparency during pop-up dialog initialization "}) '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; Opacity = 0; // Opacity = 0; '21.' let fIn: cc.action = cc.fadeto (0.1, this.maskopacity); ` 22. ` this.mask.runAction(fIn); '25.' this.content.setScale(0, 0); 'let s: Action = cc.scaleto (0.2, 1, 1).easebackout (); ` 27. ` this.content.runAction(s); Opacity = 0; opacity = 0; opacity = 0; '32.' let fOut: cc.action = cc.fadeto (0.3, 0); ` 33. ` this.mask.runAction(fOut); 'let s: cc.action = cc.scaleto (0.4, 0, 0).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.'}Copy the code

Iii. UI production of pop-up dialog box

The above Settings ensure that the dialog box is hidden when the mask layer is clicked.

Four, the use of pop-up dialog box components

Create gamemgr. ts and mount it to the Canvas node

1. `import PopDialogCtrl from "./PopDialogCtrl"; ` 3. `const {ccclass, property} = cc._decorator; ` 4. `@ccclass` 5. `export default class GameMgrextends cc.Component { ` 6. ` @property({type:PopDialogCtrl, }) 'popDialog: PopDialogCtrl = null; ` 8. ` showDialog(){` 9. ` this.popDialog.showDialog(); '10.'} '11.'}Copy the code