State round rectangle
Introduction¶
Using plain object to create round rectangle, with active, hover, disable styles.
- Author: Rex
- Game object
Live demos¶
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 round-rectangle object
var rect = scene.rexUI.add.statesRoundRectangle(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 round-rectangle object
var rect = scene.rexUI.add.statesRoundRectangle(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { StatesRoundRectangle } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add sizer object
var rect = new StatesRoundRectangle(scene, config); scene.add.existing(roundRectangle);
Create shape object¶
var rect = scene.rexUI.add.statesRoundRectangle({
x: 0,
y: 0,
width: undefined,
height: undefined,
// color: 0xffffff,
// alpha: 1,
// strokeColor: 0xffffff,
// strokeAlpha: 1,
// strokeWidth: 2,
// radius: 0,
// Style override in active state
// 'active.color': undefined,
// 'active.alpha': undefined,
// 'active.strokeColor': undefined,
// 'active.strokeAlpha': undefined,
// 'active.strokeWidth': undefined,
// 'active.radius': undefined,
// 'active.xxx': ...
// Style override in hover state
// 'hover.color': undefined,
// 'hover.alpha': undefined,
// 'hover.strokeColor': undefined,
// 'hover.strokeAlpha': undefined,
// 'hover.strokeWidth': undefined,
// 'hover.radius': undefined,
// 'hover.xxx': ...
// Style override in disable state
// 'disable.color': undefined,
// 'disable.alpha': undefined,
// 'disable.strokeColor': undefined,
// 'disable.strokeAlpha': undefined,
// 'disable.strokeWidth': undefined,
// 'disable.radius': undefined,
// 'disable.xxx': ...
});
width
,height
: Size of rectangle.undefined
: Set otundefined
to draw a circle.
radius
: Radius of four corners.0
, orundefined
: Disable round corner.- Number: 4 corners with the same radius.
- JSON
- 4 corners with the same radius X/Y
{ x: radiusX, y: radiusY }
- Eeach radius of corner
or
{ tl: radius, tr: radius, bl: radius, br: radius }
{ tl: {x : radiusX, y: radiusY}, tr: {x : radiusX, y: radiusY}, bl: {x : radiusX, y: radiusY}, br: {x : radiusX, y: radiusY}, }
- Radius and iteration
or
{ radius: radius, iteration: 0 }
or{ radius: {x: radiusX, y: radiusY}, iteration: 0 }
{ radius: { tl: {x : radiusX, y: radiusY}, tr: {x : radiusX, y: radiusY}, bl: {x : radiusX, y: radiusY}, br: {x : radiusX, y: radiusY}, }, iteration: 0 }
radius
:0
: No round corner> 0
: Convex round corner< 0
: Concave round corner
iteration
: Number of interpolation points in each round corner. Default value is4
.0
: Draw a straight line instead of arc.
- 4 corners with the same radius X/Y
'active.color'
,'active.alpha'
,'active.strokeColor'
,'active.strokeAlpha'
,'active.strokeWidth'
,'active.radius'
,'active.xxx'
, ... ect : Override these properties in active state'hover.color'
,'hover.alpha'
,'hover.strokeColor'
,'hover.strokeAlpha'
,'hover.strokeWidth'
,'hover.radius'
,'hover.xxx'
, ... ect : Override these properties in hover state'disable.color'
,'disable.alpha'
,'disable.strokeColor'
,'disable.strokeAlpha'
,'disable.strokeWidth'
,'disable.radius'
,'disable.xxx'
, ... ect : Override these properties in disable state
Custom class¶
- Define class
class MyRoundRectangle extends RexPlugins.UI.StatesRoundRectangle { 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 rect = new MyRoundRectangle(scene, config);
Set state¶
Active state¶
- Enable active state
rect.setActiveState(); // rect.setActiveState(true);
- Override properties declared in config with prefix
'active.'
parameters.
- Override properties declared in config with prefix
- Disable active state
rect.setActiveState(false);
- Restore properties.
Hover state¶
- Enable active state
rect.setHoverState(); // rect.setHoverState(true);
- Override properties declared in config with prefix
'hover.'
parameters
- Override properties declared in config with prefix
- Disable active state
rect.setHoverState(false);
- Restore properties.
Disable state¶
- Enable disable state
rect.setDisableState(); // rect.setDisableState(true);
- Override properties declared in config with prefix
'disable.'
parameters
- Override properties declared in config with prefix
- Disable active state
rect.setDisableState(false);
- Restore properties.