Spinner
Introduction¶
Loading animations on shape.
- Author: Rex
- Game object
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin( "rexspinnerplugin", "https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspinnerplugin.min.js", "rexSpinner", "rexSpinner" );
- Add spinner object
var audio = this.rexSpinner.add.audio(config); var ball = this.rexSpinner.add.ball(config); var bars = this.rexSpinner.add.bars(config); var box = this.rexSpinner.add.box(config); var clock = this.rexSpinner.add.clock(config); var cube = this.rexSpinner.add.cube(config); var dots = this.rexSpinner.add.dots(config); var facebook = this.rexSpinner.add.facebook(config); var grid = this.rexSpinner.add.grid(config); var los = this.rexSpinner.add.los(config); var orbit = this.rexSpinner.add.orbit(config); var oval = this.rexSpinner.add.oval(config); var pie = this.rexSpinner.add.pie(config); var puff = this.rexSpinner.add.puff(config); var radio = this.rexSpinner.add.radio(config); var rings = this.rexSpinner.add.rings(config); var spinner = this.rexSpinner.add.spinner(config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import SpinnerPlugin from "phaser3-rex-plugins/templates/spinner/spinner-plugin.js"; var config = { // ... plugins: { scene: [ { key: "rexSpinner", plugin: SpinnerPlugin, mapping: "rexSpinner", }, // ... ], }, // ... }; var game = new Phaser.Game(config);
- Add spinner object
var audio = this.rexSpinner.add.audio(config); var ball = this.rexSpinner.add.ball(config); var bars = this.rexSpinner.add.bars(config); var box = this.rexSpinner.add.box(config); var clock = this.rexSpinner.add.clock(config); var cube = this.rexSpinner.add.cube(config); var dots = this.rexSpinner.add.dots(config); var facebook = this.rexSpinner.add.facebook(config); var grid = this.rexSpinner.add.grid(config); var los = this.rexSpinner.add.los(config); var orbit = this.rexSpinner.add.orbit(config); var oval = this.rexSpinner.add.oval(config); var pie = this.rexSpinner.add.pie(config); var puff = this.rexSpinner.add.puff(config); var radio = this.rexSpinner.add.radio(config); var rings = this.rexSpinner.add.rings(config); var spinner = this.rexSpinner.add.spinner(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { Audio, Ball, Bars, Box, Clock, Cube, Custom, Dots, Facebook, Grid, Los, Orbit, Oval, Puff, Radio, Rings, Spinner } from "phaser3-rex-plugins/templates/spinner/spinner-components.js";
- Add spinner object
var spinner = new Audio(scene, config); scene.add.existing(spinner);
Add spinner object¶
var spinner = scene.rexSpinner.add.audio({
// x: 0,
// y: 0,
// width: 64,
// height: 64,
// color: 0xffffff,
// duration: 1000,
// start: true,
// delay: 0,
// repeatDelay: 0,
});
x
,y
: Position of this object.width
,height
: Size of this object.color
: Fill color, or stroke color. Default value is0xffffff
duration
: Duration of animation.start
: Start animation when object created.false
: Don't play animation at beginning.delay
: Delay time in ms before running.repeatDelay
: Delay time between 2 periods.
Play animation¶
Start¶
- Start playing, won't restart when playing
spinner.start();
- Restart with new duration
spinner.start(duration);
Pause¶
spinner.pause();
Resume¶
spinner.resume();
Stop¶
spinner.stop();
Play animation manually¶
- Set
start
tofalse
in config - Set progress manually
or
spinner.setValue(t);
spinner.value = t;
t
:0
~1
Is running¶
var isRunning = spinner.isRunning;
Color¶
- Get
var color = spinner.color;
- Set
or
spinner.setColor(color);
spinner.color = color;
color
: Fill color, or stroke color, in number.
Alpha¶
- Get
var alpha = spinner.alpha;
- Set
spinner.setAlpha(alpha); // spinner.alpha = alpha;
Duration¶
- Get
var duration = spinner.duration;
- Set, will apply to next animation playing.
or
spinner.setDuration(duration);
spinner.duration = duration;
Ease¶
- Get
var ease = spinner.ease;
- Set, will apply to next animation playing.
or
spinner.setEasen(ease);
spinner.ease = ease;
Custom spinner¶
var customSpinner = this.rexSpinner.add.custom({
// x: 0,
// y: 0,
// width: 64,
// height: 64,
// color: 0xffffff,
// duration: 1000,
// start: true,
create: {
// shapeType: [name0, name1, ...],
// shapeType: number,
// shapeType: name,
},
// create: function() {
//
// },
update: function() {
},
})
create
: Callback to create shapes- A plain object with
shapeType: name
, orshapeType: number
shapeType
:'arc'
: Create Arc shape.'circle'
: Create Circle shape.'ellipse'
: Create Ellipse shape.'line'
: Create Line shape.'lines'
: Create Lines shape.'rectangle'
: Create Rectangle shape.'roundRectangle'
: Create Round rectangle shape.'triangle'
: Create Triangle shape.
nameArray
: An array of unique string name for each shape.name
: An unique string name of this shape.number
: Amount of shapes to create.
- A callback
function() { // this : This spinner game object var shape = this.createShape(shapeType, name); this.addShape(shape); }
this.createShape(shapeType, name)
: Crate a shape instance, with an unique name.this.addShape(shape)
: Add this shape instance to this custom spinner.
- A plain object with
update
: Callback when porgressingfunction() { // this : This spinner game object var centerX = this.centerX; var centerY = this.centerY; var radius = this.radius; var color = this.color; var shapes = this.getShapes(); var shape = this.getShape(name); var t = this.value; // ... }
this.value
: Progress,0
~1
.- Position :
this.centerX
,this.centerY
: Center position of this spinner. The coordinate of top-left point is(0,0)
this.radius
: Minimun value ofthis.centerX
,this.centerY
, to draw shape at square.
- Color :
this.color
: Color property of this spinner.
- Shape instances : Change properties of shape instances.
this.getShapes()
: Return all shapes in an array.this.getShape(name)
: Return a shape by the unique string name.
Shape class¶
See Shape class