# 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);
``````