Skip to content

Custom shapes

Introduction

Custom shapes 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.plugin('rexcustomshapesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcustomshapesplugin.min.js', true);
    
  • Add custom shapes object
    var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import CustomShapesPlugin from 'phaser3-rex-plugins/plugins/customshapes-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexCustomShapesPlugin',
                plugin: CustomShapesPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add custom shapes object
    var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import CustomShapes from 'phaser3-rex-plugins/plugins/bbcodetext.js';
    
  • Add custom shapes object
    var customShapes = new CustomShapes(scene, x, y, width, height, config);
    sscene.add.existing(customShapes);
    

Add custom shapes object

var customShapes = scene.add.rexCustomShapes(x, y, width, height, {
    // type: 'rexCustomShapes',

    create: [
        { name: name0, type: shapeType},
        { name: name1, type: shapeType},
        ...
    ],

    // create: {
    //     shapeType: [name0, name1, ...],
    //     shapeType: number,
    //     shapeType: name,
    // },

    // create: function() {
    // 
    // },

    update: function() {

    },
});

or

var customShapes = scene.add.rexCustomShapes({
    // x: 0,
    // y: 0,
    // width: 64,
    // height: 64,
    // type: 'rexCustomShapes',

    create: [
        { name: name0, type: shapeType},
        { name: name1, type: shapeType},
        ...
    ],

    // create: {
    //     shapeType: [name0, name1, ...],
    //     shapeType: number,
    //     shapeType: name,
    // },

    // create: function() {
    // 
    // },

    update: function() {

    },
});
  • x, y : Position of this object.
  • width, height : Size of this object.
  • create : Callback to create shapes
    • An array of object with name and type
      { name: name0, type: shapeType }
      
    • A plain object with shapeType: name, or shapeType: number
      • shapeType : arc, circle, ellipse, line, rectangle, triangle
      • 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 custom shapes 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 custom shapes.
  • update : Callback when refresh
    function() {
        // this : This custom shapes game object     
        var shapes = this.getShapes();
        var shape = this.getShape(name);
        // ...
        // var isSizeChanged = this.isSizeChanged;
    
        // var fillColor = this.fillColor;
        // var strokeColor = this.strokeColor;
    }
    
    • 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.
    • Is size changed: this.isSizeChanged
    • Fill color : this.fillColor, this.fillAlpha
    • Stroke color : this.strokeColor, this.strokeAlpha, this.lineWidth

Set update shape callback

customShapes.setUpdateShapesCallback(callback);
  • callback :
    function() {
        // this : This custom shapes game object     
        var shapes = this.getShapes();
        var shape = this.getShape(name);
        // ...
        // var isSizeChanged = this.isSizeChanged;
    }
    
    • 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.
    • Is size changed: this.isSizeChanged

Recreate shapes

Refresh

Redraw shapes when

  • Resize : customShapes.resize(width, height)
    • customShapes.isSizeChanged will also be true.
  • Set fill color : customShapes.setFillStyle(color, alpha)
  • Set stroke color : customShapes.setStrokeStyle(lineWidth, color, alpha)
  • Set dirty : customShapes.setDirty()
  • Set update shape callback : customShapes.setUpdateShapesCallback(callback)

Update shape data

Shape data will be updated during rendering, or call shape.updateData() to update shape data before rendering.

Shape class

Common properties
  • Style
    • Get
      var fillColor = shape.fillColor;
      var fillAlpha = shape.fillAlpha;
      var lineWidth = shape.lineWidth;
      var strokeColor = shape.strokeColor;
      var strokeAlpha = shape.strokeAlpha;
      
    • Set
      shape.fillStyle(color, alpha);
      shape.lineStyle(lineWidth, color, alpha);
      
    • Clear
      shape.fillStyle().lineStyle();
      
  • Private data
    • Get
      var data = shape.getData(key);
      // var data = shape.getData(key, defaultValue);
      
    • Set
      shape.setData(key, value);
      
  • Name
    • Get
      var name = shape.name;
      
Line
  • End points
    • Get
      var x0 = line.x0;
      var y0 = line.y0;
      var x1 = line.x1;
      var y1 = line.y1;
      
    • Set
      line.setP0(x, y);
      line.setP1(x, y);
      
      or
      line.x0 = x0;
      line.y0 = y0;
      line.x1 = x1;
      line.y1 = y1;
      
