Spinner

Introduction¶

Loading animations on shape.

Author: Rex
Game object

Live demos¶

Usage¶

Sample code

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 is 0xffffff
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 to false in config

Set progress manually

spinner.setValue(t);

or

spinner.value = t;

t : 0 ~ 1

Is running¶

var isRunning = spinner.isRunning;

Color¶

Get
```
var color = spinner.color;
```

Set

spinner.setColor(color);

or

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.

spinner.setDuration(duration);

or

spinner.duration = duration;

Ease¶

Get
```
var ease = spinner.ease;
```

Set, will apply to next animation playing.

spinner.setEasen(ease);

or

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, or shapeType: 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.
update : Callback when porgressing
```
function() {
    // 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 of this.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

Other properties¶

See game object

Create mask¶

var mask = customSpinner.createGeometryMask();

See mask

Shader effects¶

Support postFX effects

Note

No preFX effect support