### Install Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/filedropzone/index.html

Demonstrates how to install the File Drop Zone plugin. Choose one of the methods based on your project setup.

```javascript
import FileDropZonePlugin from 'phaser3-rex-plugins/plugins/filedropzone-plugin.js';
// or
var FileDropZonePlugin = require('phaser3-rex-plugins/plugins/filedropzone-plugin.js');
```

```javascript
var scene = new Phaser.Scene();
scene.plugins.install('rexFileDropZone', FileDropZonePlugin);
// or
var config = {
    plugins: {
        global: [
            {
                key: 'rexFileDropZone',
                plugin: FileDropZonePlugin,
                start: true
            }
        ]
    }
};
var game = new Phaser.Game(config);
```

```javascript
var scene = new Phaser.Scene();
scene.plugins.install('rexFileDropZone', FileDropZonePlugin);
// or
var config = {
    plugins: {
        global: [
            {
                key: 'rexFileDropZone',
                plugin: FileDropZonePlugin,
                start: true
            }
        ]
    }
};
var game = new Phaser.Game(config);
```

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

### Move From Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/easemove.md

An example demonstrating the `moveFrom` method to animate a game object from a specified starting position. It includes optional parameters for ease and tween task reuse.

```javascript
var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y);
// var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);
// easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease, easemove);
```

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

### Minimal RexUI Setup Pattern

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/skills/rexui/rexui-setup-and-factory/SKILL.md

This pattern demonstrates the basic setup for using RexUI with a scene plugin. It includes importing Phaser and UIPlugin, configuring the scene, and registering the UIPlugin with a mapping. Use this as a starting point for your RexUI projects.

```javascript
import Phaser from 'phaser';
import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';

class Demo extends Phaser.Scene {
    create() {
        const label = this.rexUI.add.label({
            background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 12, 0x222222),
            text: this.add.text(0, 0, 'RexUI')
        });

        label.setPosition(400, 300).layout();
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: Demo,
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    }
};

new Phaser.Game(config);
```

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

### Skill Folder Layout Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/skills/rexboard/TODO.md

Illustrates the directory structure for global installation and repository-local drafting of RexBoard skills.

```text
$CODEX_HOME/skills/rexboard-setup-and-factory/SKILL.md
$CODEX_HOME/skills/rexboard-grids-and-coordinates/SKILL.md
$CODEX_HOME/skills/rexboard-board-and-chess/SKILL.md
...
```

```text
skills/rexboard/rexboard-setup-and-factory/
skills/rexboard/rexboard-grids-and-coordinates/
...
```

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/tagplayer/index.html

Install the rex plugins via npm and configure them in your game's configuration. Then, get the plugin instance.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var tagPlayer = scene.plugins.get('rexTagPlayerPlugin').add(scene, config);
```

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

### Install and Import Dropdown Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/dropdown.md

Install the rex plugins via npm. Then, get the plugin instance to add dropdown behavior to a game object.

```bash
npm i phaser4-rex-plugins
```

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

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/arcade-tcrp-recorder.md

Install the rex plugins via npm, then configure the game to include the TCRP plugin globally. Finally, get the recorder instance from the scene's plugin manager.

```bash
npm i phaser4-rex-plugins
```

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

var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);
```

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

### Get Start Point of Curve

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/path.md

Retrieves the starting point of the curve.

```APIDOC
## Get Start Point of Curve

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

### Method
`curve.getStartPoint()`

### Returns
- (object) - An object with `x` and `y` properties representing the start point.

### Method
`curve.getStartPoint(out)`

### Parameters
- **out** (object) - An optional object to store the result in. If not provided, a new object is created.
```

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

### Install Toast Queue Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/ui-toastqueue/index.html

Demonstrates how to install the Toast Queue plugin by loading its minify file.

```javascript
import ToastQueue from 'phaser3-rex-plugins/plugins/toastqueue/toastqueue.js';
// or
var ToastQueue = require('phaser3-rex-plugins/plugins/toastqueue/toastqueue.js');
```

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

