Phaser3 Rex plugins

https://rexrainbow.github.io/phaser3-rex-notes/docs/site
Admin
A comprehensive collection of plugins and extensions for the Phaser 3 game framework, offering a...
Tokens:1,457,528
Snippets:13,112
Trust Score:8.3
Update:5 months ago
Show doc for...
Tokens:
Raw
### SmoothedKeyControl Setup

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera-controller

Example of creating a SmoothedKeyControl instance for camera manipulation.

```APIDOC
## SmoothedKeyControl Setup

### Description
Creates a camera controller that responds to keyboard input with smoothing.

### Method
`new Phaser.Cameras.Controls.SmoothedKeyControl(config)`

### Parameters
#### Configuration Object (`config`)
- `camera` (Phaser.Cameras.Scene2D.Camera) - The camera to control.
- `left` ({ isDown: boolean, isUp: boolean }) - Input object for the left key.
- `right` ({ isDown: boolean, isUp: boolean }) - Input object for the right key.
- `up` ({ isDown: boolean, isUp: boolean }) - Input object for the up key.
- `down` ({ isDown: boolean, isUp: boolean }) - Input object for the down key.
- `zoomIn` ({ isDown: boolean, isUp: boolean }) - Input object for the zoom in key (optional).
- `zoomOut` ({ isDown: boolean, isUp: boolean }) - Input object for the zoom out key (optional).
- `zoomSpeed` (number) - Speed of zooming.
- `minZoom` (number) - Minimum zoom level.
- `maxZoom` (number) - Maximum zoom level.
- `acceleration` ({ x: number, y: number }) - Acceleration values for movement (optional).
- `drag` ({ x: number, y: number }) - Drag values for movement (optional).
- `maxSpeed` ({ x: number, y: number }) - Maximum speed values for movement (optional).

### Request Example
```javascript
var cursors = scene.input.keyboard.createCursorKeys();
var controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
    camera: camera,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    zoomIn: null,
    zoomOut: null,
    zoomSpeed: 0.01,
    minZoom: 0.001,
    maxZoom: 1000
});
```
```

--------------------------------

### FixedKeyControl Setup

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera-controller

Example of creating a FixedKeyControl instance for camera manipulation.

```APIDOC
## FixedKeyControl Setup

### Description
Creates a camera controller that responds to keyboard input without smoothing.

### Method
`new Phaser.Cameras.Controls.FixedKeyControl(config)`

### Parameters
#### Configuration Object (`config`)
- `camera` (Phaser.Cameras.Scene2D.Camera) - The camera to control.
- `left` ({ isDown: boolean, isUp: boolean }) - Input object for the left key.
- `right` ({ isDown: boolean, isUp: boolean }) - Input object for the right key.
- `up` ({ isDown: boolean, isUp: boolean }) - Input object for the up key.
- `down` ({ isDown: boolean, isUp: boolean }) - Input object for the down key.
- `zoomIn` ({ isDown: boolean, isUp: boolean }) - Input object for the zoom in key (optional).
- `zoomOut` ({ isDown: boolean, isUp: boolean }) - Input object for the zoom out key (optional).
- `speed` (number) - Speed of movement and zooming.

### Request Example
```javascript
var config = {
    camera: camera,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    zoomIn: null,
    zoomOut: null,
    speed: 1
};
var controls = new Phaser.Cameras.Controls.FixedKeyControl(config);
```
```

--------------------------------

### Start Loading Animation Scene (npm)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/loading-animation-scene

Start the loading animation scene after installing via npm.

```javascript
scene.plugins.get('rexLoadingAnimationScene').startScene(config);
```

--------------------------------

### Start Playing

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade-tcrp-player

How to start the playback of loaded commands.

```APIDOC
## Start playing
### Description
Start the playback of loaded commands.
### Method
```javascript
player.start();
// player.start(startAt);  // Start-at time in step-count
```
### Parameters
* `startAt` (Number): Optional. The time in step-count at which to start playback.
```

--------------------------------

### Ease-move to/from (NPM Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/easemove

Example of using moveTo and moveFrom methods after installing and configuring the plugin via npm.

```APIDOC
## Ease-move to/from (NPM Plugin)
### Description
Ease-move to/from
### Code
```javascript
var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease);
var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);
```
```

--------------------------------

### Quick Start: Get Configuration Values

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/config-data

Demonstrates a common pattern for extracting configuration values with default fallbacks. Ensure Phaser.Utils.Objects.GetValue is available.

```javascript
const GetValue = Phaser.Utils.Objects.GetValue;
var myMethod = function(config) {
    var x = GetValue(config, 'x', 0);
    var y = GetValue(config, 'y', 0);
    var width = GetValue(config, 'width', 0);
    var height = GetValue(config, 'height', 0);
    // ...
}
```

--------------------------------

### Start Angle

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-arc

Methods for getting and setting the start angle of the Arc.

```APIDOC
## Angle
  * Start angle, in degrees.
    * Get 
```
var startAngle = arc.startAngle;

