Toast
Introduction¶
Show text message for a short while.
- Author: Rex
- Game object
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
- Add toast object
var toast = scene.rexUI.add.toast(config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexUI', plugin: UIPlugin, mapping: 'rexUI' }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add toast object
var toast = scene.rexUI.add.toast(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { Toast } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add toast object
var toast = new Toast(scene, config); sscene.add.existing(toast);
Add toast object¶
var toast = scene.rexUI.add.toast({
x: 0,
y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
orientation: 0,
background: backgroundGameObject,
icon: iconGameObject,
iconMask: false,
text: textGameObject,
action: actionGameObject,
actionMask: false,
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
icon: 0,
text: 0,
},
duration: {
in: 200,
hold: 1200,
out: 200,
},
// transitIn: 0,
// transitOut: 0,
name: ''
});
x
,y
: Position of this object, it is valid when this object is the top object.anchor
: See anchor.left
,right
,centerX
,x
,top
,bottom
,centerY
,y
: Position based on visible window, which composed of- Percentage of visible width/height :
'p%'
, p:0
~100
.'left'
(=0%),'center'
(=50%),'right'
(=100%)'top'
(=0%),'center'
(=50%),'bottom'
(=100%)
- Offset :
'+n'
, or'-n'
.
- Percentage of visible width/height :
width
,height
: Minimum width, minimum height.orientation
:'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Put icon at left side, and text at right side.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Put icon at top side, and text at bottom side.
background
: Game object of background, optional. This background game object will be resized to fit the size of toast.icon
: Game object of icon, optional.iconMask
: Set true to add a circle mask on icon game object.text
: Game object of text.action
: Game object of action icon, optional.actionMask
: Set true to add a circle mask on action icon game object.space
: Pads spacesspace.left
,space.right
,space.top
,space.bottom
: Space of boundsspace.icon
: Space between icon game object and text game object.space.text
: Space between text game object and action icon game object.
name
: Set name of this toast.duration
: Duration of displaying messageduration.in
: Duration of transit-in stage.duration.hold
: Duration of hold stage.duration.out
: Duration of transit-out stage.
transitIn
: Callback of transit-in.0
, orpopUp
: Pop-up.1
, orfadeIn
: Fade-in.- A callback : Custom transit-in function
function(gameObject, duration) { // ... }
transitOut
: Callback of transit-out.0
, orscaleDown
: Scale-down.1
, orfadeOut
: Fade-out.- A callback : Custom transit-out function
function(gameObject, duration) { // ... }
Toast object will be invisible at beginning.
Custom class¶
- Define class
class MyToast extends RexPlugins.UI.Toast { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... }
- Create instance
var toast = new MyToast(scene, config);
Show message¶
toast.show(message);
message
: A string, or a callback.- A string. Apply this content to
text
game object. - Callback. Invoke this callback to configurate toast object.
function(toast) { // var icon = toast.getElement('icon'); // var text = toast.getElement('text'); // var action = toast.getElement('action'); }
- A string. Apply this content to
Toast displays message follows these steps : transit-in, hold, transit-out. New message will be pending until toast is back to idle.