### Get Start Point of Path

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/path.md

Retrieves the starting point of the path.

```APIDOC
## Get Start Point of Path

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

### Method
`path.getStartPoint()`

### Returns
- (object) - An object with `x` and `y` properties representing the start point.

### Method
`path.getStartPoint(out)`

### Parameters
- **out** (object) - An optional object to store the result in. If not provided, a new object is created.
```

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

### Install Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/texttyping/index.html

Demonstrates how to install the Text Typing plugin by loading the minify file.

```javascript
this.load.plugin('rexTextTypingPlugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttypingplugin.min.js', true);
```

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

### Install Knob Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/ui-knob/index.html

Demonstrates how to install the Knob plugin by loading its minify file.

```javascript
import 'phaser/plugins/ui-plugin.min.js';
```

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

### Get Arc Start Angle

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/shape-arc/index.html

Retrieves the current start angle of the arc in degrees.

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

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

### Get start line index

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/textpage.md

Retrieves the index of the starting line for the current view.

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

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

### Minimal RexBoard Setup Pattern

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/skills/rexboard/rexboard-setup-and-factory/SKILL.md

This snippet demonstrates the minimal setup for using RexBoard with the scene plugin mode. It includes importing Phaser and BoardPlugin, configuring the scene with the plugin, and creating a basic board with a chess piece.

```javascript
import Phaser from 'phaser';
import BoardPlugin from 'phaser4-rex-plugins/plugins/board-plugin.js';

class Demo extends Phaser.Scene {
    create() {
        const grid = this.rexBoard.add.quadGrid({
            x: 80,
            y: 80,
            cellWidth: 64,
            cellHeight: 64,
            type: 'orthogonal',
            dir: '4dir'
        });

        const board = this.rexBoard.add.board({
            grid,
            width: 8,
            height: 8
        });

        const chess = this.add.circle(0, 0, 18, 0x66ccff);
        board.addChess(chess, 3, 3, 0, true);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: Demo,
    plugins: {
        scene: [{
            key: 'rexBoard',
            plugin: BoardPlugin,
            mapping: 'rexBoard'
        }]
    }
};

new Phaser.Game(config);
```

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

### Get Edge Start to Texture

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shader-dissolve.md

Retrieves the edge start value for the target texture.

```javascript
var edgeStart = controller.toEdgeStart;
var edgeWidth = controller.toEdgeWidth;
```

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

### Install Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/gesture-tap/index.html

Demonstrates how to install the Tap Gestures plugin, either by loading a minify file or importing the class directly.

```javascript
import Tap from 'phaser3-rex-plugins/plugins/gesture-tap.js';
// or
import Tap from 'phaser3-rex-plugins/plugins/gesture-tap/Tap.js';
```

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

### Get Edge Start from Texture

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shader-dissolve.md

Retrieves the edge start value from the source texture.

```javascript
var edgeStart = controller.fromEdgeStart;
var edgeWidth = controller.fromEdgeWidth;
```

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

### Get Line Start Position

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/line.md

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

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

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

### Install and Use Plugin (Minify File)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/imageuriloader.md

Load the minify file of the plugin in the preload stage and add it to the scene's loader. Then, use `this.load.rexImageURI` to load an image from a URI.

```javascript
var sceneConfig = {
    // ....
    pack: {
        files: [{
            type: 'plugin',
            key: 'reximageuriloaderplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageuriloaderplugin.min.js',
            start: true
        }]
    }
};
class MyScene extends Phaser.Scene {
    constructor() {
        super(sceneConfig)
    }
    // ....

    preload() {
        // reximageuriloaderplugin 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('reximageuriloaderplugin').addToScene(this);

        this.load.rexImageURI(key, uri);
    }
}
```

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

### Get Line Start Point

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/geom-line.md

