### Installation and Setup

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

Instructions on how to install and set up the Perspective plugin, either by loading a minify file or importing it.

```APIDOC
## Load minify file

### Description
Load plugin (minify file) in preload stage.

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

## Import plugin

### Description
Install rex plugins from npm and import the plugin in your game configuration.

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

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

## Import class

### Description
Install rex plugins from npm and import the ContainerPerspective class.

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

### Import class
```javascript
import { ContainerPerspective } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';
```
```

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

### Installation and Setup

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

Instructions on how to install and integrate the Keys Hub plugin into your Phaser 3 project, either by loading a minified file or importing the plugin.

```APIDOC
## Installation and Setup

### 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 phaser3-rex-plugins
```

Install plugin in configuration of game:
```javascript
import KeysHubPlugin from 'phaser3-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 phaser3-rex-plugins
```

Import class:
```javascript
import KeysHub from 'phaser3-rex-plugins/plugins/keyshub.js';
```

Add keys-hub object:
```javascript
var keysHub = new KeysHub(scene, config);
```
```

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

### Color Picker Installation and Usage

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

Instructions on how to install the Color Picker plugin, either by loading a minified file or by importing it via npm. It also includes examples of how to add a color picker object to your scene.

```APIDOC
## Color Picker Plugin for Phaser 3

### Introduction

Pick color value from H and SV palettes.

### Installation

**Option 1: Load Minified File**

Load the plugin in the preload stage of your Phaser scene:

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

**Option 2: Import Plugin via npm**

1. Install the plugin:
   ```bash
   npm i phaser3-rex-plugins
   ```

2. Configure the plugin in your game configuration:
   ```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);
   ```

**Option 3: Import Class via npm**

1. Install the plugin:
   ```bash
   npm i phaser3-rex-plugins
   ```

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

### Adding a Color Picker Object

**Using `scene.rexUI.add.colorPicker` (after plugin setup):**

```javascript
var colorPicker = scene.rexUI.add.colorPicker({
    // x: 0,
    // y: 0,
    // anchor: undefined,
    // width: undefined,
    // height: undefined,
    // origin: 0.5
    // originX:
    // originY:

    background: backgroundGameObject,

    hPalette: {
        position: 'bottom', // or 'left', 'top', 'right'
        size: 10,
        width: undefined,   // Specific width for h-palette
        height: undefined,  // Specific height for h-palette
    },

    svPalette: {
        width: undefined,   // Specific width for sv-palette
        height: undefined,  // Specific height for sv-palette
    },

    valuechangeCallback: function(newValue, oldValue, colorPicker) { /* ... */ },
    valuechangeCallbackScope: undefined,

    value: 0xffffff, // Initial color value

    // space: { left: 0, right: 0, top: 0, bottom: 0, item: 0 },

    // name: '',
    // draggable: false,
    // sizerEvents: false,
    // enableLayer: false,
});
```

**Using `new ColorPicker` (after class import):**

```javascript
var colorPicker = new ColorPicker(scene, config);
scene.add.existing(colorPicker);
```

### Configuration Options

