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 'phaser';
import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';
declare module 'phaser' {
  interface Scene {
    rexUI: RexUIPlugin;
  }
}

or

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. Color componets: Edit color value by RGB, or HSV input fields.
  4. Color input: Color number or color string input field.
  5. Color picker: Pick color value from H and SV palettes.
  6. Confirm action button: Create a modal confirm dialog temporary, invoke callback after clicking button.
  7. Confirm dialog: Using json style to create confirm dialog.
  8. Dialog: A container with a title, content, buttons and background.
  9. Drop down list: A label can open a drop-down list panel.
  10. Exp bar: Disply experience bar on NameValueLabel.
  11. File selector button: A transparent file chooser button above a Label.
  12. Fix-width-buttons: A container with a group of fix-width buttons.
  13. Fix-width-sizer: Layout children game objects into lines.
  14. Folder: A container with a title, foldable child, and background.
  15. Grid-buttons: A container with a group of buttons in grids.
  16. Grid-sizer: Layout children game objects in grids.
  17. Grid-table: A container with a grid table, slider, and scroller.
  18. Holy grail: Layout elements in Holy grail style.
  19. Knob: A knob button based on circular progress.
  20. Label: A container with an icon, text, and background.
  21. Menu: A container with buttons and sub-menu.
  22. Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.
  23. Image input label: A container with a canvas icon, text, and background. Click icon to popup a (image) file chooser dialog, display selected image on canvas.
  24. Number-bar: A container with an icon, slider, text, and background.
  25. Overlap sizer: Layout children game objects overlapped.
  26. Pages: A container with pages, only current page is visible.
  27. Perspective card: A container with front and back faces.
  28. Scroll-able panel: A container with a panel, slider, and scroller.
  29. Simple drop down list: Using plain object to create drop down list.
  30. Simple label: Using json style to create label.
  31. Simple title label: Using json style to create title label.
  32. Simple text box: Using json style to create text box.
  33. Sizer: Layout children game objects.
  34. Slider: A container with a track, indicator, thumb and background.
  35. Split panels: A container with left(top) panel, right(bottom) panel, splitter, and background. Drag splitter to resize with left(top) panel, right(bottom) panel.
  36. Tab-pages: A container with tabs and pages, only current page is visible.
  37. Tabs: A container with 4 groups of buttons around a center panel.
  38. TextArea: A container with a text, slider, and scroller.
  39. TextAreaInput: A container with a canvasInput, and slider.
  40. Textbox: A container with an icon, (typing and paging) text, and background.
  41. Title label: A container with title, text in two rows, and an icon, background.
  42. Toast: Show text message for a short while.
  43. Toast queue: Queue messages for a short while.
  44. Tweaker: Fine-tuning properties of target object.

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, 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. Alpha mask image: Load a texture, then apply an alpha mask from another texture.
    var image = scene.rexUI.add.alphaMaskImage(x, y, key, frame, config);
    
    or
    class MyImage extends RexPlugins.UI.AlphaMaskImage {
        constructor(scene, x, y, key, frame, config) {
            super(scene, x, y, key, frame, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  4. 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);
        }
        // ...
    }
    
  5. 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);
        }
        // ...
    }
    
  6. Line progress shape: Horizontal line progress bar shape.
    var lineProgress = scene.rexUI.add.lineProgress(x, y, width, height, barColor, value, config);
    
    or
    class MyLineProgress extends RexPlugins.UI.LinerProgress {
        constructor(scene, x, y, width, height, barColor, value, config) {
            super(scene, x, y, width, height, barColor, value, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  7. Line progress canvas: Horizontal line progress bar filled with gradient color on canvas.
    var lineProgress = scene.rexUI.add.lineProgressCanvas(x, y, width, height, barColor, value, config);
    
    or
    class MyLineProgress extends RexPlugins.UI.LinerProgressCanvas {
        constructor(scene, x, y, width, height, barColor, value, config) {
            super(scene, x, y, width, height, barColor, value, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  8. Checkbox: Checkbox input with drawing checker path animation.
    var checkbox = scene.rexUI.add.checkbox(x, y, width, height, color, config);
    
    or
    class MyCheckbox extends RexPlugins.UI.Checkbox {
        constructor(scene, x, y, width, height, color, config) {
            super(scene, x, y, width, height, color, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  9. Toggle switch: Toggle-switch input.
    var toggleSwitch = scene.rexUI.add.toggleSwitch(x, y, width, height, color, config);
    
    or
    class MyToggleSwitch extends RexPlugins.UI.ToggleSwitch {
        constructor(scene, x, y, width, height, color, config) {
            super(scene, x, y, width, height, color, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  10. Triangle: Trangle shape inside a rectangle bounds.
    var triangle = scene.rexUI.add.triangle(x, y, width, height, fillColor, fillAlpha);
    
    or
    class MyTriangle extends RexPlugins.UI.Triangle {
        constructor(scene, x, y, width, height, fillColor, fillAlpha) {
            super(scene, x, y, width, height, fillColor, fillAlpha);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  11. 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);
        }
        // ...
    }
    
  4. Text player: Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.
    var txt = scene.rexUI.add.textPlayer(config);
    
    or
    class MyText extends RexPlugins.UI.TextPlayer {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  5. Canvas input: An invisible Input DOM element to receive character input and display on DynamicText.
    var txt = scene.rexUI.add.canvasInput(config);
    
    or
    class MyText extends RexPlugins.UI.CanvasInput {
        constructor(scene, config) {
            super(scene, 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);    
    
    or
    var textObject = scene.rexUI.fontSizeExpandText(textObject, {
        fitHeight: true
    });
    
  5. Set font-size to fit width
    var textObject = scene.rexUI.setFontSizeFitToWidth(textObject, width);
    
  6. Text typing
    var textTyping = scene.rexUI.add.textTyping(textObject, config);
    
  7. Text page
    var textPage = scene.rexUI.add.textPage(textObject, config);
    

Scaled image

  1. Image box: Keep aspect ratio of image game object after scale-down resizing.
    var image = scene.rexUI.add.imageBox(x, y, texture, frame, config);
    
    or
    class MyImageBox extends RexPlugins.UI.ImageBox {
        constructor(scene, x, y, texture, frame, config) {
            super(scene, x, y, texture, frame, 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);
        }
        // ...
    }
    
  2. Transition image pack: Transit texture to another one, with some pre-build effects, extended from TransitionImage.
    var image = scene.rexUI.add.transitionImagePack(x, y, texture, frame, config);
    
    or
    class MyTransitionImagePack extends RexPlugins.UI.TransitionImagePack {
        constructor(scene, x, y, texture, frame, config) {
            super(scene, x, y, texture, frame, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    

Dom game objects

  1. Input text: Input DOM element.
    var inputText = scene.rexUI.add.inputText(config);
    
    or
    class MyInputText extends RexPlugins.UI.InputText {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  2. File chooser: Create a transparent file chooser button (<input type="file">).
    var fileChooser = scene.rexUI.add.fileChooser(config);
    
    or
    class MyFileChooser extends RexPlugins.UI.FileChooser {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  3. File drop zone: Create a div element for dropping file(s).
    var fileDropZone = scene.rexUI.add.fileDropZone(config);
    
    or
    class MyFileDropZpne extends RexPlugins.UI.FileDropZpne {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    

Layer manager

Layer manager : A dictionary to store Layer game objects.

var layerManager = scene.rexUI.add.layerManager({
    // layers: ['layer0', 'layer1', ...]
});

// layerManager.addToLayer(name, gameObject);

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. In touching: Fires 'intouch' event every tick when pressing on a game object.
    var inTouching = scene.rexUI.add.inTouching(gameObject, config);
    
    or
    var inTouching = new RexPlugins.UI.inTouching(gameObject, config);
    
  4. 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);
    
  5. 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);
    
  6. 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);
    
  7. 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);
    
  8. Pinch: Get scale factor from 2 dragging touch pointers.
    var pinch = scene.rexUI.add.pinch(config);
    
    or
    var pinch = new RexPlugins.UI.Pinch(config);
    
  9. Rotste: Get spin angle from 2 dragging touch pointers.
    var rotate = scene.rexUI.add.rotate(config);
    
    or
    var rotate = new RexPlugins.UI.Rotate(config);
    
  10. 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. Confirm action : Create a modal confirm dialog temporary, invoke callback after clicking button.
    scene.rexUI.confirmAction(scene, config)
        .then(function(data){ })
    
  2. 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.
  3. 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);
    
  4. Fade in, fade out destroy
    scene.rexUI.fadeIn(gameObject, duration);
    // scene.rexUI.fadeIn(gameObject, duration, alpha);
    
    scene.rexUI.fadeOutDestroy(gameObject, duration);
    
  5. 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);
    
  6. Shake
    scene.rexUI.shake(gameObject, config);
    
  7. 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);
    
  8. 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.

Remove from parent

scene.rexUI.removeFromParent(gameObject);

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