Retrieves the start point of the line as an object with x and y properties.

```APIDOC
## Get Line Start Point

### Description
Gets the start point of the line.

### Method
```javascript
line.getPointA(out)
```

### Parameters
* **out** (object, optional) - An object to store the result in. If not provided, a new object is created.

### Returns
* ({x: number, y: number}) - An object containing the x and y coordinates of the start point.
```

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

### Get and Set Start Angle

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/canvas-circularprogress.md

Retrieve or set the starting angle for the circular bar in radians.

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

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

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

### Start Path

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shape-custom-shapes.md

Initializes a new path. Use `start()` to begin with no specific starting point, or `startAt(x, y)` to define an initial position.

```javascript
lines.start();
```

```javascript
lines.startAt(x, y);
```

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

### Get start point

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/path/index.html

Retrieves the starting point of the Path or Curve. Optionally modifies an output object.

```APIDOC
## GET /path/startPoint

### Description
Retrieves the starting point of the Path.

### Method
GET

### Endpoint
/path/startPoint

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

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

### Response Example
```json
{
  "point": {
    "x": 0,
    "y": 0
  }
}
```

## GET /curve/startPoint

### Description
Retrieves the starting point of the Curve.

### Method
GET

### Endpoint
/curve/startPoint

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

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

### Response Example
```json
{
  "point": {
    "x": 5,
    "y": 10
  }
}
```
```

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

### Create Dropdown Instance with Configuration

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/dropdown/index.html

Create a dropdown instance with detailed configuration options. This example shows default values and comments out various settings.

```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 Angle of Circular Progress

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shape-circularprogress.md

Retrieves the current start angle of the circular bar in radians.

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

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

### Start Parsing

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/bracketparser/index.html

Demonstrates how to initiate the parsing process with a given text string.

```javascript
var text = "[h1]Hello[/h1]";
parser.parse(text);
```

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

### Get Start Point of Curve

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/path/index.html

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

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

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

### Install and Import MoveTo Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/board-moveto.md

Install the rex plugins via npm. Then, import the BoardPlugin in your game configuration and add the move-to behavior.

```bash
npm i phaser4-rex-plugins
```

```javascript
import BoardPlugin from 'phaser4-rex-plugins/plugins/board-plugin.js';
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexBoard',
            plugin: BoardPlugin,
            mapping: 'rexBoard'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

```javascript
var moveTo = scene.rexBoard.add.moveTo(chess, config);
```

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

### Get Start Point of Path

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/path/index.html

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

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

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

### Install UI Plugin via Minify File

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-overview.md

Use this method to install the UI plugin by loading a minify JavaScript file. Ensure the 'key' is set to 'rexuiplugin'.

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

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

### Get and Set Circular Bar Start Angle

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/shape-circularprogress/index.html

Retrieve or update the starting angle of the circular bar. The angle is specified in radians.

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

```javascript
circularProgress.setStartAngle(startAngle); circularProgress.startAngle = startAngle; // startAngle : Start angle of circular bar, in radians.
```

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

### Install and Import Camera Controller Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/input-to-camera/index.html

Install the plugin via npm and configure it in the game's settings. Then, retrieve the plugin instance to add a camera controller.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var cameraController = scene.plugins.get('rexCameraController').add(scene, config);
```

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

### Get Line Start Point

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/geom-line/index.html

Retrieve the starting point of the line as an object with x and y properties. Optionally, push the coordinates into a provided object.

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

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

### Modal Configuration Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/modal.md

Provides a comprehensive example of modal configuration options, including cover, closing behavior, durations, and transitions.

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

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ymlachievements.md

Install the rex plugins via npm and import the AchievementsPlugin into your game configuration. Then, get an instance of the achievements plugin.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var achievements = scene.plugins.get('rexAchievements').add();
```

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

### Install and Import Color Components Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-colorcomponents.md

Install the rex plugins from npm and import the UIPlugin for game configuration. Then, add a color-components object to the scene.

