Overview

Install ui plugins¶

Install from minify file¶

Download minify file (link).

Install ui plugin in preload stage

scene.load.scenePlugin({
    key: 'rexuiplugin',
    url: filePath,
    sceneKey: 'rexUI'
});

key : Must be 'rexuiplugin'

Install from npm package¶

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

Install ui plugin in configuration of game

import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';

var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: RexUIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);

Using typescript declaration file¶

import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';

class Game extends Phaser.Scene {
    rexUI: RexUIPlugin;  // Declare scene property 'rexUI' as RexUIPlugin type

    create() {
        var sizer = this.rexUI.add.sizer({
            // ...
        })
    }
}

var game = new Phaser.Game({
    scene: Game,
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: RexUIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
});

'phaser3-rex-plugins/templates/ui/ui-plugin' : Factories of rexUI components.

'phaser3-rex-plugins/templates/ui/ui-components' : Class of rexUI components.

import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components';

See this example

List of ui plugins¶

UI components¶

Badge label: A container with badges above a main item.
Buttons: A container with a group of buttons.
Dialog: A container with a title, content, buttons and background.
Fix-width-buttons: A container with a group of fix-width buttons.
Fix-width-sizer: Layout children game objects into lines.
Grid-buttons: A container with a group of buttons in grids.
Grid-sizer: Layout children game objects in grids.
Grid-table: A container with a grid table, slider, and scroller.
Knob: A knob button based on circular progress.
Label: A container with an icon, text, and background.
Menu: A container with buttons and sub-menu.
Number-bar: A container with an icon, slider, text, and background.
Overlap sizer: Layout children game objects overlapped.
Pages: A container with pages, only current page is visible.
Scroll-able panel: A container with a panel, slider, and scroller.
Sizer: Layout children game objects.
Slider: A container with a track, indicator, thumb and background.
Tabs: A container with 4 groups of buttons around a center panel.
TextArea: A container with a text, slider, and scroller.
Textbox: A container with an icon, (typing and paging) text, and background.
Toast: Show text message for a short while.

Scroll-able table

There are 2 kinds of scroll-able tables :

Grid-table only creates visible objects. It is suitable for large table.
Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table.

Basic container¶

ContainerLite: Control the position and angle of children game objects.

var container = scene.rexUI.add.container(x, y);

or

