Rectangle

Introduction

Rectangle shape and methods, built-in methods of phaser.

  • Author: Richard Davey

Usage

Create shape

var rect = new Phaser.Geom.Rectangle(x, y, width, height);

Create from points

All of the given points are on or within its bounds.

var rect = Phaser.Geom.Rectangle.FromPoints(points);
// var rect = Phaser.Geom.Rectangle.FromPoints(points, rect);  // push rect
  • points : an array with 4 points. [x, y], or {x:0, y:0}

or

var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2);
// var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2, rect);  // push rect

Clone shape

var rect1 = Phaser.Geom.Rectangle.Clone(rect0);

Draw on graphics

  • Fill shape
    // graphics.fillStyle(color, alpha);   // color: 0xRRGGBB
    graphics.fillRectShape(rect);
    
  • Stroke shape
    // graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB
    graphics.strokeRectShape(rect);
    

Note

x with positive/negative width is left/right bound
y with positive/negative height is top/bottom bound

Set properties

  • All properties
    rect.setTo(x, y, width, height);
    
    or
    Phaser.Geom.Rectangle.CopyFrom(source, dest);
    
  • Position
    rect.setPosition(x, y);
    
    or
    rect.x = 0;
    rect.y = 0;
    
    or
    rect.left = 0;       // rect.x, rect.width
    rect.top = 0;        // rect.y, rect.height
    // rect.right = 0;   // rect.x, rect.width
    // rect.bottom = 0;  // rect.y, rect.height
    rect.centerX = 0;    // rect.x
    rect.centerY = 0;    // rect.y
    
    or
    Phaser.Geom.Rectangle.Offset(rect, dx, dy); // rect.x += dx, rect.y += dy
    
    or
    Phaser.Geom.Rectangle.OffsetPoint(rect, point); // rect.x += point.x, rect.y += point.y
    
    or
    Phaser.Geom.Rectangle.CenterOn(rect, x, y);  // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2)
    
  • Size
    rect.setSize(width, height);
    // rect.setSize(width);   // height = width
    
    or
    rect.width = 0;
    rect.height = 0;
    
    • Scale
      Phaser.Geom.Rectangle.Scale(rect, x, y); // rect.width *= x, rect.height *= y;
      // Phaser.Geom.Rectangle.Scale(rect, x);   // y = x
      
    • Extend size to include points
      Phaser.Geom.Rectangle.MergePoints(rect, points);
      
      • points : an array of points. [x, y], or {x:0, y:0}
    • Extend size to include another rectangle
      Phaser.Geom.Rectangle.MergeRect(target, source);
      
  • Inflate
    Phaser.Geom.Rectangle.Inflate(rect, x, y);
    
    1. change size to width += x*2, height += y*2
    2. center on previous position
  • Fits the target rectangle into the source rectangle
    Phaser.Geom.Rectangle.FitInside(target, source);
    
    Preserves aspect ratio, scales and centers the target rectangle to the source rectangle
  • Fits the target rectangle around the source rectangle
    Phaser.Geom.Rectangle.FitOutside(target, source);
    
    Preserves aspect ratio, scales and centers the target rectangle to the source rectangle
  • Ceil
    Phaser.Geom.Rectangle.Ceil(rect);  // ceil x, y
    
    Phaser.Geom.Rectangle.CeilAll(rect);  // ceil x, y, width, height
    
  • Floor
    Phaser.Geom.Rectangle.Floor(rect);  // floor x, y
    
    Phaser.Geom.Rectangle.FloorAll(rect);  // floor x, y, width, height
    