```bash
npm i phaser4-rex-plugins
```

```javascript
import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';
```

```javascript
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

```javascript
var colorComponents = scene.rexUI.add.colorComponents(config);
```

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

### Install Plugin: Import Class

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/bracketparser/index.html

Shows how to import and use the BracketParser class directly.

```javascript
import BracketParser from 'phaser3-rex-plugins/plugins/bracket-parser.js';
```

```javascript
var parser = new BracketParser();
```

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

### Get Start Point of Path

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/path.md

Retrieve the coordinates of the starting point of the path. The 'out' parameter can be used to modify an existing Vector2 object.

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

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

### Get Start Point of Individual Curve

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/path.md

Retrieve the coordinates of the starting point of the curve. The 'out' parameter can be used to modify an existing Vector2 object.

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

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

### Start Flashing

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/flash.md

Demonstrates how to initiate the flashing effect on a game object, with options to specify duration and repeat count directly or use configured values.

```APIDOC
```javascript
flash.flash();
// flash.flash(duration, repeat);
```

or

```javascript
flash.flash({
    duration: 500,
    repeat: 2
});
```
```

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

### Get Random Child

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/containerlite.md

Retrieves a random child game object from the container. You can specify a starting index and length to get a random child from a specific range.

```APIDOC
## Get Random Child

### Description
Gets a random child from the container.

### Method
`container.getRandom(startIndex, length)`

### Parameters
#### `startIndex`
- **startIndex** (number) - Optional - The starting index for the random selection. Default is 0.

#### `length`
- **length** (number) - Optional - The number of children to consider for random selection. Default is the total number of children.

### Response
#### Success Response
- **gameObject** (GameObject) - A random game object from the container.

### Request Example
```javascript
var gameObject = container.getRandom();
var gameObjectInRange = container.getRandom(1, 5); // Get random child from index 1 to 5
```
```

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-expbar.md

Install the rex plugins via npm and import the UIPlugin for game configuration. Add an expBar object using the configured plugin.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var expBar = scene.rexUI.add.expBar(config);
```

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-sizer.md

Install the rex plugins via npm. Then, import the UIPlugin and configure it in the game's scene plugins. Finally, add a sizer object.

```bash
npm i phaser4-rex-plugins
```

```javascript
import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';
```

```javascript
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
};
```

```javascript
var game = new Phaser.Game(config);
```

```javascript
var sizer = scene.rexUI.add.sizer(config);
```

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

### Get Start and Shape Properties

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/gradient.md

Retrieve the start and shape points of a gradient. These points are defined using normalized coordinates within the gradient's quad.

```javascript
var start = gradient.start;
var shape = gradient.shape;
```

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

### Install Expression Parser Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/expression-parser/index.html

Demonstrates how to load the Expression Parser plugin using a minify file, import the plugin, and import the class.

```javascript
import ExpressionParserPlugin from 'phaser3-rex-plugins/plugins/expression-parser-plugin.js';
// import { ExpressionParser } from 'phaser3-rex-plugins/plugins/expression-parser.js';
```

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

### Get Line Start and End Points

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/geom-line.md

Retrieves the start and end points of the line as {x, y} objects. Optionally, an existing object can be provided to store the result.

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

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

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

### Install and Configure Flip Plugin (Import)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/flip.md

Install the rex plugins via npm, then configure the game to include the FlipPlugin. Finally, add the flip behavior to a game object using the 'rexFlip' key.

```bash
npm i phaser4-rex-plugins
```

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

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

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

### Confirm Dialog Callback Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-confirmactionbutton.md

Example of an onCreateDialog callback function for the confirm dialog. This function is invoked after the dialog is created, allowing for custom dialog setup.

```javascript
function(dialog) {

}
```

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

### Install MiniBoard Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/board-miniboard.md

Install the plugin via npm and configure it in the game's settings.