```

    * Set 
```
arc.setStartAngle(startAngle);
// arc.setStartAngle(startAngle, anticlockwise);

```

or 
```
arc.startAngle = startAngle;

```
```

--------------------------------

### Install Plugin (Import Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/virtualjoystick

Install the plugin via npm and configure it in the game's settings. Then, create an instance.

```APIDOC
## Import plugin
### Description
Install rex plugins from npm and import plugin in configuration of game.

### Installation
```bash
npm i phaser3-rex-plugins
```

### Configuration
```javascript
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexVirtualJoystick',
            plugin: VirtualJoystickPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

## Create instance
### Description
Create an instance of the virtual joystick using the configured plugin key.

### Code
```javascript
var joyStick = scene.plugins.get('rexVirtualJoystick').addPlayer(scene, config);
```
```

--------------------------------

### Start recording

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade-tcrp-recorder

Start the recording process. Optionally, specify a start time in step-counts.

```javascript
recorder.start();
// recorder.start(startAt);  // start-at in step-count
```

--------------------------------

### Initialize Camera Controller with Configuration

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/input-to-camera

Create and configure a camera controller instance. This example shows various options for zoom, pan, bounds scrolling, and input targets.

```javascript
var cameraController = scene.plugins.get('rexCameraController').add(scene, {
    // camera: scene.cameras.main,
    // minZoom: undefined,
    // maxZoom: undefined,

    // panScroll: true,
    // panScrollEnable: true,

    // pinchZoom: true,
    // pinchZoomEnable: true,
    // pinchZoomMin: undefined,
    // pinchZoomMax: undefined,
    // pinchZoomFocusEnable: true,

    // inputTarget: undefined,

    // boundsScroll: true,
    // boundsScrollEnable: true,

    // mouseWheelZoom: truem
    // mouseWheelZoomEnable: true,
    // mouseWheelZoomStep: 0.01,
    // mouseWheelZoomMin: undefined,
    // mouseWheelZoomMax: undefined,

    // enable: true
});
```

--------------------------------

### Get Arc Start Angle

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-arc

Retrieve the starting angle of the arc in degrees.

```javascript
var startAngle = arc.startAngle;
```

--------------------------------

### Get Start Angle

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/canvas-circularprogress

Retrieve the starting angle of the circular progress bar in radians.

```javascript
var startAngle = circularProgress.startAngle;
```

--------------------------------

### Get Elapsed Time

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/timer

Gets the amount of time that has passed since the timer started or was last reset.

```APIDOC
## Get Elapsed Time

### Description
Gets the amount of time that has passed since the timer started or was last reset.

### Method
`timer.getElapsed()` or `timer.getElapsedSeconds()`

### Return Value
- **elapsed** (number) - Elapsed time in milliseconds.
- **elapsedSeconds** (number) - Elapsed time in seconds.

### Request Example
```javascript
var elapsed = timer.getElapsed();   // ms
var elapsedSeconds = timer.getElapsedSeconds(); // sec
```
```

--------------------------------

### Get Line Start Position

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/line

Retrieve the current x and y coordinates of the line's starting point.

```javascript
var x0 = line.x0;
var y0 = line.y0;
```

--------------------------------

### Install Plugin (Import Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade-tcrp-player

How to install and use the plugin by importing it via npm and configuring it in the game settings.

```APIDOC
## Import plugin
### Description
Install rex plugins from npm and import the plugin in your game configuration.
### Installation
```bash
npm i phaser3-rex-plugins
```
### Configuration
```javascript
import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexTCRP',
            plugin: TCRPPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```
```

```APIDOC
## Create instance
### Description
Create an instance of the player using the configured plugin key.
### Code
```javascript
var player = scene.plugins.get('rexTCRP').addPlayer(scene, config);
```
```

--------------------------------

### Get Start Point

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/path

Retrieves the starting point of the path or curve. An optional 'out' object can be provided to store the result.

```APIDOC
## Get Start Point

### Description
Retrieves the starting point of the path or curve.

### Method
- `path.getStartPoint()`
- `curve.getStartPoint()`

### Parameters
#### Path Parameters
- **out** (object) - Optional - An object to store the resulting point coordinates. If not provided, a new object is created.

### Request Example
```javascript
var out = path.getStartPoint();
// or
var out = path.getStartPoint(out);
```

### Response
#### Success Response (200)
- **out** (object) - An object containing the x and y coordinates of the start point.
```

--------------------------------

### Create instance with configuration

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/levelcounter

Create a level-counter instance, configuring the level table, max level, and initial experience.

```javascript
var levelCounter = scene.plugins.get('rexLevelCounter').add({
    table: function(level) { return level * 100; },
    // table: [0, 100, 200, 300,],

    // maxLevel: -1,

    // exp: 0,
});
```

--------------------------------

### Create Text Player Instance

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/textplayer

Demonstrates how to create a new Text Player instance with various configuration options.

```APIDOC
## Create instance

