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. 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 dialog: Using json style to create confirm dialog.
  7. Dialog: A container with a title, content, buttons and background.
  8. Drop down list: A label can open a drop-down list panel.
  9. Exp bar: Disply experience bar on NameValueLabel.
  10. File selector button: A transparent file chooser button above a Label.
  11. Fix-width-buttons: A container with a group of fix-width buttons.
  12. Fix-width-sizer: Layout children game objects into lines.
  13. Folder: A container with a title, foldable child, and background.
  14. Grid-buttons: A container with a group of buttons in grids.
  15. Grid-sizer: Layout children game objects in grids.
  16. Grid-table: A container with a grid table, slider, and scroller.
  17. Holy grail: Layout elements in Holy grail style.
  18. Knob: A knob button based on circular progress.
  19. Label: A container with an icon, text, and background.
  20. Menu: A container with buttons and sub-menu.
  21. Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.
  22. 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.
  23. Number-bar: A container with an icon, slider, text, and background.
  24. Overlap sizer: Layout children game objects overlapped.
  25. Pages: A container with pages, only current page is visible.
  26. Perspective card: A container with front and back faces.
  27. Scroll-able panel: A container with a panel, slider, and scroller.
  28. Simple drop down list: Using plain object to create drop down list.
  29. Simple label: Using json style to create label.
  30. Sizer: Layout children game objects.
  31. Slider: A container with a track, indicator, thumb and background.
  32. Tab-pages: A container with tabs and pages, only current page is visible.
  33. Tabs: A container with 4 groups of buttons around a center panel.
  34. TextArea: A container with a text, slider, and scroller.
  35. TextAreaInput: A container with a canvasInput, and slider.
  36. Textbox: A container with an icon, (typing and paging) text, and background.
  37. Title label: A container with title, text in two rows, and an icon, background.
  38. Toast: Show text message for a short while.
  39. 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.textTyping(textObject, config);
    
  7. Text page
    var textPage = scene.rexUI.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 MyTransitionImage 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);
        }
        // ...
    }
    

States game objects

  1. States image: Using plain object to create Image game object, with active, hover, disable styles.
    var image = scene.rexUI.add.statesImage(config);
    
    or
    class MyStatesImage extends RexPlugins.UI.StatesImage {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  2. States text: Using plain object to create Text game object, with active, hover, disable styles.
    var txt = scene.rexUI.add.statesText(config);
    
    or
    class MyStatesText extends RexPlugins.UI.StatesText {
        constructor(scene, config) {
            super(scene, config);
            // ...
            scene.add.existing(this);
        }
        // ...
    }
    
  3. States round-rectangle: Using plain object to create round rectangle game object, with active, hover, disable styles.
    var rect = scene.rexUI.add.statesRoundRectangle(config);
    
    or
    class MyStatesRoundRectangle extends RexPlugins.UI.StatesRoundRectangle {
        constructor(scene, config) {
            super(scene, 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);
        }
        // ...
    }
    

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