class MyContainer extends RexPlugins.UI.Container {
    constructor(scene, x, y, width, height, children) {
        super(scene, x, y, width, height, children);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Background objects¶

Round-rectangle: Round rectangle shape.

var shape = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);

or

class MyRoundRectangle extends RexPlugins.UI.RoundRectangle {
    constructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {
        super(scene, x, y, width, height, radius, fillColor, fillAlpha);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Nine-patch: Stretchable imaage.

var ninePatch = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);

or

class MyNinePatch extends RexPlugins.UI.NinePatch {
    constructor(scene, x, y, width, height, key, columns, rows, config) {
        super(scene, x, y, width, height, key, columns, rows, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Custom shapes: Custom shapes on shape.

var customShapes = scene.rexUI.add.customShapes(x, y, width, height, config);

or

class MyCustomShapes extends RexPlugins.UI.CustomShapes {
    constructor(scene, x, y, width, height, config) {
        super(scene, x, y, width, height, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Custom progress: Custom progress on shape.

var customProgress = scene.rexUI.add.customProgress(x, y, width, height, config);

or

class MyCustomProgress extends RexPlugins.UI.CustomProgress {
    constructor(scene, x, y, width, height, config) {
        super(scene, x, y, width, height, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Canvas-round-rectangle: Round rectangle on canvas.

var shape = scene.rexUI.add.roundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);

or

class MyRoundRectangleCanvas extends RexPlugins.UI.RoundRectangleCanvas {
    constructor(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient) {
        super(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Canvas/Shape objects¶

Canvas: Drawing on canvas.

var canvas = scene.rexUI.add.canvas(x, y, width, height);
// var canvas = scene.rexUI.add.canvas(x, y, width, height);

or

class MyCanvas extends RexPlugins.UI.Canvas {
    constructor(scene, x, y, width, height) {
        super(scene, x, y, width, height);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Circle mask image: Load a texture, then apply a circle mask.

var image = scene.rexUI.add.circleMaskImage(x, y, key, frame);
// var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config);

or

class MyImage extends RexPlugins.UI.CircleMaskImage {
    constructor(scene, x, y, key, frame, config) {
        super(scene, x, y, key, frame, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Circular progress shape: Circular progress bar shape.

var circularProgress = scene.rexUI.add.circularProgress(x, y, radius, barColor, value, config);

or

class MyCircularProgress extends RexPlugins.UI.CircularProgress {
    constructor(scene, x, y, radius, barColor, value, config) {
        super(scene, x, y, radius, barColor, value, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Circular progress canvas: Circular progress bar on canvas

var circularProgress = scene.rexUI.add.circularProgressCanvas(x, y, radius, barColor, value, config);

or

class MyCircularProgress extends RexPlugins.UI.CircularProgressCanvas {
    constructor(scene, x, y, radius, barColor, value, config) {
        super(scene, x, y, radius, barColor, value, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Chart: Draw chart on canvas.

Colored text objects¶

BBCode text: Drawing text with BBCode protocol.

var txt = scene.rexUI.add.BBCodeText(x, y, text, style);

or

class MyText extends RexPlugins.UI.BBCodeText {
    constructor(scene, x, y, text, style) {
        super(scene, x, y, text, style);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Tag text: Displays text with multi-color, font face, or font size with tags.

var txt = scene.rexUI.add.tagText(x, y, text, style);

or

class MyText extends RexPlugins.UI.TagText {
    constructor(scene, x, y, text, style) {
        super(scene, x, y, text, style);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Dynamic text: Control position, angle of each character drawn on a canvas.

var txt = scene.rexUI.add.dynamicText(config);

or

class MyText extends RexPlugins.UI.DynamicText {
    constructor(scene, config) {
        super(scene, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Transition image¶

Transition image: Transit texture to another one.

var image = scene.rexUI.add.transitionImage(x, y, texture, frame, config);

or

class MyTransitionImage extends RexPlugins.UI.TransitionImage {
    constructor(scene, x, y, texture, frame, config) {
        super(scene, x, y, texture, frame, config);
        // ...
        scene.add.existing(this);
    }
    // ...
}

Behaviors of text¶

Text editor: Create an input text object above a text object to edit string content.

scene.rexUI.add.edit(textObject, config);
// scene.rexUI.add.edit(textObject, config, onClose);

Wrap-expand text

var textObject = scene.rexUI.wrapExpandText(textObject);
// var textObject = scene.rexUI.wrapExpandText(textObject, minWidth);

textObject :
- Text object, bbcode text object, tag text boject,
- Bitmap text object
- Dynamic text object, With default wrap configuration, ex:
```
{
    lineHeight: 24, 
    padding: {bottom: 12}
}
```

Touch input¶

Click: Fires 'click' event when touch releasd after pressed.

var click = scene.rexUI.add.click(gameObject, config);

or

var click = new RexPlugins.UI.Click(gameObject, config);

Tap: Get tap/multi-taps events of a game object.

var tap = scene.rexUI.add.tap(gameObject, config);

or

var tap = new RexPlugins.UI.Tap(gameObject, config);

Press: Get press events of a game object.

var press = scene.rexUI.add.press(gameObject, config);

or

var press = new RexPlugins.UI.Press(gameObject, config);

Swipe: Get swipe events of a game object.

var swipe = scene.rexUI.add.swipe(gameObject, config);

or

var swipe = new RexPlugins.UI.Swipe(gameObject, config);

Pan: Get pan events of a game object.

var pan = scene.rexUI.add.pan(gameObject, config);

or

var pan = new RexPlugins.UI.Pan(gameObject, config);

Pinch: Get scale factor from 2 dragging touch pointers.

var pinch = scene.rexUI.add.pinch(config);

or

var pinch = new RexPlugins.UI.Pinch(config);

Rotste: Get spin angle from 2 dragging touch pointers.

var rotate = scene.rexUI.add.rotate(config);

or

var rotate = new RexPlugins.UI.Rotate(config);

Set children interactive¶

Helper method, which applies click, tap, press, swipe behaviors on a game object, to detect input events of children.

scene.rexUI.setChildrenInteractive(sizer, {
    targets: targetSizers,

    // click: {mode: 'release', clickInterval: 100},

    // over: undefined,

    // press: {time: 251, threshold: 9},

    // tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, 
    //       taps: undefined, minTaps: undefined, maxTaps: undefined,},

    // swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},

    // inputEventPrefix: 'child.',
    // eventEmitter: undefined
})

targetSizers : Array of target children-sizer.
click : Configuration of Button behavior.
- false : Don't install Button behavior.
over :
- false : Don't fire over/out events
press : Configuration of Press behavior.
- false : Don't install Press behavior.
tap : Configuration of Tap behavior.
- false : Don't install Tap behavior.
swipe : Configuration of Swipe behavior.
- false : Don't install Swipe behavior.
inputEventPrefix : Prefix string of each event, default is 'child.'.
eventEmitter : Fire event through specific game object.

Note

Input behaviors are installed to this Sizer game object, not each child. And it assumes that all children are not overlapped. Use Button if user needs to enable/disable input behaviors of each child individually.

Events¶

Click

sizer.on('child.click', function(child, pointer) { 
    // ...
}, scope);

child : Triggered child game object.
pointer : Pointer object.

Pointer-over

sizer.on('child.over', function(child, pointer) { 
    // ...
}, scope);

Pointer-out

sizer.on('child.out', function(child, pointer) { 
    // ...
}, scope);

Press

sizer.on('child.pressstart', function(child, pointer) { 
    // ...
}, scope);

sizer.on('child.pressend', function(child, pointer) { 
    // ...
}, scope);

Tap

sizer.on(tapEventName, function(child, pointer) { 
    // ...
}, scope);

tapEventName : 'child.1tap', 'child.2tap', 'child.3tap', etc ...

Swipe
```
sizer.on(swipeEventName, function(child, pointer) { 
    // ...
}, scope);
```
- swipeEventName : 'child.swipeleft', 'child.swiperight', 'child.swipeup', 'child.swipedown'.

Behaviors¶

Flip: Flip game object to another face by scaling width/height.

var flip = scene.rexUI.add.flip(gameObject, config);

or

var flip = new RexPlugins.UI.Flip(gameObject, config);

Perspective: Snapshot children of containerlite, to a perspective render texture.

var perspective = scene.rexUI.add.perspective(gameObject, config);

or

var perspective = new RexPlugins.UI.Perspective(gameObject, config);

Helper methods¶

Get parent¶

Get parent sizer

var parentSizer = scene.rexUI.getParentSizer(gameObject);

gameObject : Any game object added to sizer.

Get topmost sizer

var topmostSizer = scene.rexUI.getTopmostSizer(gameObject);

gameObject : Any game object added to sizer.

Show/hide¶

Show

scene.rexUI.show(gameObject);
scene.rexUI.getTopmostSizer(gameObject).layout();

Hide

scene.rexUI.hide(gameObject);
scene.rexUI.getTopmostSizer(gameObject).layout();

Is shown

var isShown = scene.rexUI.isShown(gameObject);

Is pointer in bounds¶

var isInBounds = scene.rexUI.isInTouching(gameObject);
// var isInBounds = scene.rexUI.isInTouching(gameObject, pointer);

Event promise ¶

Get event promise
```
var promise = scene.rexUI.waitEvent(eventEmitter, eventName)
    .then(function() {

    })
```
- eventEmitter : Any kind of event emitter. for example, game object, or tween task, or scene event
Get complete event promise
```
var promise = scene.rexUI.waitComplete(eventEmitter)
    .then(function() {

    })
```
- eventEmitter : Event emitter which will fire 'complete' event, for example, tween task.

View port¶

View port is a rectangle of current visible area.

var viewport = scene.rexUI.viewport;

Which will be changed after resizing

scene.scale.on('resize', function() {
    var viewport = scene.rexUI.viewport;
    /*
    sizer
        .setPosition(viewport.centerX, viewport.centerY)
        .setMinSize(viewport.width, viewport.height)
        .layout();
    */
});