Round Rectangle

Introduction

Round rectangle 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('rexroundrectangleplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexroundrectangleplugin.min.js', true);
    
  • Add shape object
    var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import RoundRectanglePlugin from 'phaser3-rex-plugins/plugins/roundrectangle-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexRoundRectanglePlugin',
                plugin: RoundRectanglePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add shape object
    var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import RoundRectangle from 'phaser3-rex-plugins/plugins/roundrectangle.js';
    
  • Add shape object
    var rect = new RoundRectangle(scene, x, y, width, height, radius, fillColor);
    scene.add.existing(rect);
    

Create shape object

var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor);
// var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);
  • width, height : Size of rectangle.
    • undefined : Set ot undefined to draw a circle.
  • radius : Radius of four corners.
    • 0, or undefined : Disable round corner.
    • Number: 4 corners with the same radius.
    • JSON
      • 4 corners with the same radius X/Y
        {
            x: radiusX,
            y: radiusY
        }
        
      • Eeach radius of corner
        {
            tl: radius,
            tr: radius,
            bl: radius,
            br: radius
        }
        
        or
        {
            tl: {x : radiusX, y: radiusY},
            tr: {x : radiusX, y: radiusY},
            bl: {x : radiusX, y: radiusY},
            br: {x : radiusX, y: radiusY},
        }
        
      • Radius and iteration
        {
            radius: radius,
            iteration: 0
        }
        
        or
        {
            radius: {x: radiusX, y: radiusY},
            iteration: 0
        }
        
        or
        {
            radius: {
                tl: {x : radiusX, y: radiusY},
                tr: {x : radiusX, y: radiusY},
                bl: {x : radiusX, y: radiusY},
                br: {x : radiusX, y: radiusY},
            },
            iteration: 0
        }
        
        • iteration : Number of interpolation points in each round corner. Default value is 4.
          • 0 : Draw a straight line instead of arc.

Deform

  • Rectangle, set radius of 4 corners to 0.
    var rect = scene.add.rexRoundRectangle(x, y,  width, height, 0, fillColor, fillAlpha);
    
  • Circle, set width and height to undefined.
    var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, radius, fillColor, fillAlpha);
    
  • Ellipse, set width and height to undefined, and radiusX/radiusY.
    var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {x: radiusX, y: radiusY}, fillColor, fillAlpha);
    
  • Rhombus, set width and height to undefined, and assign iteration to 0
    var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {
        radius: radius,
        iteration: 0
    }, fillColor, fillAlpha);
    
  • Octagon, assign iteration to 0
    var rect = scene.add.rexRoundRectangle(x, y, width, height, {
        radius: radius,
        iteration: 0
    }, fillColor, fillAlpha);
    

Custom class

  • Define class
    class MyRoundRectangle extends RexPlugins.GameObjects.RoundRectangle {
        constructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {
            super(scene, x, y, width, height, radius, fillColor, fillAlpha);
            // ...
            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 rect = new MyRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);
    

Color

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

No tint methods

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

Size

  • Get
    var width = rect.width;
    var height = rect.height;
    
  • Set
    rect.setSize(width, height);
    
    or
    rect.width = width;
    rect.height = height;
    

Radius

  • Get
    var radius = rect.radius;
    
    or
    var cornerRadius = rect.cornerRadius;
    
    • radius : Number, maximum radius of 4 corners.
    • cornerRadius : JSON object of 4 corners.
      {
          tl: {x : radiusX, y: radiusY},
          tr: {x : radiusX, y: radiusY},
          bl: {x : radiusX, y: radiusY},
          br: {x : radiusX, y: radiusY},
      }
      
  • Set
    rect.setRadius(value);
    
    or
    rect.radius = radius;
    
    • radius :
      • Number : 4 corners with the same radius.
      • JSON
        • 4 corners with the same radius X/Y
          {
              x: radiusX,
              y: radiusY
          }
          
        • Eeach radius of corner
          {
              tl: radius,
              tr: radius,
              bl: radius,
              br: radius
          }
          
          or
          {
              tl: {x : radiusX, y: radiusY},
              tr: {x : radiusX, y: radiusY},
              bl: {x : radiusX, y: radiusY},
              br: {x : radiusX, y: radiusY},
          }
          

Iteration

  • Get
    var iteration = rect.iteration;
    
  • Set
    rect.setIteration(value);
    
    or
    rect.iteration = value;
    

Number of interpolation points in each round corner. Default value is 4.

  • 0 : Draw a straight line instead of arc.

Other properties

See game object