```javascript
var txt = scene.add.rexTextPlayer({
    x: 0,
    y: 0,
    width: undefined,
    height: undefined,
    resolution: 1,

    padding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}

    background: {
        color: null,
        color2: null,
        horizontalGradient: true,

        stroke: null,
        strokeThickness: 2,

        cornerRadius: 0,
        cornerIteration: null
    },

    innerBounds: {
        color: null,
        color2: null,
        horizontalGradient: true,

        stroke: null,
        strokeThickness: 2
    },

    style: {
        bold: false,
        italic: false,
        fontSize: '16px',
        fontFamily: 'Courier',
        color: '#fff',
        stroke: '#fff',
        strokeThickness: 0,
        shadowColor: null,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 0,
        offsetX: 0,
        offsetY: 0,
        leftSpace: 0,
        rightSpace: 0,
    },

    parser: {
        delimiters: '[]',
        comment: '//',
        // translateTagNameCallback: undefined,
    }

    wrap: {
        callback: undefined, // Default wrapping callback is dynamicText.runWordWrap()
        lineHeight:
        // maxLines: 
        padding: { top: 0, left: 0, right: 0, bottom: 0 },
        letterSpacing: 0,
        wrapMode: 'word',  // 1|'word'|2|'char'|'character'|3|'mix'
        hAlign: 0, // 0|'left'|1|'center'|2|'right'|3|'justify'|'justify-left'|4|'justify-center'|5| justify-right'
        vAlign: 0, // 0|'top'|1|'center'|2|'bottom'

    },

    typing: {
        speed: 250,
        onTypingStart: function (children) {
            for (var i = 0, cnt = children.length; i < cnt; i++) {
                children[i].setVisible(false);
            }
        },  // Default: set all children invisible
        animation: undefined,  // Default: no typing animation, only invoke onStart callback
        animation: {
            duration: 1000,
            yoyo: false,
            onStart: function(child) {
                child.setVisible();
            },
            onProgress: function(child, t) {

            },
            onComplete: function(child) {

            }
        },

        // skipSpace: false,

        // minSizeEnable: false,

        fadeOutPage: undefined,  // Default: no fade-out-page animation
        fadeOutPage: function(children) {
            return eventEmitter;
            return promise;
        },

    },

    images: {
        // key: {width, height}
        // key: {key, frame, width, height}
    },

    sprites: {
        // createCallback: 'sprite',
        // createCallback: function(scene, ...) { return gameObject; },

        // fade: 500,
        // fade: {mode: 'tint', time: 500},

        // viewportCoordinate: false,
        // viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },

    }, 

    layers: undefined, // []

    sounds: {
        bgm: {
            initial: undefinied,
            loop: true,
            fade: 500
        },
        bgm2: {
            initial: undefinied,
            loop: true,
            fade: 500
        }
    },

    clickTarget: this,  // This text player    
    nextPageInput: null,
    // ignoreNextPageInput: false,

    text: undefined
});

```

### Parameters

* `x` (number): Position X of this text-player game object.
* `y` (number): Position Y of this text-player game object.
* `width` (number | undefined): Fixed width of this text-player game object. If `undefined`, width is set after `runWordWrap` is invoked. Wrap-width is `width - padding.left - padding.right`.
* `height` (number | undefined): Fixed height of this text-player game object. If `undefined`, height is set after `runWordWrap` is invoked.
* `resolution` (number): The resolution the content is rendered to its internal canvas at. Default value is `1`.
* `padding` (number | object): Padding of bounds. Can be a single number for all sides or an object with `left`, `right`, `top`, `bottom` properties.
* `background` (object): Properties of background round-rectangle.
    * `color` (string | null): Fill color. `null` for no filling.
    * `color2` (string | null): Gradient fill color. `null` for no gradient filling.
    * `horizontalGradient` (boolean): `true` for horizontal gradient filling, `false` for vertical.
    * `stroke` (string | null): Stroke color. `null` for no stroke.
    * `strokeThickness` (number): Line width of stroke.
    * `cornerRadius` (number): Corner-radius of round rectangle. `0` for no round corner, `> 0` for convex, `< 0` for concave.
    * `cornerIteration` (number | null): Iteration of corner-radius. `null` draws via arc, a number draws via lines.
* `innerBounds` (object): Properties of inner-bounds.
    * `color` (string | null): Fill color. `null` for no filling.
    * `color2` (string | null): Gradient fill color. `null` for no gradient filling.
    * `horizontalGradient` (boolean): `true` for horizontal gradient filling, `false` for vertical.
    * `stroke` (string | null): Stroke color. `null` for no stroke.
    * `strokeThickness` (number): Line width of stroke.
