Skip to content

Overview

Install ui plugins

Install from minify file

  1. Download minify file (link).
  2. Install ui plugin in preload stage
    scene.load.scenePlugin({
        key: 'rexuiplugin',
        url: filePath,
        sceneKey: 'rexUI'
    });
    
    • key : Must be 'rexuiplugin'

Install from npm package

  1. Install rex plugins
    npm i phaser3-rex-plugins
    
  2. 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

  1. Badge label: A container with badges above a main item.
  2. Buttons: A container with a group of buttons.
  3. Dialog: A container with a title, content, buttons and background.
  4. Fix-width-buttons: A container with a group of fix-width buttons.
  5. Fix-width-sizer: Layout children game objects into lines.
  6. Grid-buttons: A container with a group of buttons in grids.
  7. Grid-sizer: Layout children game objects in grids.
  8. Grid-table: A container with a grid table, slider, and scroller.
  9. Knob: A knob button based on circular progress.
  10. Label: A container with an icon, text, and background.
  11. Menu: A container with buttons and sub-menu.
  12. Number-bar: A container with an icon, slider, text, and background.
  13. Overlap sizer: Layout children game objects overlapped.
  14. Pages: A container with pages, only current page is visible.
  15. Scroll-able panel: A container with a panel, slider, and scroller.
  16. Sizer: Layout children game objects.
  17. Slider: A container with a track, indicator, thumb and background.
  18. Tabs: A container with 4 groups of buttons around a center panel.
  19. TextArea: A container with a text, slider, and scroller.
  20. Textbox: A container with an icon, (typing and paging) text, and background.
  21. 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

  1. 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

  1. 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);
        }
        // ...
    }
    
  2. 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);
        }
        // ...
    }
    
  3. 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);
        }
        // ...
    }
    
  4. 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);
        }
        // ...
    }    
    
  5. 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

  1. 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);
        }
        // ...
    }
    
  2. 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);
        }
        // ...
    }
    
  3. 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);
        }
        // ...
    }
    
  4. 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);
        }
        // ...
    }
    
  5. Chart: Draw chart on canvas.

Colored text objects

  1. 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);
        }
        // ...
    }
    
  2. 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);
        }
        // ...
    }
    
  3. 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

  1. 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

  1. 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);
    
  2. Wrap-expand text
    var textObject = scene.rexUI.wrapExpandText(textObject);
    // var textObject = scene.rexUI.wrapExpandText(textObject, minWidth);
    

Touch input

  1. 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);
    
  2. 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);
    
  3. 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);
    
  4. 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);
    
  5. 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);
    
  6. Pinch: Get scale factor from 2 dragging touch pointers.
    var pinch = scene.rexUI.add.pinch(config);
    
    or
    var pinch = new RexPlugins.UI.Pinch(config);
    
  7. 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

  1. 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);
    
  2. 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

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();
    */
});

Demos