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);
    sscene.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
});
  • 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.

Play animation

Pause

spinner.pause();

Resume

spinner.resume();

Stop

spinner.stop();

Play animation manually

  1. Set start to false in config
  2. Set progress manually
    spinner.setValue(t);
    
    or
    spinner.value = t;
    
    • t : 0 ~ 1

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. - '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