States image

Introduction¶

Using plain object to create image game object, with active, hover, disable styles.

Author: Rex
Game object

Usage¶

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Add image object

var image = scene.rexUI.add.statesImage(config);

Import plugin¶

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

Install plugin in configuration of game

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

Add image object

var image = scene.rexUI.add.statesImage(config);

Import class¶

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

Import class

import { StatesImage } from 'phaser3-rex-plugins/templates/ui/ui-components.js';

Add sizer object

var image = new StatesImage(scene, config);
scene.add.existing(image);

Create image object¶

var image = scene.rexUI.add.statesImage({
    x: 0,
    y: 0,
    key:
    // frame:
    // tint: 0xffffff,
    // alpha: 1,
    // scale: 1,

    // effects: true,

    // Style override in active state
    // 'active.key': undefined,
    // 'active.frame': undefined,
    // 'active.tint': undefined,
    // 'active.alpha': undefined,
    // 'active.scale': undefined,
    // 'active.glowColor': null,
    // ...

    // Style override in hover state
    // 'hover.key': undefined,
    // 'hover.frame': undefined,
    // 'hover.tint': undefined,
    // 'hover.alpha': undefined,
    // 'hover.scale': undefined,
    // 'hover.glowColor': null,
    // ...

    // Style override in disable state
    // 'disable.key': undefined,
    // 'disable.frame': undefined,
    // 'disable.tint': undefined,
    // 'disable.alpha': undefined,
    // 'disable.scale': undefined,
    // 'disable.glowColor': null,
    // ...

});

width, height : Size of rectangle.
- undefined : Set ot undefined to draw a circle.
key, frame : Texture.
effects : Add effect properties
- true : Add all effect properties.
- false : Don't add any effect property.
- A plain object : Add specific effect properties.
'active.key', 'active.frame', 'active.tint', 'active.alpha', 'active.scale', ... ect : Override these properties in active state
'active.glowColor, .... etc : Override these effect properties in active state
'hover.key', 'hover.frame', 'hover.tint', 'hover.alpha', 'hover.scale', ... ect : Override these properties in hover state
'hover.glowColor, .... etc : Override these effect properties in hover state
'disable.key', 'disable.frame', 'disable.tint', 'disable.alpha', 'disable.scale', ... ect : Override these properties in disable state
'disable.glowColor, .... etc : Override these effect properties in disable state

Custom class¶

Define class

class MyStatesImage extends RexPlugins.UI.StatesImage {
    constructor(scene, config) {
        super(scene, config);
        // ...
        scene.add.existing(this);
    }
    // ...

    // preUpdate(time, delta) {}
}

scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
- If the Game Object renders, it will be added to the Display List.
- If it has a preUpdate method, it will be added to the Update List.

Create instance

var image = new MyStatesImage(scene, config);

Set state¶

Active state¶

Enable active state
```
image.setActiveState();
// image.setActiveState(true);
```
- Override properties declared in config with prefix 'active.' parameters.
Disable active state
```
image.setActiveState(false);
```
- Restore properties.

Hover state¶

Enable active state
```
image.setHoverState();
// image.setHoverState(true);
```
- Override properties declared in config with prefix 'hover.' parameters
Disable active state
```
image.setHoverState(false);
```
- Restore properties.

Disable state¶

Enable disable state
```
image.setDisableState();
// image.setDisableState(true);
```
- Override properties declared in config with prefix 'disable.' parameters
Disable active state
```
image.setDisableState(false);
```
- Restore properties.

Other properties¶

See Image, game object