Lines
  • Start position
    lines.startAt(x, y);
    
  • Line to
    • To position
      lines.lineTo(x, y);
      
    • To relative position
      lines.lineTo(x, y, true);
      
    • To vertical position
      lines.verticalLineTo(x);
      
    • To relative vertical position
      lines.verticalLineTo(x, true);
      
    • To horizontal position
      lines.horizontalLineTo(y);
      
    • To relative horizontal position
      lines.horizontalLineTo(y, true);
      
  • Add arc composed of lines
    lines.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise);
    
    • startAngle, endAngle : Start and end angle in degrees.
  • Add elliptical arc composed of lines
    lines.ellipticalArc(centerX, centerY, radiusX, radiusY, startAngle, endAngle, anticlockwise);
    
    • startAngle, endAngle : Start and end angle in degrees.
  • Add quadratic bezier of lines
    lines.quadraticBezierTo(cx, cy, x, y);
    
    • cx, cy : Control point
    • x, y : End point
  • Add smooth quadratic bezier of lines
    lines.smoothQuadraticBezierTo(x, y);
    
    • x, y : End point
  • Add cubic bezier of lines
    lines.cubicBezierCurveTo(cx0, cy0, cx1, cy1, x, y);
    
    • cx0, cy0 : Control point0
    • cx1, cy1 : Control point1
    • x, y : End point
  • Add smooth cubic bezier of lines
    lines.smoothCubicBezierCurveTo(cx1, cy1, x, y);
    
    • cx1, cy1 : Control point1
    • x, y : End point
  • End commands
    • Close path, to fill color
      lines.close();
      
    • End path, to draw lines only
      lines.end();
      
  • Offset all points
    lines.offset(x, y);
    
  • Rotation all points
    lines.rotateAround(centerX, centerY, angle);
    
    • angle : Rotate angle in degrees.
  • Get polygon
    var polygon = lines.toPolygon();
    
    • Can be used in setInteractive method
      shape.setInteractive({
          hitArea: shape.getShapes()[0].toPolygon(),
          hitAreaCallback: Phaser.Geom.Polygon.Contains,
      })
      
Rectangle
  • Top-left
    • Get
      var left = rectangle.x;
      var top = rectangle.y;
      
    • Set
      rectangle.setTopLeftPosition(x, y);
      
      or
      rectangle.x = left;
      rectangle.y = top;
      
  • Size
    • Get
      var width = rectangle.width;
      var height = rectangle.height;
      
    • Set
      rectangle.setSize(width, height);
      
      or
      rectangle.width = width;
      rectangle.height = height;
      
Triangle
  • Vertices
    • Get
      var x0 = triangle.x0;
      var y0 = triangle.x0;
      var x1 = triangle.x1;
      var y1 = triangle.x1;
      var x2 = triangle.x2;
      var y2 = triangle.x2;
      
    • Set
      triangle.setP0(x, y);
      triangle.setP1(x, y);
      triangle.setP2(x, y);
      
      or
      triangle.x0 = x0;
      triangle.x0 = y0;
      triangle.x1 = x1;
      triangle.x1 = y1;
      triangle.x2 = x2;
      triangle.x2 = y2;
      
Arc
  • Center position
    • Get
      var x = arc.x;
      var y = arc.y;
      
    • Set
      arc.setCenterPosition(x, y);
      
      or
      arc.x = x;
      arc.y = y;
      
  • Radius
    • Get
      var radiusX = arc.radiusX;
      var radiusY = arc.radiusY;
      
    • Set
      arc.setRadius(radiusX, radiusY);
      // arc.setRadius(radius);
      
      or
      arc.radiusX = radiusX;
      arc.radiusY = radiusY;
      
  • Angles
    • Get
      var startAngle = arc.startAngle;
      var endAngle = arc.endAngle;
      var anticlockwise = arc.anticlockwise; // boolean        
      
    • Set
      arc.setAngle(startAngle, endAngle);  // anticlockwise = false
      // arc.setAngle(startAngle, endAngle, anticlockwise);
      
      or
      arc.startAngle = startAngle;
      arc.endAngle = endAngle;
      arc.anticlockwise = anticlockwise; // boolean
      
      • startAngle, endAngle : Start/end angle in degrees.
  • Pie
    • Get
      var pie = arc.pie; // boolean
      
    • Set
      arc.setPie();
      
      or
      arc.pie = true;
      
Circle
  • Center position
    • Get
      var x = arc.x;
      var y = arc.y;
      
    • Set
      arc.setCenterPosition(x, y);
      
      or
      arc.x = x;
      arc.y = y;
      
  • Radius
    • Get
      var radiusX = arc.radiusX;
      var radiusY = arc.radiusY;
      
    • Set
      arc.setRadius(radiusX, radiusY);
      // arc.setRadius(radius);
      
      or
      arc.radiusX = radiusX;
      arc.radiusY = radiusY;
      
Ellipse

The same as Circle.

Alpha

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

Compare with similar plugins