*   **`x`, `y`**: Position of the object (if it's the top object).
*   **`anchor`**: Anchor configuration for positioning relative to the visible window.
    *   `left`, `right`, `centerX`, `x`, `top`, `bottom`, `centerY`, `y`: Position based on window dimensions (percentages or offsets).
    *   `width`, `height`: Size based on window dimensions (percentages or padding).
    *   `onResizeCallback`: A callback function for resize events.
*   **`width`, `height`**: Minimum width and height of the color picker.
*   **`origin`, `originX`, `originY`**: Origin of the sizer (default is 0.5, 0.5).
*   **`background`**: A background game object (optional). It will be resized to fit the color picker.
*   **`hPalette`**: Configuration for the Hue palette.
    *   `position`: `'bottom'`, `'left'`, `'top'`, `'right'` (or numerical equivalents 0-3).
    *   `size`: Width or height of the h-palette depending on its position.
    *   `width`, `height`: Specific dimensions for the h-palette.
*   **`svPalette`**: Configuration for the Saturation-Value palette.
    *   `width`, `height`: Specific dimensions for the sv-palette.
*   **`valuechangeCallback`**: A callback function executed when the color value changes.
*   **`value`**: The initial color value (a number between 0 and 0xffffff).
*   **`space`**: Defines padding around the color picker and between its elements.
    *   `left`, `right`, `top`, `bottom`: Padding for the bounds.
    *   `item`: Space between the SV palette and the H palette.
*   **`name`**: A name for the game object.
*   **`draggable`**: Set to `true` to make the top-most object draggable.
*   **`sizerEvents`**: Set to `true` to enable sizer events (default is `false`).
*   **`enableLayer`**: Set to `true` to add child game objects to an internal layer game object (default is `false`).
```

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

### Installation

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

Instructions on how to install and load the Text Page Plugin.

```APIDOC
## Installation

### Load Minify File

Load the plugin in the preload stage:

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

Then, add page behavior to a text object:

```javascript
var page = scene.plugins.get('rextextpageplugin').add(textGameObject, config);
```

### Import Plugin (npm)

Install from npm:

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

Configure the game to include the plugin:

```javascript
import TextPagePlugin from 'phaser3-rex-plugins/plugins/textpage-plugin.js';

var config = {
    // ...
    plugins: {
        global: [
            {
                key: 'rexTextPage',
                plugin: TextPagePlugin,
                start: true
            },
            // ...
        ]
    }
    // ...
};

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

Then, add page behavior to a text object:

```javascript
var page = scene.plugins.get('rexTextPage').add(textGameObject, config);
```

### Import Class (npm)

Install from npm:

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

Import the class:

```javascript
import TextPage from 'phaser3-rex-plugins/plugins/textpage.js';
```

Then, create a new instance:

```javascript
var page = new TextPage(textGameObject, config);
```
```

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

### Installation

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

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

```APIDOC
## Installation

### Load minify file

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

### Import plugin

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

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

### Import class

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

Import class:
```javascript
import Raycaster from 'phaser3-rex-plugins/plugins/raycaster.js';
```
```

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

### Drop Down Plugin Installation

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

Instructions for installing the Drop Down plugin via minify file or npm.

```APIDOC
## Drop Down Plugin Installation

### Load minify file

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

### Import plugin via npm

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

Add drop-down behavior:
```
var dropDown = scene.plugins.get('rexDropDown').add(gameObject, config);
```

### Import class via npm

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

Import class:
```
import DropDownBehavior from 'phaser3-rex-plugins/plugins/dropdown.js';
```

Add drop-down behavior:
```
var dropDown = new DropDownBehavior(gameObject, config);
```
```

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

### Get Line Start Position

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

Retrieves the x and y coordinates of the line's starting point. These properties provide read-only access to the start position.

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

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

### Create Flip Instance with Configuration

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

Demonstrates the creation of a Flip plugin instance with detailed configuration options. This includes setting the initial face, defining textures for front and back faces, and specifying orientation, duration, delay, and easing.

```javascript
var flip = scene.plugins.get('rexFlip').add(gameObject, {
    face: 'back',
    front: { key, frame }, // key, or callback
    back: { key, frame },  // key, or callback

    // orientation: 0, // 0|'x'|1|'y'
    // duration: 500,
    // delay: 0,
    // ease: 'Sine',
});
```

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

### Get CircularProgress Start Angle

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

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

```javascript
var startAngle = circularProgress.startAngle;

```

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

### Import and Use AwaitLoader Class (npm)

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

Shows how to install the Phaser 3 Rex Plugins via npm, import the Awaitloader class directly, and then use it to start a loading task within the scene's preload method.

```bash
npm i phaser3-rex-plugins

```

```javascript
import Awaitloader from 'phaser3-rex-plugins/plugins/awaitloader.js';

Awaitloader.call(scene.load, function(successCallback, failureCallback) {
    // successCallback();
}, scope)

```

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

### Configure and Start Drag Plugin

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

Installs and configures the DragPlugin globally within the Phaser game configuration. The plugin is started automatically.

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

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

### Plugin Installation and Initialization

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

Instructions on how to install and initialize the LocalForage Files plugin, either by loading a minify file or importing via npm.

```APIDOC
## Plugin Installation and Initialization

### Load minify file

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

Add a localforage-files object:
```javascript
var fileManager = scene.plugins.get('rexlocalforagefilesplugin').add(config);
```

### Import plugin (npm)

Install via npm:
```bash
npm i phaser3-rex-plugins
```

Configure the game to use the plugin:
```javascript
import FilesPlugin from 'phaser3-rex-plugins/plugins/localforagefiles-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexFiles',
            plugin: FilesPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

Add a localforage-files object:
```javascript
var fileManager = scene.plugins.get('rexFiles').add(config);
```

### Import class (npm)

Install via npm:
```bash
npm i phaser3-rex-plugins
```

Import the class:
```javascript
import Files from 'phaser3-rex-plugins/plugins/localforagefiles.js';
```

Add a localforage-files object:
```javascript
var fileManager = new Files(config);
```
```

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

### Install Plugin (Import Class)

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

Instructions to install and import the PerspectiveImage plugin using npm.

```APIDOC
## Install Plugin (Import Class)

### Description
Install rex plugins from npm and import the PerspectiveImage class.

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

### Import Class
```javascript
import { PerspectiveImage } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';
```

### Add Image Object
```javascript
var image = new PerspectiveImage(scene, x, y, texture, frame, config);
scene.add.existing(image);
```
```

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

### Get Any Tag Start with Payload - JavaScript

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

Listens for the start of any tag and provides both the tag name and its associated payload. The payload is parsed into a key-value object.

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

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

### Flip Plugin Installation

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

Instructions for installing the Flip plugin via a minify file or npm.

```APIDOC
## Flip Plugin Installation

### Load minify file

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

### Import plugin

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

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

### Import class

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

Import class:
```javascript
import Flip from 'phaser3-rex-plugins/plugins/flip.js';
```
```

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

### Initialize Pop up Plugin (Import Plugin)

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

Installs the Rex Scale plugin by importing it into the game's configuration. This approach uses npm to manage dependencies and integrates the plugin globally within the game instance. It requires 'phaser3-rex-plugins' to be installed via npm.

```javascript
npm i phaser3-rex-plugins
```

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

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

### Get Start and End Points of Path or Curve (JavaScript)

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

Retrieves the starting or ending point of a path or curve. An optional 'out' object can be provided to store the resulting point, optimizing performance.

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

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

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

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

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

### Get and Set Start Angle (Circular Progress)

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

Retrieves or sets the starting angle of the circular progress bar in radians. This determines where the progress bar begins its sweep.

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

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

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

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

### Installation - Import Class via npm

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

Instructions for installing the Camera Controller plugin via npm and importing the CameraController class directly.

```APIDOC
## Import Class via npm

### Description
Install the rex plugins from npm and import the CameraController class directly for instantiation.

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

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

## Add Camera Controller Object

### Description
Create a new instance of the CameraController class.

### Code
```javascript
var cameraController = new CameraController(scene, config);
```
```

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

### Get Specific Tag Start with Payload - JavaScript

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

Listens for the start of a specific tag (e.g., '+TagName') and provides the payload associated with it. The payload is parsed into a key-value object.

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

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

### Installation - Import Plugin via npm

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

Steps to install and configure the Camera Controller plugin using npm and import it into your game configuration.

```APIDOC
## Install Plugin via npm

### Description
Install the rex plugins from npm and configure your game to use the Camera Controller plugin.

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

### Game Configuration
```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

### Description
Add a camera-controller object to the scene using the configured plugin key.

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

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

### Card Plugin Installation

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

Instructions on how to install and load the Card plugin for Phaser 3.

```APIDOC
## Card Plugin Installation

### Load Plugin (Minify File)

Load the plugin in the preload stage of your scene:

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

### Import Plugin (npm)

1. Install from npm:
   ```bash
   npm i phaser3-rex-plugins
   ```

2. Configure your game instance to include the plugin:
   ```javascript
   import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';
   var config = {
       // ...
       plugins: {
           global: [{
               key: 'rexPerspectiveImagePlugin',
               plugin: PerspectiveImagePlugin,
               start: true
           },
           // ...
           ]
       }
       // ...
   };
   var game = new Phaser.Game(config);
   ```

### Import Class (npm)

1. Install from npm:
   ```bash
   npm i phaser3-rex-plugins
   ```

2. Import the `PerspectiveCard` class:
   ```javascript
   import { PerspectiveCard } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';
   ```
```

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

### Install Plugin (NPM and Import)

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

Installs the Rex plugins via npm and imports the TransitionImagePlugin for game configuration.

```APIDOC
## Install Plugin (NPM and Import)

Installs the Rex plugins via npm and imports the TransitionImagePlugin for game configuration.

### Install via npm

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

### Import and Configure Game

```javascript
import TransitionImagePlugin from 'phaser3-rex-plugins/plugins/transitionimage-plugin.js';

var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexTransitionImagePlugin',
            plugin: TransitionImagePlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};

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

### Add Image Object (after configuration)

```javascript
var image = scene.add.rexTransitionImage(x, y, texture, frame, config);
```
```

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

### Set and Get Table Size in Cells

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

Examples for setting the grid size of the table by specifying the number of columns and rows, and for updating the table accordingly. Also includes how to get and set the total cell count.

```javascript
table.setGridSize(colCount, rowCount).updateTable();

```

```javascript
var count = table.cellsCount;

```

```javascript
table.setCellsCount(count).updateTable();

```

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

### Overlap Sizer Plugin Installation

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

Instructions for installing and loading the Overlap Sizer plugin using both a minified file and npm.

```APIDOC
## Plugin Installation

### Load Minify File

Load the plugin in the preload stage:

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

### Import Plugin (npm)

1. Install via npm:
   ```bash
   npm i phaser3-rex-plugins
   ```

2. Configure the 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);
   ```

### Import Class (npm)

1. Install via npm:
   ```bash
   npm i phaser3-rex-plugins
   ```

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

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

### Line Position Control

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

Methods and properties for getting and setting the start and end positions of the line.

```APIDOC
## Position of line-start/line-end

### Line start

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

*   **Set**
    ```javascript
    line.setLineStartPosition(x, y);
    ```
    or
    ```javascript
    line.x0 = x;
    line.y0 = y;
    ```

### Line end

*   **Get**
    ```javascript
    var x1 = line.x1;
    var y1 = line.y1;
    ```

*   **Set**
    ```javascript
    line.setLineEndPosition(x, y);
    ```
    or
    ```javascript
    line.x1 = x;
    line.y1 = y;
    ```
```

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

### Create Flip Instance

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

Configuration options for creating a new Flip instance.

```APIDOC
## Create Instance

```javascript
var flip = scene.plugins.get('rexFlip').add(gameObject, {
    face: 'back', // Initial face ('front' or 'back')
    front: { key, frame }, // Texture of front face (key, or callback)
    back: { key, frame },  // Texture of back face (key, or callback)

    orientation: 0, // 0|'x'|1|'y' (Flipping orientation)
    duration: 500,  // Duration of flipping in milliseconds
    delay: 0,       // Initial delay
    ease: 'Sine',   // Ease function
});
```

### Configuration parameters:

*   **`face`** : Initial face.
    *   `0`, `'front'` : Front face.
    *   `1`, `'back'` : Back face.
*   **`front`**, **`back`** : Texture of front/back face.
    *   `undefined` : Use current texture key, or frame name
    *   `key` : A string for texture key.
    *   `{key, frame}` or `{frame}` : A texture key and frame name.
    *   `callback` : Configure game object via callback.
        ```javascript
        function(gameObject) {
        }
        ```
*   **`orientation`** : Flipping orientation.
    *   `0`, `'x'`, or `'horizontal'` : Horizontal flipping.
    *   `1`, `'y'`, or `'vertical'` : Vertical flipping.
*   **`duration`** : Duration of flipping, in milliseconds.
*   **`delay`** : Initial delay.
*   **`ease`** : Ease function. Default value is `'Sine'`.
```

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

### Start Moving from Start Position

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

Initiates the movement of a game object from a specified start position towards the current position. Similar to `moveTo`, it accepts target coordinates and optional configuration.

```javascript
moveTo.moveFrom(x, y);
// or with config object:moveTo.moveFrom({
    x: 0,
    y: 0,
    // speed: 0
});
```

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

### Get Drag Angle

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

Calculate the angle of the drag movement in radians, measured from the start of the drag.

```javascript
pointer.getAngle()
```

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

### Line Plugin Installation

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

Instructions on how to install and load the Rex Line plugin, either by loading a minified file or importing it via npm.

```APIDOC
## Load minify file

Load plugin (minify file) in preload stage

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

## Import plugin

Install rex plugins from npm

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

Install plugin in configuration of game

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

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

### Get Start Line Index

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

A property representing the zero-based index of the first line on the current page.

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

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

### Install Phaser 3 Rex UI Plugin from Minify File

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

This snippet shows how to install the rexUI plugin by loading a minify file in the scene's preload stage. It requires specifying a key, the URL to the file, and a scene key for accessing the plugin.

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

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

### Get BBCodeText Content

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

Provides methods to retrieve the text content from a BBCodeText object. This includes getting the raw text, the plain text (stripped of BBCode tags), and extracting a specific substring based on start and end indices.

```javascript
var curContent = txt.text;
var plainText = txt.getPlainText();
var plainText = txt.getPlainText(content);
var text = txt.getText(start, end);

```

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

### Create Typing Instance with Configuration

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

Demonstrates the creation of a typing instance using the plugin's `add` method, showcasing various configuration options like wrap, speed, typeMode, and callbacks.

```javascript
var typing = scene.plugins.get('rexTextTyping').add(textGameObject, {
    // wrap: false,
    // speed: 333,       // typing speed in ms
    // typeMode: 0,      //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle'
    // setTextCallback: function(text, isLastChar, insertIdx){ return text; }  // callback before set-text
    // setTextCallbackScope: null,   
});
```

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

### Get Pointer Touch Start Time

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

Retrieve the timestamp when the pointer's press (down) action began.

```javascript
pointer.downTime
```

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

### Install Phaser 3 Rex UI Plugin via npm

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

This section demonstrates installing the rex plugins using npm and then configuring the game to use the UI plugin. It involves importing the plugin and adding it to the game's scene plugin configuration.

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

```javascript
import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';

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

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

### Get Items from Unique Item List

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

Provides examples for retrieving items from a Unique Item List. Methods include getting the first, last, an item at a specific index, a random item, all items, or a clone of all items as a new array.

```javascript
var item = listA.getFirst();
```

```javascript
var item = listA.getLast();
```

```javascript
var item = listA.get(index);
```

```javascript
var item = listA.getRandom();
```

```javascript
var items = listA.getItems();
```

```javascript
var items = listA.cloneItems();
```

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

### Pan Plugin Installation and Usage

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

Instructions on how to install and use the Pan plugin, either by loading a minify file or importing the plugin/class.

```APIDOC
## Pan Plugin Installation and Usage

### Load minify file

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

Add pan input:
```javascript
var pan = scene.rexGestures.add.pan(config);
// or
// var pan = scene.rexGestures.add.pan(gameObject, config);
```

### Import plugin

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

Configure game:
```javascript
import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';
var config = {
    // ...
    plugins: {
        scene: [{
            key: 'rexGestures',
            plugin: GesturesPlugin,
            mapping: 'rexGestures'
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
```

Add pan input:
```javascript
var pan = scene.rexGestures.add.pan(config);
// or
// var pan = scene.rexGestures.add.pan(gameObject, config);
```

### Import class

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

Import class:
```javascript
import { Pan } from 'phaser3-rex-plugins/plugins/gestures.js';
```

Add pan input:
```javascript
var pan = new Pan(scene, config);
// or
// var pan = new Pan(gameObject, config);
```
```

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

### Create Quad Shape (Phaser 3 Rex UI)

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

Provides code examples for creating a quad shape with the rexUI plugin. This shape allows for offsets on vertices and additional points on sides. It also includes an example of extending the QuadShape class.

```javascript
var quad = scene.rexUI.add.quadShapes(x, y, width, height, fillColor, fillAlpha);
```

```javascript
class MyQuadShape extends RexPlugins.UI.QuadShape {
    constructor(scene, x, y, width, height, fillColor, fillAlpha) {
        super(scene, x, y, width, height, fillColor, fillAlpha);
        // ...
        scene.add.existing(this);
    }
    // ...
}
```

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

### Install and Configure Phaser 3 Rex Board Plugin (npm)

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

Installs the Phaser 3 Rex plugins via npm and configures the game object to use the BoardPlugin. This is the recommended approach for modern JavaScript projects.

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

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

```javascript
var board = scene.rexBoard.add.board(config);
```

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

### Get Pointer Drag Start Position

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

Retrieve the X and Y coordinates where the pointer's press (down) action began.

```javascript
pointer.downX,
pointer.downY
```

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

### Install and Import i18next and http-backend

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

Installs the necessary i18next and i18next-http-backend packages using npm and demonstrates how to import them into a JavaScript project. This is the initial step for enabling internationalization with dynamic resource loading.

```bash
npm i i18next
npm i i18next-http-backend
```

```javascript
import i18next from 'i18next';
import Backend from 'i18next-http-backend';
```

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

### Get NumberBar Elements (JavaScript)

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

Provides examples for retrieving various internal game objects that constitute the NumberBar. This includes accessing the background, icon, different parts of the slider (background, track, indicator, thumb), and the text object. It also covers getting elements by name, with an option for recursive searching.

```javascript
var background = numberBar.getElement("background");
var icon = numberBar.getElement("icon");
var sliderBackground = numberBar.getElement("slider.background");
var sliderTrack = numberBar.getElement("slider.track");
var sliderIndicator = numberBar.getElement("slider.indicator");
var sliderThumb = numberBar.getElement("slider.thumb");
var textObject = numberBar.getElement("text");
var gameObject = numberBar.getElement("#" + name);
// var gameObject = numberBar.getElement('#' + name, recursive);
// var gameObject = numberBar.getByName("#" + name);
// var gameObject = numberBar.getByName(name, recursive);
```

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

### Buff Data Plugin Installation

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

Instructions on how to install and use the Buff Data plugin, either by loading a minified file or importing it via npm.

```APIDOC
## Buff Data Plugin Installation

### Load minify file

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

Add buff data manager object:
```
var data = scene.plugins.get('rexbuffdataplugin').add(parent);
```

### Import plugin

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

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

Add buff data manager object:
```
var data = scene.plugins.get('rexBuffData').add(parent);
```

### Import class

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

Import class:
```
import BuffData from 'phaser3-rex-plugins/plugins/buffdata.js';
```

Add buff data manager object:
```
var data = new BuffData(parent);
```
```

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

### Install and Load Rex Firebase Plugin via NPM Import

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

This section demonstrates installing the rex plugins via npm and configuring the Phaser game to use the Firebase plugin. It assumes a module-based project setup and shows how to initialize the Firebase application and add the item table.

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

```html
<body>
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="/__/firebase/10.13/firebase-app-compat.js"></script>
    <!-- Add Firebase products that you want to use -->
    <script src="/__/firebase/10.13/firebase-database-compat.js"></script>
</body>
```

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

```javascript
firebase.initializeApp({
   apiKey: '...',
   authDomain: '...',
   databaseURL: '...',
   projectId: '...',
   storageBucket: '...',
   messagingSenderId: '...'
})
```

```javascript
var table = scene.plugins.get('rexFirebase').add.itemTable(config);
```

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

### Canvas Plugin Installation

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

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

```APIDOC
## Canvas Plugin Installation

### Load Minify File

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

### Install via npm

Install the plugin from npm:
```bash
npm i phaser3-rex-plugins
```

Then, import and configure the plugin in your game configuration:
```javascript
import CanvasPlugin from 'phaser3-rex-plugins/plugins/canvas-plugin.js';

var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexCanvasPlugin',
            plugin: CanvasPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};

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

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

### Create Instance

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

How to create an instance of the file manager with optional configuration.

```APIDOC
## Create Instance

Create an instance of the file manager:
```javascript
var fileManager = scene.plugins.get('rexFiles').add.files({
    // name: 'files',
    // zip: true
});
```

**Parameters**:
- `name` (string) - Storage name.
- `zip` (boolean) - 
  - `true`: Save compressed stringify JSON data.
  - `false`: Save JSON data directly.
```

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

### Install and Load Phaser 3 Rex Firebase Plugin via npm

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

This section guides you through installing the rex-plugins from npm and configuring your Phaser game to use the Firebase plugin. It requires importing the plugin and adding it to the game's configuration. Initialization of Firebase is also included.

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

```html
<body>
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="/__/firebase/10.13/firebase-app-compat.js"></script>
    <!-- Add Firebase products that you want to use -->
    <script src="/__/firebase/10.13/firebase-firestore-compat.js"></script>
</body>
```

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

```javascript
firebase.initializeApp({
   apiKey: '...', 
   authDomain: '...', 
   databaseURL: '...', 
   projectId: '...', 
   storageBucket: '...', 
   messagingSenderId: '...'
})
```

```javascript
var fileManager = scene.plugins.get('rexFirebase').add.files(config);
```

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

### Loader API - Plugin

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

Loads and optionally starts a plugin. The `start` parameter determines if the plugin is started immediately after loading.

```APIDOC
## Loader API - Plugin

### Description
Loads and optionally starts a plugin. The `start` parameter determines if the plugin is started immediately after loading.

### Method
`scene.load.plugin(key, url, start, [scene], [xhrSettings])`

### Parameters
#### Path Parameters
- **key** (string) - Required - Unique key for the plugin.
- **url** (string) - Required - URL of the plugin file or class instance.
- **start** (boolean) - Required - Whether to start the plugin immediately after loading.
- **scene** (object) - Optional - The scene instance.
- **xhrSettings** (object) - Optional - XHR settings object.

### Request Example
```javascript
scene.load.plugin('myPlugin', 'assets/plugins/MyPlugin.js', true);
```
```