* `style` (object): Text style properties.
    * `bold` (boolean): Bold style.
    * `italic` (boolean): Italic style.
    * `fontSize` (string): Font size.
    * `fontFamily` (string): Font family.
    * `color` (string): Text color.
    * `stroke` (string): Stroke color.
    * `strokeThickness` (number): Stroke thickness.
    * `shadowColor` (string | null): Shadow color.
    * `shadowOffsetX` (number): Shadow offset X.
    * `shadowOffsetY` (number): Shadow offset Y.
    * `shadowBlur` (number): Shadow blur.
    * `offsetX` (number): Text offset X.
    * `offsetY` (number): Text offset Y.
    * `leftSpace` (number): Left space.
    * `rightSpace` (number): Right space.
* `parser` (object): Parser configuration.
    * `delimiters` (string): Delimiters for tags.
    * `comment` (string): Comment character.
    * `translateTagNameCallback` (function | undefined): Callback to translate tag names.
* `wrap` (object): Word wrap configuration.
    * `callback` (function | undefined): Wrapping callback. Default is `dynamicText.runWordWrap()`.
    * `lineHeight` (number): Line height.
    * `maxLines` (number): Maximum number of lines.
    * `padding` (object): Padding for wrapping: `{ top, left, right, bottom }`.
    * `letterSpacing` (number): Letter spacing.
    * `wrapMode` (string | number): Wrap mode: `'word'`, `'char'`, `'mix'`, or `1`, `2`, `3`.
    * `hAlign` (string | number): Horizontal alignment: `'left'`, `'center'`, `'right'`, `'justify'`, `'justify-left'`, `'justify-center'`, `'justify-right'`, or `0`, `1`, `2`, `3`, `4`, `5`.
    * `vAlign` (string | number): Vertical alignment: `'top'`, `'center'`, `'bottom'`, or `0`, `1`, `2`.
* `typing` (object): Typing animation configuration.
    * `speed` (number): Typing speed in milliseconds per character.
    * `onTypingStart` (function): Callback when typing starts. Default sets all children invisible.
    * `animation` (object | undefined): Typing animation configuration. If `undefined`, no animation is used.
        * `duration` (number): Animation duration.
        * `yoyo` (boolean): Whether the animation should yoyo.
        * `onStart` (function): Callback when animation starts for a character.
        * `onProgress` (function): Callback during animation progress.
        * `onComplete` (function): Callback when animation completes for a character.
    * `skipSpace` (boolean): Whether to skip spaces during typing.
    * `minSizeEnable` (boolean): Whether to enable minimum size.
    * `fadeOutPage` (function | undefined): Callback for fade-out page animation. Returns an event emitter or promise.
* `images` (object): Configuration for images to be embedded.
    * `key` (object): Image key with optional `width` and `height`, or `key`, `frame`, `width`, `height`.
* `sprites` (object): Configuration for sprites to be embedded.
    * `createCallback` (string | function): Callback to create a sprite.
    * `fade` (number | object): Fade animation configuration.
    * `viewportCoordinate` (boolean | object): Whether to use viewport coordinates.
* `layers` (array | undefined): Array of layer configurations.
* `sounds` (object): Sound configuration.
    * `bgm` (object): Background music configuration.
        * `initial` (string | undefined): Initial sound key.
        * `loop` (boolean): Whether to loop the sound.
        * `fade` (number): Fade duration in milliseconds.
    * `bgm2` (object): Second background music configuration.
        * `initial` (string | undefined): Initial sound key.
        * `loop` (boolean): Whether to loop the sound.
        * `fade` (number): Fade duration in milliseconds.
* `clickTarget` (object): The game object to be used as the click target.
* `nextPageInput` (object | null): Input configuration for next page.
* `ignoreNextPageInput` (boolean): Whether to ignore next page input.
* `text` (string | undefined): The text content to display.
```

--------------------------------

### Get Start Point from Path or Curve

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/path

Retrieves the starting point of a path or curve. An optional 'out' object can be provided to modify.

```javascript
var out = path.getStartPoint();
// var out = path.getStartPoint(out);  // modify out
```

```javascript
var out = curve.getStartPoint();
// var out = curve.getStartPoint(out);  // modify out
```

--------------------------------

### Start Recording

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/tcrp-recoder

Begin recording commands. Optionally specify a start time.

```APIDOC
## Start recording
### Description
Start recording commands.
### Usage
```javascript
recorder.start();
// recorder.start(startAt);  // start-at time in ms
```
```

--------------------------------

### Install Plugin (Import Class)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/input-to-camera

Install the rex plugins from npm and import the CameraController class to create an instance.

```APIDOC
## Import class

* Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

* Import class
```javascript
import CameraController from 'phaser3-rex-plugins/plugins/cameracontroller.js';
```

* Add camera-controller object
```javascript
var cameraController = new CameraController(scene, config);
```
```

--------------------------------

### Get Any Tag Start with Payload

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/bracketparser2

Listen for any tag start event, capturing both the tag name and its payload. The payload is parsed into a key-value object.

```javascript
parser.on('+', function(tagName, payload){ /* ... */ });
```

--------------------------------

### Get Line Start and End Points

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/geom-line

Retrieve the start and end points of the line as Point objects. Optionally, provide a Point object to populate.

```javascript
var start = line.getPointA();  // start: {x, y}
var start = line.getPointA(start);  // push start
var end = line.getPointB();  // end: {x, y}
var end = line.getPointB(end);  // push end
```

--------------------------------

### Table Configuration Example

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/firebase-singleroom

Example of configuring tables for the single room, specifying key and type.

```javascript
[
    {
        key: tableKey,
        type: '1d'
    },
    {
        ...
    }
]