```javascript
npm i phaser4-rex-plugins
```

```javascript
import BoardPlugin from 'phaser4-rex-plugins/plugins/board-plugin.js';
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexBoard',
            plugin: BoardPlugin,
            mapping: 'rexBoard'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

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

### Import MoveTo Class (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/board-moveto.md

Install the rex plugins via npm. Then, import the MoveTo class directly and create a new instance.

```bash
npm i phaser4-rex-plugins
```

```javascript
import { MoveTo } from 'phaser4-rex-plugins/plugins/board-components.js';
```

```javascript
var moveTo = new MoveTo(chess, config);
```

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

### Angle

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/curve-spiral/index.html

Allows getting and setting the start and end angles of the spiral in degrees.

```APIDOC
## Get Angle

### Description
Retrieves the start and end angles of the spiral in degrees.

### Method
GET

### Endpoint
N/A (Property Access)

### Parameters
None

### Response
- **startAngle** (number) - The starting angle of the spiral in degrees.
- **endAngle** (number) - The ending angle of the spiral in degrees.

### Response Example
```json
{
  "startAngle": 0,
  "endAngle": 360
}
```

## Set Angle

### Description
Sets the start and end angles of the spiral in degrees.

### Method
SET

### Endpoint
N/A (Property Assignment)

### Parameters
- **startAnlge** (number) - The starting angle in degrees.
- **endAnlge** (number) - The ending angle in degrees.

### Request Example
```javascript
spiral.setStartAngle(0);
spiral.setEndAngle(360);
// or
spiral.startAngle = 0;
spiral.endAngle = 360;
```
```

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

### Install Plugin (Minify File)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/drag.md

Instructions for loading the minified drag plugin file in the preload stage and adding drag behavior to a game object.

```APIDOC
## Load minify file

- Load plugin (minify file) in preload stage
    ```javascript
    scene.load.plugin('rexdragplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragplugin.min.js', true);
    ```
- Add drag behavior
    ```javascript
    var drag = scene.plugins.get('rexdragplugin').add(gameObject, config);
    ```
```

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

### Install and Configure MoveTo Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/moveto.md

Install the rex plugins via npm and configure the game to use the MoveTo plugin globally. Then, add the move-to behavior using the configured key.

```bash
npm i phaser4-rex-plugins
```

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

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

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

### Get Default Away Time

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/awaytime/index.html

Get the awayTime value from the globally configured AwayTime plugin. This action also starts saving the current timestamp periodically to local storage.

```javascript
var awayTime = scene.plugins.get('rexAwayTime').awayTime; // var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime;
```

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

### Tapping Start Event

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/gesture-tap/index.html

Handles the 'tappingstart' event, fired on each pointer down.

```APIDOC
## Tapping Start Event

### Description

Fires when a pointer is pressed down, incrementing the tap count.

### Event Listener

```javascript
tap.on('tappingstart', function(tap, gameObject, lastPointer){ 
    // ...
}, scope);
```

### Event Data

- **tap**: The tap behavior instance.
- **gameObject**: The parent game object of this tap behavior.
- **lastPointer**: The last touch pointer object.
```

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

### Get GameObject Drag Start Position

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/touchevents/index.html

Access the x/y coordinate of the game object when a drag action on it started. This is stored within the game object's input property.

```javascript
var dragStartX = gameObject.input.dragStartX;
var dragStartY = gameObject.input.dragStartY;
```

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/bracketparser/index.html

Install the rex plugins via npm, then configure the game to include the BracketParserPlugin globally. Finally, get the parser object from the scene's plugins.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var parser = scene.plugins.get('rexBracketParser').add(config);
```

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

### Install and Import Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-simpletextbox.md

Install the rex plugins via npm. Configure the game to include the UIPlugin in the scene's plugins. Then, add a SimpleTextBox object using the scene plugin.

```bash
npm i phaser4-rex-plugins
```

```javascript
import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';
```

