Skip to content

Shape line2

Introduction

A line shape, composed of 4 points

  • Author: Rex
  • Game object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexlineshapelugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineshapelugin.min.js', true);
    
  • Add line object
    var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import LineShapePlugin from 'phaser3-rex-plugins/plugins/line-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexLineShapePlugin',
                plugin: LineShapePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(points, lineWidth, color, alpha, lineType);
    
  • Add line object
    var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import LineShape from 'phaser3-rex-plugins/plugins/lineshape.js';
    
  • Add line object
    var line = new LineShape(points, lineWidth, color, alpha, lineType);
    scene.add.existing(line);
    

Install plugin

Install plugin in configuration of game

var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexLineShapePlugin',
            plugin: LineShapePlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);

Create instance

var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);

or

var line = scene.add.rexLineShape({
    points: [],
    lineWidth: 2,
    color: 0xffffff,
    alpha: 1,
    lineType: 0,
    pointRadius: 10
});
  • lineType :
    • 0 or 'bezier' : Bezier line type, default type.
    • 1 or 'spline' : Spline line type.
    • 2 or 'polyline', 'poly' : Polygon line type.
    • 3 or 'straightline', 'straight' : Straight line type.
  • points : An array with 4 {x,y} elements
    • Straight line type will use 1st and last {x, y} elements
  • lineWidth : Line width.
  • color : Stroke color.
  • alpha : Stroke alpha.
  • pointRadius : Radius of the point used in interaction detection, default value is 10.

Custom class

  • Define class
    class MyLineShape extends LineShape {
        constructor(scene, points, lineWidth, color, alpha, lineType) {
            super(scene, points, lineWidth, color, alpha, lineType);
            // ...
            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 line = new MyLineShape(scene, points, lineWidth, color, alpha, lineType);
    

Color

  • Fill color
    • Get
      var color = line.fillColor;
      var alpha = line.fillAlpha;
      
    • Set
      line.setFillStyle(color, alpha);
      
    • Clear
      line.setFillStyle();
      
  • Stroke color
    • Get
      var color = line.strokeColor;
      
    • Set
      line.setStrokeStyle(lineWidth, color, alpha);
      
    • Clear
      line.setStrokeStyle();
      

No tint methods

Uses line.setFillStyle(color, alpha) to change color.

Alpha

  • Get
    var alpha = line.alpha;
    
  • Set
    line.setAlpha(alpha);
    // line.alpha = alpha;
    

Points

  • Get
    var points = line.points;
    
  • Set
    line.setLine(points, lineType);
    
    • lineType :
      • 0 or 'bezier' : Bezier line type, default type.
      • 1 or 'spline' : Spline line type.
      • 2 or 'polyline', 'poly' : Polygon line type.
      • 3 or 'straightline', 'straight' : Straight line type.
    • points : An array with 4 {x,y} elements
      • Straight line type will use 1st and last {x, y} elements

Line type

  • Get
    var lineType = line.lineType;
    
  • Set
    line.setLineType(lineType);
    
    • lineType :
      • 0 or 'bezier' : Bezier line type, default type.
      • 1 or 'spline' : Spline line type.
      • 2 or 'polyline', 'poly' : Polygon line type.
      • 3 or 'straightline', 'straight' : Straight line type.

Input event

line
  .setInteractive()
  .on('pointerover', function () {
  })
  .on('pointerout', function () {
  })

Set point radius

line.setPointRadius(radius);

Other properties

See game object

Create mask

var mask = line.createGeometryMask();

See mask

Shader effects

Support postFX effects

Note

No preFX effect support