```

--------------------------------

### Install UI Plugin from Minify File

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-overview

Use this method to load the UI plugin in the preload stage by downloading a minify file. Ensure the 'key' is set to 'rexuiplugin'.

```javascript
scene.load.scenePlugin({
    key: 'rexuiplugin',
    url: filePath,
    sceneKey: 'rexUI'
});

```

--------------------------------

### Get Specific Tag Start with Payload

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/bracketparser2

Listen for a specific tag start event, including its associated payload. The payload is parsed into a key-value object.

```javascript
parser.on('+' + TagName, function(payload){ /* ... */ });
```

--------------------------------

### Install Plugin (Minify File)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-perspectivecard

How to load the rexUI plugin using a minify file in the preload stage.

```APIDOC
## Load minify file
  * Load plugin (minify file) in preload stage 
```
scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');

```

  * Add card object 
```
var card = scene.rexUI.add.perspectiveCard(config);

```
```

--------------------------------

### Configure and Start Camera Controller Plugin

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/input-to-camera

Configure the game to use the Camera Controller plugin by importing it and adding it to the global plugins configuration. Ensure 'start: true' is set to automatically start the plugin.

```javascript
import CameraControllerPlugin from 'phaser3-rex-plugins/plugins/cameracontroller-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexCameraController',
            plugin: CameraControllerPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

--------------------------------

### Get Elapsed Time

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/timer

Use `getElapsed()` to get the time passed since the timer started or was last reset, in milliseconds. `getElapsedSeconds()` provides the same value in seconds.

```javascript
var elapsed = timer.getElapsed();   // ms
var elapsed = timer.getElapsedSeconds(); // sec
// var elapsed = timer.elapsed;  // ms
```

--------------------------------

### Install Plugin (Minify File)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/virtualjoystick

Load the minified plugin file in the preload stage and create an instance using the plugin manager.

```APIDOC
## Load minify file
### Description
Load plugin (minify file) in preload stage

### Code
```javascript
scene.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true);
```

## Create instance
### Description
Create an instance of the virtual joystick plugin.

### Code
```javascript
var joyStick = scene.plugins.get('rexvirtualjoystickplugin').addPlayer(scene, config);
```
```

--------------------------------

### Install Plugin (Import Class)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gesture-tap

Install the rex plugins from npm, import the Tap class, and then add tap input.

```APIDOC
## Import class

* Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

* Import class
```
import { Tap } from 'phaser3-rex-plugins/plugins/gestures.js';
```

* Add tap input
```
var tap = new Tap(scene, config);
// var tap = new Tap(gameObject, config);
```
```

--------------------------------

### Get and Set Circular Bar Start Angle

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-circularprogress

Access or modify the starting angle of the circular bar in radians. Direct property assignment is also supported.

```javascript
var startAngle = circularProgress.startAngle;
```

```javascript
circularProgress.setStartAngle(startAngle);
circularProgress.startAngle = startAngle;
```

--------------------------------

### Install Plugin (Import Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/input-to-camera

Install the rex plugins from npm and import the CameraControllerPlugin for game configuration.

```APIDOC
## Import plugin

* Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

* Install plugin in configuration of game
```javascript
import CameraControllerPlugin from 'phaser3-rex-plugins/plugins/cameracontroller-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexCameraController',
            plugin: CameraControllerPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

* Add camera-controller object
```javascript
var cameraController = scene.plugins.get('rexCameraController').add(scene, config);
```
```

--------------------------------

### Bracket Parser Start Event

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/bracketparser

Listen for the 'start' event to execute code when parsing begins. No specific setup is required beyond attaching the event listener.

```javascript
parser.on('start', function(){ /* ... */ });

```

--------------------------------

### Apply HSL Adjust Effect to Camera (npm, Plugin Get)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-hsladjust

Apply the HSL Adjust effect to a camera using the plugin's get method after npm installation.

```javascript
var controller = scene.plugins.get('rexHSLAdjustFilter').add(camera, config);
```

--------------------------------

### Start emit particles along bounds of game object (npm)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/particles-along-bounds

Start emitting particles along the bounds of a game object using the plugin installed via npm.

```javascript
var particles = scene.plugins.get('rexParticlesAlongBounds').startEffect(gameObject, config);
```

--------------------------------

### Install Plugin (Import Class)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-shockwave

Install rex plugins via npm, import the ShockwaveFilter and ShockwaveController classes, register the filter, and then apply the effect.

```APIDOC
## Import class
  * Install rex plugins from npm 
```bash
npm i phaser3-rex-plugins
```

  * Import filter and controller class 