```javascript
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

```javascript
var textBox = scene.rexUI.add.simpleTextBox(style).resetDisplayContent(config);
```

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

### Import Plugin via npm and Add Properties

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/viewport-coordinate.md

Install the plugin via npm, configure it in the game settings, and then add vpx, vpy, vpxOffset, and vpyOffset properties to a game object.

```javascript
npm i phaser4-rex-plugins
```

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

```javascript
scene.plugins.get('rexViewportCoordinate').add(gameObject, viewport, vpx, vpy);
gameObject.vpx = 0.5;
gameObject.vpy = 0.5;
gameObject.vpxOffset = 0;
gameObject.vpyOffset = 0;
```

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

### Get and Set Arc Start Angle

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shape-arc.md

Retrieve the starting angle of the arc in degrees, or update it using `setStartAngle` or direct property assignment. The `anticlockwise` parameter can also be set here.

```javascript
var startAngle = arc.startAngle;

arc.setStartAngle(startAngle);
// arc.setStartAngle(startAngle, anticlockwise);

or

arc.startAngle = startAngle;
```

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

### Install and Import Run Commands Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/runcommands/index.html

Install the plugin via npm and configure it in your game's settings. Commands are then run using the configured key.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
scene.plugins.get('rexRunCommands').run(commands, scope);
```

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

### Get Line Length

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/geom-line/index.html

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

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

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

### Install and Configure Touch State Plugin (NPM)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/touchstate.md

Install the rex plugins via npm. Then, import the TouchStatePlugin and configure it in the game's settings. Finally, add the touch-state behavior to a game object.

```bash
npm i phaser4-rex-plugins
```

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

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

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

### Get Line Height

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/geom-line.md

Calculates the absolute difference between the y-coordinates of the start and end points.

```APIDOC
## Get Line Height

### Description
Gets the height of the line (absolute difference between y1 and y2).

### Method
```javascript
Phaser.Geom.Line.Height(line)
```

### Parameters
* **line** (Phaser.Geom.Line) - The line.

### Returns
* (number) - The height of the line.
```

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

### Play Sound Instance

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/audio/index.html

Start playing a sound instance. Optionally, provide a configuration object for playback settings.

```javascript
music.play();
```

```javascript
music.play(config);
```

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

### Get Line Width

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/geom-line.md

Calculates the absolute difference between the x-coordinates of the start and end points.

```APIDOC
## Get Line Width

### Description
Gets the width of the line (absolute difference between x1 and x2).

### Method
```javascript
Phaser.Geom.Line.Width(line)
```

### Parameters
* **line** (Phaser.Geom.Line) - The line.

### Returns
* (number) - The width of the line.
```

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

### Create Instance with Configuration Options

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/localstorage-data/index.html

Create a new local storage data manager instance with various configuration options.

```javascript
var data = scene.plugins.get('rexLocalStorageData').add({
    // name: '',
    // load: true,
    // default: undefined,
    // reset: false
}); // var data = scene.plugins.get('rexLocalStorageData').add(parent, config); // var data = scene.plugins.get('rexRData').add(parent, eventEmitter, config);
```

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

### Get Line Length

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/geom-line.md

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

```APIDOC
## Get Line Length

### Description
Gets the length of the line.

### Method
```javascript
Phaser.Geom.Line.Length(line)
```

### Parameters
* **line** (Phaser.Geom.Line) - The line.

### Returns
* (number) - The length of the line.
```

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

### Install Plugin (Import)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/drag.md

Instructions for installing the plugin via npm and importing it into the game configuration, followed by adding drag behavior.

```APIDOC
## Import plugin

- Install rex plugins from npm
    ```
    npm i phaser4-rex-plugins
    ```
- Install plugin in [configuration of game](game.md#configuration)
    ```javascript
    import DragPlugin from 'phaser4-rex-plugins/plugins/drag-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexDrag',
                plugin: DragPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    ```
- Add drag behavior
    ```javascript
    var drag = scene.plugins.get('rexDrag').add(gameObject, config);
    ```
```

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