Get properties

  • Position
    var x = rect.x;
    var y = rect.y;
    
    • Bound
      var top = rect.top;
      var left = rect.left;
      var right = rect.right;
      var bottom = rect.bottom;
      
      or
      var points = Phaser.Geom.Rectangle.Decompose(rect);
      // var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points
      
      • points : top-left, top-right, bottom-right, bottom-left
    • Center
      var centerX = rect.centerX;
      var centerY = rect.centerY;
      
      or
      var point = Phaser.Geom.Rectangle.GetCenter(rect);
      // var point = Phaser.Geom.Rectangle.GetCenter(rect, point);
      
  • Size
    var width = rect.width;
    var height = rect.height;
    
    or
    var point = Phaser.Geom.Rectangle.GetSize(rect); // {x: rect.width, y: rect.height}
    
  • Area
    var area = Phaser.Geom.Rectangle.Area(rect);
    
  • Perimeter
    var perimeter = Phaser.Geom.Rectangle.Perimeter(rect);  // 2 * (rect.width + rect.height)
    
  • Aspect ratio
    var aspectRatio = Phaser.Geom.Rectangle.GetAspectRatio(rect);  // rect.width / rect.height
    
  • Lines around rectangle
    var topLine = rect.getLineA();  // top line of this rectangle
    var rightLine = rect.getLineB();  // right line of this rectangle
    var bottomLine = rect.getLineC();  // bottom line of this rectangle
    var leftLine = rect.getLineD();  // left line of this rectangle
    // var out = rect.getLineA(out);  // top line of this rectangle
    
  • Type:
    var type = rect.type; // 5
    

Point(s) & shape

  • Get point at shape's edge
    var point = rect.getPoint(t);  // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left)
    // var point = rect.getPoint(t, point);  // modify point
    
    or
    var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle);  // angle in degrees
    // var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point);  // push point
    
  • Get points around shape's edge
    var points = rect.getPoints(quantity);
    // var points = rect.getPoints(quantity, null, points);  // push points
    
    or calculate quantity from steps
    var points = rect.getPoints(false, step);
    // var points = rect.getPoints(false, step, points);  // push points
    
    • step : width of each step, in pixels. quantity = Perimeter(rectangle) / step;
    • points : an array of point
  • Point is inside shape
    var isInside = rect.contains(x, y);
    
    or
    var isInside = Phaser.Geom.Rectangle.ContainsPoint(rect, point);
    
  • Get a random point inside shape
    var point = rect.getRandomPoint();
    // var point = rect.getRandomPoint(point);  // modify point
    
  • Get a random point outside shape
    var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner);
    // var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point
    
  • Rectangle is inside shape
    var isInside = Phaser.Geom.Rectangle.ContainsRect(rectA, rectB);  // rectB is inside rectA
    

Rectangles

  • Is overlapping
    var isOverlapping = Phaser.Geom.Rectangle.Overlaps(rectA, rectB);
    
  • Get intersection rectangle
    var rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB);
    var rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB, rect);  // push rect
    
  • Get union rectangle
    var rect = Phaser.Geom.Rectangle.Union(rectA, rectB);
    var rect = Phaser.Geom.Rectangle.Union(rectA, rectB, rect);  // push rect
    

Empty

  • Set empty
    rect.setEmpty();     // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0
    
  • Is empty
    var isEmpty = rect.isEmpty();   // rect.radius <= 0;
    

Equal

  • Position, width, and height are the same
    var isEqual = Phaser.Geom.Rectangle.Equals(rect0, rect1);
    
  • Width and height are the same
    var isEqual = Phaser.Geom.Rectangle.SameDimensions(rect0, rect1);
    

Intersection

Rectangle to circle

  • Is intersection
    var result = Phaser.Geom.Intersects.CircleToRectangle(circle, rect);
    
  • Get intersection points
    var result = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect);
    // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);
    

Rectangle to rectangle

  • Is intersection
    var result = Phaser.Geom.Intersects.RectangleToRectangle(rectA, rectB);
    
  • Get intersection points
    var result = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB);
    // var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out);
    

Rectangle to triangle

  • Is intersection
    var result = Phaser.Geom.Intersects.RectangleToTriangle(rect, triangle);
    
  • Get intersection points
    var result = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle);
    // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);
    

Rectangle to line

  • Is intersection
    var result = Phaser.Geom.Intersects.LineToRectangle(line, rect);
    
  • Get intersection points
    var result = Phaser.Geom.Intersects.GetLineToRectangle(line, rect);
    // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);