```javascript
import { ShockwaveFilter, ShockwaveController } from 'phaser3-rex-plugins/plugins/shockwavefilter.js';

```

  * Register effect 
```javascript
if (!scene.renderer.renderNodes.hasNode(ShockwaveFilter.FilterName)) {
    scene.renderer.renderNodes.addNodeConstructor(ShockwaveFilter.FilterName, ShockwaveFilter);
}

```

  * Apply effect
    * Apply effect to game object 
```javascript
gameObject.enableFilters().focusFilters();
var filterList = gameObject.filters.internal;
var controller = filterList.add(
    new ShockwaveController(filterList.camera, config)
);

```

    * Apply effect to camera 
```javascript
var filterList = camera.filters.internal;
var controller = filterList.add(
    new ShockwaveController(filterList.camera, config)
);

```
```

--------------------------------

### Create navigator with configuration

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/groupnavigator

Initialize a navigator instance with various configuration options, including targets and focus enable callbacks.

```javascript
var navigator = scene.plugins.get('rexGroupNavigator').add({
    // enable: true,

    targets: gameObjects,
    // columns: undefined,

    // getFocusEnableCallback(gameObject) { 
    //     return focusEnable;
    // }
    // focusEnableDataKey: undefined,
    // focusEnableKey: undefined
});
```

--------------------------------

### Get Line Length

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/geom-line

Calculate the Euclidean distance between the start and end points of the line.

```javascript
var length = Phaser.Geom.Line.Length(line);
```

--------------------------------

### Setup Firebase Storage

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/firebase-storage

Initializes the Firebase app and gets a reference to the storage service.

```APIDOC
## Setup Firebase Storage

### Description
Initializes the Firebase app and obtains a reference to the Firebase Storage service.

### Code
```javascript
import firebase from 'firebase/app';
import 'firebase/storage';

var firebaseApp = firebase.initializeApp({
   apiKey: '...', 
   authDomain: '...', 
   databaseURL: '...', 
   projectId: '...', 
   storageBucket: '...', 
   messagingSenderId: '...'
});
var storageRef = firebaseApp.storage().ref();
```
```

--------------------------------

### Create Drop Down Instance with Configuration

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/dropdown

Create a drop-down instance with various configuration options. This example shows common settings like expand direction, alignment, and closing behavior.

```javascript
var dropDown = scene.plugins.get('rexDropDown').add(gameObject, {
    // expandDirection: 0,
    // alignTargetX: 
    // alignTargetY: 
    // alignOffsetX: 
    // alignOffsetY: 
    // bounds:

    // When to close dropdown dialog?
    // touchOutsideClose: false,
    // anyTouchClose: false,

    // duration: {
    //     in: 200,
    //     out: 200
    // }

    // transitIn: undefined,
    // transitOut: undefined,

    // destroy: true
});
```

--------------------------------

### Get Start Line Index

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/textpage

Property returning the index of the first line of the current page.

```javascript
var startLineIndex = page.startLineIndex;
```

--------------------------------

### Install Plugin (Import Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/localstorage-data

Install the plugin via npm and configure it in the game's configuration. Then, extend an existing data object or create a new local storage data manager.

```APIDOC
## Import plugin

Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

Install plugin in configuration of game
```javascript
import LocalStorageDataPlugin from 'phaser3-rex-plugins/plugins/localstoragedata-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexLocalStorageData',
            plugin: LocalStorageDataPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

Extend existed data object (`game.registry`, or `scene.data`)
```javascript
var data = scene.plugins.get('rexLocalStorageData').extend(game.registry, config);
// var data = scene.plugins.get('rexLocalStorageData').extend(scene.data, config);
```

New local storage data manager
```javascript
var data = scene.plugins.get('rexLocalStorageData').add(parent, config);
```
```

--------------------------------

### Start Loading Animation Scene Configuration

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/loading-animation-scene

Configure and start the loading animation scene with custom callbacks.

```javascript
scene.plugins.get('rexLoadingAnimationScene').startScene({
    mainScene: 
    animationScene:

    onLoadingComplete: undefined
    onLoadingProgress: undefined
});
```

--------------------------------

### Get Arc Angles

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-custom-shapes

Retrieve the start angle, end angle, and anticlockwise flag of an arc.

```javascript
var startAngle = arc.startAngle;
var endAngle = arc.endAngle;
var anticlockwise = arc.anticlockwise; // boolean        
```

--------------------------------

### Create Instance

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/modal

Example of creating a modal instance with various configuration options.

