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);
    

List of ui plugins

UI components

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

Canvas 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. 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);
        }
        // ...
    }
    

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);
    

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 behaiovrs on a game object, to detect input events of children.

sizer.setChildrenInteractive({
    // 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
})
  • 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);
    

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