Spiral curve

Introduction

Spiral curve.

  • Author: Rex
  • Curve object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexspiralcurveplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspiralcurveplugin.min.js', true);
    
  • Add spiral curve object
    var spiral = scene.plugins.get('rexspiralcurveplugin').add(config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import SpiralCurvePlugin from 'phaser3-rex-plugins/plugins/spiralcurve-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexSpiralCurve',
                plugin: SpiralCurvePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add spiral curve object
    var spiral = scene.plugins.get('rexSpiralCurve').add(config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import SpiralCurve from 'phaser3-rex-plugins/plugins/spiralcurve.js';
    
  • Add spiral curve object
    var spiral = new SpiralCurve(config);
    

Create shape

  • All properties
    var spiral = scene.plugins.get('rexSpiralCurve').add({
        // Origin point
        // Ease origin point
        // startX:0, endX: 0, easeX: 'Linear',
        // startY:0, endY: 0, easeY: 'Linear',
        // Fixed point
        // x, y,
    
        // x-radius
        // startXRadius: 0, endXRadius, easeXRadius: 'Linear',
        // y-radius
        // startYRadius: 0, endYRadius, easeYRadius: 'Linear',
        // start-end radius
        // startRadius, endRadiux
    
        // angle
        // startAngle: 0, endAngle: 360, easeAngle: 'Linear',
    
        // rotation: 0
    });
    
    • Origin point
      • startX, endX, easeX, startY, endY, easeY : Ease origin point.
      • x, y : Fixed origin point, i.e. start point is equal to end point.
    • Radius
      • startXRadius, endXRadius, easeXRadius : Ease x-radius.
      • startYRadius, endYRadius, easeYRadius : Ease y-radius.
      • startRadius, endRadiux :
        • Set startXRadius, and startYRadius to startRadius.
        • Set endXRadius, and endYRadius to endRadius.
    • Angle
      • startAngle, endAngle, easeAngle : Ease angle.
    • rotation : Rotate curve.
  • Simple spiral curve
    var spiral = scene.plugins.get('rexSpiralCurve').add(x, y, startRadius, endRadius, startAngle, endAngle, rotation);
    
    • x : Set startX, endX to x, and easeX to 'Linear'.
    • y : Set startY, endY to y, and easeY to 'Linear'.
    • startRadius : Set startXRadius, startYRadius to startRadius
    • endRadius : Set endXRadius, endYRadius to endRadius, and easeXRadius, easeYRadius to Linear.
    • Set easeAngle to 'Linear'

Properties

  • Origin point
    • Get
      var startX = spiral.startX;
      var startY = spiral.startY;
      var endX = spiral.endX;
      var endY = spiral.endY;
      
      or
      var startPoint = spiral.p0; // {x, y}
      var endPoint = spiral.p1; // {x, y}
      
    • Set
      spiral.setStartX(x);
      spiral.setStartY(y);
      spiral.setEndX(x);
      spiral.setEndY(y);
      
      or
      spiral.startX = x;
      spiral.startY = y;
      spiral.endX = x;
      spiral.endY = y;
      
  • Radius
    • Get
      var startXRadius = spiral.startXRadius;
      var startYRadius = spiral.startYRadius;
      var endXRadius = spiral.endXRadius;
      var endYRadius = spiral.endYRadius;
      
    • Set
      spiral.setStartXRadius(startXRadius);
      spiral.setStartYRadius(startYRadius);
      spiral.setEndXRadius(endXRadius);
      spiral.setEndYRadius(endYRadius);
      
      or
      spiral.startXRadius = startXRadius;
      spiral.startYRadius = startYRadius;
      spiral.endXRadius = endXRadius;
      spiral.endYRadius = endYRadius;
      
  • Angle
    • Get
      var startAnlge = spiral.startAngle;
      var endAnlge = spiral.endAngle;
      
    • Set
      spiral.setStartAngle(startAnlge);
      spiral.setEndAngle(endAnlge);
      
      spiral.startAngle = startAnlge;
      spiral.endAngle = endAnlge;
      

Other methods

See path