```APIDOC
### Create instance
```javascript
var modal = scene.plugins.get('rexModal').add(gameObject, {
    // cover: {
    //     color: 0x0,
    //     alpha: 0.8,
    //     transitIn: function(gameObject, duration) { },
    //     transitOut: function(gameObject, duration) { },
    // },
    // cover: false,

    // When to close modal dialog?
    // touchOutsideClose: false,
    // anyTouchClose: false,
    // timeOutClose: false,
    // manualClose: false,

    // duration: {
    //     in: 200,
    //     hold: 2000,
    //     out: 200
    // }

    // transitIn: 0,
    // transitOut: 0,

    // destroy: true,
    // openOnStart: true
});
```
### Description
Configuration options for the modal behavior:
- `cover`: Configuration of Cover. A rectangle shape covered full window, and block all touch events.
  - `false`: Don't create cover game object.
  - `cover.transitIn`: Custom callback. Default behavior is fade-in.
    ```javascript
    function(gameObject, duration) {

    }
    ```
  - `cover.transitOut`: Custom callback. Default behavior is fade-out.
    ```javascript
    function(gameObject, duration) {

    }
    ```
- `touchOutsideClose`: Set to `true` to close modal dialog when clicking out side of `gameObject`. Default value is `false`. Will be set to `false` if `anyTouchClose` is set to `true`.
- `anyTouchClose`: Set to `true` to close modal dialog when any clicking. Default value is `false`.
- `timeOutClose`: Set to `true` to close modal dialog when holding time out (`duration.hold`). If `duration.hold` is given, default value is `true`. Otherwise default value is `false`.
- `manualClose`: Set to `true` to close modal dialog via `modal.requestClose()` method. Default value is `false`. When this parameter is `true`, other closing methods will be disabled. If `touchOutsideClose`, `anyTouchClose`, and `timeOutClose` are `false`, it is equal to `manualClose`.
- `duration`: Duration of transition-in, hold, trantion-out.
  - `duration.in`: Duration of transition-in (open dialog). `0`: No transition, open dialog immediately.
  - `duration.out`: Duration of transition-out (close dialog). `0`: No transition, close dialog immediately.
  - `duration.hold`: Duration of hold. `-1`: Disable `timeOutClose`.
- `transitIn`: Transition behavior of opening dialog.
  - `0`, `'popUp'`: Pop up dialog from `0` to current scale.
  - `1`, `'fadeIn'`: Fade in dialog
  - Custom callback
    ```javascript
    function(gameObject, duration) {

    }
    ```
- `transitOut`: Tween behavior of closing dialog.
  - `0`, `'scaleDown'`: Scale down dialog
  - `1`, `'fadeOut'`: Fade out dialog
  - Custom callback
    ```javascript
    function(gameObject, duration) {

    }
    ```
- `destroy`: `true`: Destroy dialog game object and this behavior when closing completed. Default behavior. `false`: Keep dialog game object and this behavior when closing completed. Could reuse it later.
- `openOnStart`: `true`: Open dialog game object (`modal.requestOpen()`) at beginning. Default behavior. `false`: Open dialog game object manually.
```

--------------------------------

### Get Current Start Row Index

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gridtable

Retrieve the index of the first visible row in the table.

```javascript
var rowIndex = table.startRowIndex;
```

--------------------------------

### Get Spiral Curve Angle

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/curve-spiral

Retrieve the start and end angles of the spiral curve in degrees.

```javascript
var startAnlge = spiral.startAngle;
var endAnlge = spiral.endAngle;
```

--------------------------------

### Setup SmoothedKeyControl

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera-controller

Create a SmoothedKeyControl instance for camera control with keyboard input. Requires cursor keys and camera object.

```javascript
var cursors = scene.input.keyboard.createCursorKeys();
var controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
    camera: camera,

    left: cursors.left,    // { isDown, isUp }
    right: cursors.right,  // { isDown, isUp }
    up: cursors.up,        // { isDown, isUp }
    down: cursors.down,    // { isDown, isUp }
    zoomIn: null,          // { isDown, isUp }
    zoomOut: null,         // { isDown, isUp }

    zoomSpeed: 0.01,
    minZoom: 0.001,
    maxZoom: 1000,

    acceleration: null,
    // acceleration: {
    //    x: 0,
    //    y: 0
    // }

    drag: null,
    // drag: {
    //    x: 0,
    //    y: 0
    // }

    maxSpeed: null
    // maxSpeed: {
    //    x: 0,
    //    y: 0
    // }
});
```

--------------------------------

### Install rex plugins from npm

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/fsm

Install the phaser3-rex-plugins package from npm.

```APIDOC
## Install rex plugins from npm
### Description
Install the phaser3-rex-plugins package from npm.

### Code
```bash
npm i phaser3-rex-plugins
```
```

--------------------------------

### Start Recording

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade-tcrp-recorder

Begin recording commands. Optionally, specify a starting time in step-count.

```APIDOC
## Start recording
### Description
Start recording
### Code
```javascript
recorder.start();
// recorder.start(startAt);  // start-at in step-count
```
```

--------------------------------

### Get Spiral Curve Radius

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/curve-spiral

Retrieve the start and end x and y radii of the spiral curve.

```javascript
var startXRadius = spiral.startXRadius;
var startYRadius = spiral.startYRadius;
var endXRadius = spiral.endXRadius;
var endYRadius = spiral.endYRadius;
```

--------------------------------

### Install Plugin

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-confirmactionbutton

Instructions for installing the Confirm Action Button plugin via minify file or npm.