### Get Line End Points

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/shape-custom-shapes/index.html

Retrieves the x and y coordinates of both start and end points of a line.

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

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

### Install Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/rotateto/index.html

Instructions on how to install and load the Rotate To plugin, either via a minified file or npm.

```APIDOC
## Install Plugin

### Load Minify File

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

*   Add rotate-to behavior
    
    `var rotateTo = scene.plugins.get('rexrotatetoplugin').add(gameObject, config);

### Import Plugin

*   Install rex plugins from npm
    
    `npm i phaser4-rex-plugins`
    
*   Install plugin in [configuration of game](../game/#configuration)
    
    `import RotateToPlugin from 'phaser4-rex-plugins/plugins/rotateto-plugin.js'; var config = {     // ...     plugins: {         global: [{             key: 'rexRotateTo',             plugin: RotateToPlugin,             start: true         },         // ...         ]     }     // ... }; var game = new Phaser.Game(config);

*   Add rotate-to behavior
    
    `var rotateTo = scene.plugins.get('rexRotateTo').add(gameObject, config);

### Import Class

*   Install rex plugins from npm
    
    `npm i phaser4-rex-plugins`
    
*   Import class
    
    `import RotateTo from 'phaser4-rex-plugins/plugins/rotateto.js';
    
*   Add rotate-to behavior
    
    `var rotateTo = new RotateTo(gameObject, config);

```

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

### Radius

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/curve-spiral/index.html

Allows getting and setting the start and end radii along the x and y axes for the spiral.

```APIDOC
## Get Radius

### Description
Retrieves the start and end radii along the x and y axes.

### Method
GET

### Endpoint
N/A (Property Access)

### Parameters
None

### Response
- **startXRadius** (number) - The start radius along the x-axis.
- **startYRadius** (number) - The start radius along the y-axis.
- **endXRadius** (number) - The end radius along the x-axis.
- **endYRadius** (number) - The end radius along the y-axis.

### Response Example
```json
{
  "startXRadius": 50,
  "startYRadius": 50,
  "endXRadius": 100,
  "endYRadius": 100
}
```

## Set Radius

### Description
Sets the start and end radii along the x and y axes.

### Method
SET

### Endpoint
N/A (Property Assignment)

### Parameters
- **startXRadius** (number) - The value to set for the start x-axis radius.
- **startYRadius** (number) - The value to set for the start y-axis radius.
- **endXRadius** (number) - The value to set for the end x-axis radius.
- **endYRadius** (number) - The value to set for the end y-axis radius.

### Request Example
```javascript
spiral.setStartXRadius(50);
spiral.setStartYRadius(50);
spiral.setEndXRadius(100);
spiral.setEndYRadius(100);
// or
spiral.startXRadius = 50;
spiral.startYRadius = 50;
spiral.endXRadius = 100;
spiral.endYRadius = 100;
```
```

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-confirmdialog.md

Install the rex plugins via npm, then import the UIPlugin and configure it in the game's settings. Finally, add a confirm dialog object.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);
```

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

### Get Current Start Row Index

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/gridtable.md

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

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

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

### Install and Import Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/quad-rendertexture.md

Install the rex plugins via npm, then configure the game to use the QuadImagePlugin. Finally, add a QuadRenderTexture game object.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var image = scene.add.rexQuadRenderTexturege(x, y, width, height, config);
```

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

### Get Elapsed Time

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/clock.md

Retrieve the current elapsed time in milliseconds since the clock started.

```javascript
var now = clock.now;  // Elapsed time in ms
```

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

### Start Recording

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/arcade-tcrp-recorder.md

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

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

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

### Get BBCodeText Sub-string

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/bbcodetext.md

Extract a portion of the BBCodeText content based on start and end indices.

```javascript
var text = txt.getText(start, end);
```

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

### Workflow: Create Board and Get Bounds

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/skills/rexboard/rexboard-map-generation-and-import/references/tilemap-board.md

Example demonstrating the workflow of creating a RexBoard from a tilemap and then retrieving its bounds. This involves making the tilemap, creating a layer, and then generating the board.

```javascript
const tilemap = this.make.tilemap({ key: 'level' });
const ground = tilemap.createLayer('ground', tileset, 0, 0);
const board = this.rexBoard.createBoardFromTilemap(tilemap, ground);

const bounds = board.getBoardBounds(true);
```

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

### Custom Bejeweled Click Action Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/board-bejeweled.md

An example of a custom click action that eliminates chess pieces. It demonstrates how to get chess arrays using various utility functions and then invoke `setEliminatingChess`.

```javascript
function (chess, board, bejeweled) {
    // Do nothing

    // var chessArray = [];
    // bejeweled.getChessArrayAtTileX(tileX, chessArray);
    // bejeweled.getChessArrayAtTileY(tileX, chessArray);
    // bejeweled.getChessArrayAtTileXYInRange(tileX, tileY, rangeX, rangeY, chessArray);
    // bejeweled.getChessArrayWithSymbol(symbol, chessArray);
    // ...
    // bejeweled.setEliminatingChess(chessArray);
}

// Eliminating chess by using clicked item

// 1. Get Chess array by 
//    - `bejeweled.getChessArrayAtTileX`
//    - `bejeweled.getChessArrayAtTileY`
//    - `bejeweled.getChessArrayAtTileXYInRange`
//    - `bejeweled.getChessArrayWithSymbol`.
// 2. Invoke `bejeweled.setEliminatingChess`
```

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

### Install and Import Menu Plugin (npm)

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/ui-menu.md

Install the rex plugins via npm. Import the UIPlugin in your game configuration and add it to the scene's plugins. Finally, add a menu object using the scene's rexUI plugin.

```bash
npm i phaser4-rex-plugins
```

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

```javascript
var menu = scene.rexUI.add.menu(config);
```

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

### Install KeysHub Plugin

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/site/keyshub/index.html

Instructions for installing the KeysHub plugin via minified file or npm.

```APIDOC
## Install KeysHub Plugin

### Load minify file

*   Load plugin (minify file) in preload stage:
    ```javascript
    scene.load.plugin('rexkeyshubplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkeyshubplugin.min.js', true);
    ```
*   Add keys-hub object:
    ```javascript
    var keysHub = scene.plugins.get('rexkeyshubplugin').add(scene, config);
    ```

### Import plugin

*   Install rex plugins from npm:
    ```bash
    npm i phaser4-rex-plugins
    ```
*   Install plugin in configuration of game:
    ```javascript
    import KeysHubPlugin from 'phaser4-rex-plugins/plugins/keyshub-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [
                {
                    key: 'rexKeysHub',
                    plugin: KeysHubPlugin,
                    start: true
                },
                // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    ```
*   Add keys-hub object:
    ```javascript
    var keysHub = scene.plugins.get('rexKeysHub').add(scene, config);
    ```

### Import class

*   Install rex plugins from npm:
    ```bash
    npm i phaser4-rex-plugins
    ```
*   Import class:
    ```javascript
    import KeysHub from 'phaser4-rex-plugins/plugins/keyshub.js';
    ```
*   Add keys-hub object:
    ```javascript
    var keysHub = new KeysHub(scene, config);
    ```
```

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

### Combine Color Matrix Filter: Multiplication Merging Example

Source: https://github.com/rexrainbow/phaser3-rex-notes/blob/master/docs/docs/shader-builtin.md

Example of Combine Color Matrix filter configuration using multiplications for channel merging. This setup is useful for masking, darkening, or intersection-like blending.

```plaintext
additions = [0, 0, 0, 0],
multiplications = [1, 1, 1, 1]
```