テキスト
Cocos Creatorのゲーム開発では、しばしばポップアップ・ダイアログ・ボックスを使用する必要がありますが、次の1つは独自のポップアップ・ダイアログ・ボックスをカプセル化することです。
I. ポップアップ・ダイアログボックスの原理分析
:ダイアログボックスの構造
1. `ルート・ノード-->`
2. `mask: フルスクリーンのモノクロのスプライト、イベントを聞いて、ダイアログボックスを閉じる。;`
3. `dlg とその子ノード: ダイアログボックスの内容、イベントをリッスンし、マスクノードに渡らないようにブロックする。;`
4. `ポップアップ・アニメーション:`
5. `mask: グラデーション;`
6. `ダイアログ・ボックスの内容を拡大縮小し、イージング・オブジェクトを追加する。;`
7. `閉じる時のアニメーション:`
8. `mask: グラデーション・アウト;`
9. `ダイアログ・ボックスの内容を縮小し、イージング・ジョグ・オブジェクトを追加する。;`
: ダイアログボックス・コンポーネント・スクリプト
1. `(1)show_dlg`
2. `(2)hide_dlg`
II.ポップアップダイアログボックスの制御コンポーネント
1. `const {ccclass, property} = cc._decorator;`
3. `@ccclass`
4. `export default class PopDialogCtrl extends cc.Component {`
5. ` @property({type:cc.Node, tooltip:"ポップアップ・ダイアログのMaskノード"})`
6. ` mask : cc.Node = null;`
7. ` @property({type:cc.Node, tooltip:"ポップアップ・ダイアログ・ボックスのメイン・コンテンツ・ノード"})`
8. ` content : cc.Node = null;`
9. ` @property({tooltip:"ポップアップ・ダイアログ・ボックスの初期透明度。"})`
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制作
上記の設定により、マスクレイヤーをクリックするとダイアログボックスが非表示になります。
IV.ポップアップダイアログボックスコンポーネントの使用
新しいGameMgr.tsがCanvasノードにマウントされました。
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. `}`