```APIDOC
## Load minify file

Load plugin (minify file) in preload stage
```javascript
scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
```

Add button object
```javascript
var button = scene.rexUI.add.confirmActionButton(config);
```

## Import plugin

Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

Install plugin in configuration of game
```javascript
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

Add button object
```javascript
var button = scene.rexUI.add.confirmActionButton(config);
```

## Import class

Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

Import class
```javascript
import { ConfirmActionButton } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
```

Add button object
```javascript
var button = new ConfirmActionButton(scene, config);
scene.add.existing(button);
```
```

--------------------------------

### Apply HSL Adjust Effect to Game Object (npm, Plugin Get)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-hsladjust

Apply the HSL Adjust effect to a game object using the plugin's get method after npm installation.

```javascript
var controller = scene.plugins.get('rexHSLAdjustFilter').add(gameObject, config);
```

--------------------------------

### Install Plugin (Import Plugin)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/clickboardtotexture

Install the rex plugins via npm and configure the game to use the ClickboardToTexturePlugin.

```APIDOC
## Import plugin
Install rex plugins from npm
```bash
npm i phaser3-rex-plugins
```

Install plugin in configuration of game
```javascript
import ClickboardToTexturePlugin from 'phaser3-rex-plugins/plugins/clickboardtotexture-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexClickboardToTexture',
            plugin: ClickboardToTexturePlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

## Add clickboard-to-texture object
```javascript
var clickboardToTexture = scene.plugins.get('rexClickboardToTexture').add(scene);
```
```

--------------------------------

### Get Line Height

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/geom-line

Calculate the absolute difference between the y-coordinates of the line's start and end points.

```javascript
var width = Phaser.Geom.Line.Height(line);
```

--------------------------------

### Get Line Width

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/geom-line

Calculate the absolute difference between the x-coordinates of the line's start and end points.

```javascript
var width = Phaser.Geom.Line.Width(line);
```

--------------------------------

### Install Plugin (Minify File)

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scripttagloader

Shows how to load the minified plugin file in the preload stage and then add it to the scene's loader.

```APIDOC
## Install Plugin (Minify File)

### Description
Load the minified plugin file in the preload stage. The plugin is installed before `preload()` is called, but it needs to be explicitly added to the scene's loader using `addToScene(scene)`.

### Usage

1. **Scene Configuration**:
   Specify the plugin in the `pack.files` configuration.
   ```javascript
   var sceneConfig = {
       // ...
       pack: {
           files: [{
               type: 'plugin',
               key: 'rexscripttagloaderplugin',
               url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscripttagloaderplugin.min.js',
               start: true
           }]
       }
   };
   ```

2. **Preload Stage**:
   In your scene's `preload` method, get the plugin instance and add it to the scene's loader, then use `this.load.rexScriptTag()`.
   ```javascript
   class MyScene extends Phaser.Scene {
       constructor() {
           super(sceneConfig);
       }
       // ...
       preload() {
           // rexscripttagloaderplugin will be installed before preload(), but not added to loader yet
           // Call addToScene(scene) to add this await loader to loader of this scene
           this.plugins.get('rexscripttagloaderplugin').addToScene(this);

           // Now you can use rexScriptTag
           this.load.rexScriptTag('https://example.com/your-script.js');
       }
   }
   ```
```

--------------------------------

### Get Random Child

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/container

Retrieves a random child from the container within a specified start index and length.

```javascript
var child = container.getRandom(startIndex, length);
```

--------------------------------

### Get any-tag-start

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/bracketparser2

Listen for the start of any tag, regardless of its name. The event provides both the tag name and its payload.

```APIDOC
## Get any-tag-start

### Description
Listen for the start of any tag, regardless of its name. The event provides both the tag name and its payload.

### Method
`parser.on()`

### Parameters
- **event** (string) - Required - The event name, `'+'`.
- **callback** (function) - Required - The function to execute when the event is triggered. It receives the tag name and its payload.
  - **tagName** (string) - The name of the tag.
  - **payload** (object) - An object containing key-value pairs of the tag's parameters.

### Example
```javascript
parser.on('+', function(tagName, payload){
  // ...
});
```

### Payload Example
```json
{
  "param0": "value0",
  "param1": "value1"
}
```
```

--------------------------------

### Start Flashing

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/flash

How to initiate the flashing effect on a game object, with options to specify duration and repeat count.

```APIDOC
## Start flashing
```javascript
flash.flash();
// flash.flash(duration, repeat);
```
or
```javascript
flash.flash({
    duration: 500,
    repeat: 2
});
```
```

--------------------------------

### Get Spiral Curve Origin Point

Source: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/curve-spiral

Retrieve the start and end points of the spiral curve's origin.

```javascript
var startX = spiral.startX;
var startY = spiral.startY;
var endX = spiral.endX;
var endY = spiral.endY;
```

```javascript
var startPoint = spiral.p0; // {x, y}
var endPoint = spiral.p1; // {x, y}
```
Tokens:
Raw