Modal behavior

Introduction¶

Pop-up modal dialog, then scale-down this dialog.

Author: Rex
Behavior of game object

Live demos¶

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

scene.load.plugin('rexmodalplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmodalplugin.min.js', true);

Add modal behavior

var modal = scene.plugins.get('rexmodalplugin').add(gameObject, config);

Import plugin¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Add modal behavior

var modal = scene.plugins.get('rexModal').add(gameObject, config);

Import class¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Import class

import { ModalBehavoir } from 'phaser3-rex-plugins/plugins/modal.js';

Add modal behavior

var modal = new ModalBehavoir(gameObject, config);

Create instance¶

var modal = scene.plugins.get('rexModal').add(gameObject, {
    // cover: {
    //     color: 0x0,
    //     alpha: 0.8
    // },
    // cover: false, 

    // manualClose: true,
    // anyTouchClose: true,

    // duration: {
    //     in: 200,
    //     hold: 2000,
    //     out: 200
    // }

    // transitIn: 0,
    // transitOut: 0,

    // destroy: true
});

cover : Configuration of Cover -- A rectangle shape covered full window, and block all touch events.
- false : Don't create cover game object.
manualClose :
- true : Close modal dialog via modal.requestClose() method. Default behavior.
- false : Close modal dialog when timeout (duration.hold), or any-touch (if set anyTouchClose to true)
anyTouchClose :
- true : When manualClose set to false, close modal dialog when timeout, or any-touch.
- false : Disable any-touch feature.
duration : Duration of transition-in, hold, trantion-out.
- duration.in : Duration of transition-in (open dialog).
- duration.out : Duration of transition-out (close dialog).
- duration.hold : Duration of hold. Used in manualClose is set to false.
transitIn : Tween behavior of opening dialog.
- 0, 'popUp' : Pop up dialog from 0 to current scale.
- 1, 'fadeIn' : Fade in dialog
- Custom callback
```
function(gameObject, duration) {

}
```
- false, null : No transitIn.
transitOut : Tween behavior of closing dialog.
- 0, 'scaleDown' : Scale down dialog
- 1, 'fadeOut' : Fade out dialog
- Custom callback
```
function(gameObject, duration) {

}
```
- false, null : No transitOut.
destroy
- true : Destroy dialog when closing completed. Default behavior.
- fasle : Don't destroy dialog.

Close¶

modal.requestClose();
// modal.requestClose(closeEventData);

closeEventData : Emit 'close' event when closed dialog complete, pass closeEventData to callback of this event.
```
modal.on('close', function(closeEventData) {
})
```

graph TB

Modal["add('gameObject, config)"]
OnOpen["modal.on('open')"]
RequestCloseEvent["modal.requestClose(closeEventData)"]
TimeOut["Timeout<br>Any touch"]
OnClose["modal.on('close', function(closeEventData) {})"]

Modal --> |Transition-in| OnOpen
OnOpen --> |manualClose| RequestCloseEvent
OnOpen --> |Not manualClose| TimeOut
RequestCloseEvent --> |Transition-out| OnClose
TimeOut --> |Transition-out| OnClose

Events¶

On opened dialog

modal.on('open', function(gameObject, modal) {
})

On closed dialog

modal.on('close', function(closeEventData) {
})