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. Drop down list: A label can open a drop-down list panel.
  5. Fix-width-buttons: A container with a group of fix-width buttons.
  6. Fix-width-sizer: Layout children game objects into lines.
  7. Grid-buttons: A container with a group of buttons in grids.
  8. Grid-sizer: Layout children game objects in grids.
  9. Grid-table: A container with a grid table, slider, and scroller.
  10. Holy grail: Layout elements in Holy grail style.
  11. Knob: A knob button based on circular progress.
  12. Label: A container with an icon, text, and background.
  13. Menu: A container with buttons and sub-menu.
  14. Number-bar: A container with an icon, slider, text, and background.
  15. Overlap sizer: Layout children game objects overlapped.
  16. Pages: A container with pages, only current page is visible.
  17. Scroll-able panel: A container with a panel, slider, and scroller.
  18. Sizer: Layout children game objects.
  19. Slider: A container with a track, indicator, thumb and background.
  20. Tab-pages: A container with tabs and pages, only current page is visible.
  21. Tabs: A container with 4 groups of buttons around a center panel.
  22. TextArea: A container with a text, slider, and scroller.
  23. Textbox: A container with an icon, (typing and paging) text, and background.
  24. Toast: Show text message for a short while.

Scroll-able table

There are 3 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.
  • Fixwidth-sizer adds all objects. Put this fixwidth-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);
    
    var ninePatch = scene.rexUI.add.ninePatch2(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);
        }
        // ...
    }
    
    class MyNinePatch extends RexPlugins.UI.NinePatch2 {
        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);
        }
        // ...
    }
    
  6. Cover: Rectangle shape covered full window, and block all touch events.
    var shape = scene.rexUI.add.cover(config);
    
    or
    class MyCover extends RexPlugins.UI.Cover {
        constructor(scene, config) {
            super(scene, config);
            // ...
            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. Hidden text edit: Create an invisible Input DOM element to edit string content.
    var hiddenEdit = this.rexUI.add.hiddenEdit(textObject, config);
    
  2. Text edit: Create an input text object above a text object to edit string content.
    scene.rexUI.edit(textObject, config);
    // scene.rexUI.edit(textObject, config, onClose);
    
  3. Wrap-expand text
    var textObject = scene.rexUI.wrapExpandText(textObject);
    // var textObject = scene.rexUI.wrapExpandText(textObject, minWidth);
    
  4. Font-size-expand text
    var textObject = scene.rexUI.fontSizeExpandText(textObject);
    // var textObject = scene.rexUI.fontSizeExpandText(textObject, minWidth, maxHeight);
    
  5. Set font-size to fit width
    var textObject = scene.rexUI.fontSizeFitToWidth(textObject, width);
    

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. Click-Outside: Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.
    var clickOutside = scene.rexUI.add.clickOutside(gameObject, config);
    
    or
    var clickOutside = new RexPlugins.UI.ClickOutside(gameObject, config);
    
  3. 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);
    
  4. 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);
    
  5. 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);
    
  6. 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);
    
  7. Pinch: Get scale factor from 2 dragging touch pointers.
    var pinch = scene.rexUI.add.pinch(config);
    
    or
    var pinch = new RexPlugins.UI.Pinch(config);
    
  8. Rotste: Get spin angle from 2 dragging touch pointers.
    var rotate = scene.rexUI.add.rotate(config);
    
    or
    var rotate = new RexPlugins.UI.Rotate(config);
    
  9. Touch event stop: Stop touch events propagation.
    var touchEventStop = scene.rexUI.add.toucheventstop(gameObject, config);
    
    or
    var touchEventStop = new RexPlugins.UI.TouchEventStop(gameObject, config);
    

Behaviors

  1. Modal promise: Modal behavior wrapped into promise.
    scene.rexUI.modalPromise(gameObject, config)
        .then(function(closeEventData){ })
    
    • Close modal dialog:
      scene.rexUI.modalClose(gameObject);
      // scene.rexUI.modalClose(gameObject, closeEventData);
      
      or
      gameObject.emit('modal.requestClose');
      // gameObject.emit('modal.requestClose', closeEventData);
      
      • Fire 'modal.requestClose' event on game object, which will invoke modal.requestClose() method. After closing dialog, resolve part of promise will be triggered.
  2. 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);
    
  3. Fade in, fade out destroy
    scene.rexUI.fadeIn(gameObject, duration);
    // scene.rexUI.fadeIn(gameObject, duration, alpha);
    
    scene.rexUI.fadeOutDestroy(gameObject, duration);
    
  4. Ease-move to, ease-move from
    scene.rexUI.easeMoveTo(gameObject, duration, x, y);
    // scene.rexUI.easeMoveTo(gameObject, duration, x, y, ease);
    
    scene.rexUI.easeMoveFrom(gameObject, duration, x, y);
    // scene.rexUI.easeMoveFrom(gameObject, duration, x, y, ease);
    
  5. Shake
    scene.rexUI.shake(gameObject, config);
    
  6. 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);
    
  7. Skew: Snapshot children of containerlite, to a skew render texture.
    var skew = scene.rexUI.add.skew(gameObject, config);
    
    or
    var skew = new RexPlugins.UI.Skew(gameObject, config);
    

Helper methods

Get parent

  • Get parent sizer
    var parentSizer = scene.rexUI.getParentSizer(gameObject);
    
    • gameObject : Any game object added to sizer.
  • Get ancestor sizer matched given name
    var parentSizer = scene.rexUI.getParentSizer(gameObject, name);
    
    • gameObject : Any game object added to sizer.
    • name : Name string.
  • 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();
    */
});

YAML

js-yaml

try {
    const doc = scene.rexUI.yaml.load(yamlStrinig);
} catch (e) {
    // ...
}
scene.rexUI.yaml.loadAll(data, function (doc) {
    // ...
});

Demos