Class: Polygon

Phaser.Geom. Polygon

A Polygon object

The polygon is a closed shape consists of a series of connected straight lines defined by list of ordered points. Several formats are supported to define the list of points, check the setTo method for details. This is a geometry object allowing you to define and inspect the shape. It is not a Game Object, in that you cannot add it to the display list, and it has no texture. To render a Polygon you should look at the capabilities of the Graphics class.

new Polygon( [points])

Parameters:
Name Type Argument Description
points string | Array.<number> | Array.<Phaser.Types.Math.Vector2Like> <optional>

List of points defining the perimeter of this Polygon. Several formats are supported:

  • A string containing paired x y values separated by a single space: '40 0 40 20 100 20 100 80 40 80 40 100 0 50'
  • An array of Point objects: [new Phaser.Point(x1, y1), ...]
  • An array of objects with public x y properties: [obj1, obj2, ...]
  • An array of paired numbers that represent point coordinates: [x1,y1, x2,y2, ...]
  • An array of arrays with two elements representing x/y coordinates: [[x1, y1], [x2, y2], ...]
Since: 3.0.0
Source: src/geom/polygon/Polygon.js (Line 12)

Members

area :number

The area of this Polygon.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/geom/polygon/Polygon.js (Line 51)

points :Array.<Phaser.Geom.Point>

An array of number pair objects that make up this polygon. I.e. [ {x,y}, {x,y}, {x,y} ]

Type:
Since: 3.0.0
Source: src/geom/polygon/Polygon.js (Line 61)

<readonly> type :number

The geometry constant type of this object: GEOM_CONST.POLYGON. Used for fast type comparisons.

Type:
  • number
Since: 3.19.0
Source: src/geom/polygon/Polygon.js (Line 40)

Methods

<static> Clone(polygon)

Create a new polygon which is a copy of the specified polygon

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The polygon to create a clone of
Since: 3.0.0
Source: src/geom/polygon/Clone.js (Line 9)
Returns:

A new separate Polygon cloned from the specified polygon, based on the same points.

Type
Phaser.Geom.Polygon

<static> Contains(polygon, x, y)

Checks if a point is within the bounds of a Polygon.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The Polygon to check against.
x number

The X coordinate of the point to check.
y number

The Y coordinate of the point to check.
Since: 3.0.0
Source: src/geom/polygon/Contains.js (Line 10)
Returns:

true if the point is within the bounds of the Polygon, otherwise false.

Type
boolean

<static> ContainsPoint(polygon, point)

Checks the given Point again the Polygon to see if the Point lays within its vertices.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The Polygon to check.
point Phaser.Geom.Point

The Point to check if it's within the Polygon.
Since: 3.0.0
Source: src/geom/polygon/ContainsPoint.js (Line 9)
Returns:

true if the Point is within the Polygon, otherwise false.

Type
boolean

<static> Earcut(data [, holeIndices] [, dimensions])

This module implements a modified ear slicing algorithm, optimized by z-order curve hashing and extended to handle holes, twisted polygons, degeneracies and self-intersections in a way that doesn't guarantee correctness of triangulation, but attempts to always produce acceptable results for practical data.

Example:

const triangles = Phaser.Geom.Polygon.Earcut([10,0, 0,50, 60,60, 70,10]); // returns [1,0,3, 3,2,1]

Each group of three vertex indices in the resulting array forms a triangle.

// triangulating a polygon with a hole
earcut([0,0, 100,0, 100,100, 0,100,  20,20, 80,20, 80,80, 20,80], [4]);
// [3,0,4, 5,4,0, 3,4,7, 5,0,1, 2,3,7, 6,5,1, 2,7,6, 6,1,2]

// triangulating a polygon with 3d coords
earcut([10,0,1, 0,50,2, 60,60,3, 70,10,4], null, 3);
// [1,0,3, 3,2,1]

If you pass a single vertex as a hole, Earcut treats it as a Steiner point.

If your input is a multi-dimensional array (e.g. GeoJSON Polygon), you can convert it to the format expected by Earcut with Phaser.Geom.Polygon.Earcut.flatten:

var data = earcut.flatten(geojson.geometry.coordinates);
var triangles = earcut(data.vertices, data.holes, data.dimensions);

After getting a triangulation, you can verify its correctness with Phaser.Geom.Polygon.Earcut.deviation:

var deviation = earcut.deviation(vertices, holes, dimensions, triangles);

Returns the relative difference between the total area of triangles and the area of the input polygon. 0 means the triangulation is fully correct.

For more information see https://github.com/mapbox/earcut

Parameters:
Name Type Argument Default Description
data Array.<number>

A flat array of vertex coordinate, like [x0,y0, x1,y1, x2,y2, ...]
holeIndices Array.<number> <optional>

An array of hole indices if any (e.g. [5, 8] for a 12-vertex input would mean one hole with vertices 5–7 and another with 8–11).
dimensions number <optional>
 2

The number of coordinates per vertex in the input array (2 by default).
Since: 3.50.0
Source: src/geom/polygon/Earcut.js (Line 7)
Returns:

An array of triangulated data.

Type
Array.<number>

<static> GetAABB(polygon [, out])

Calculates the bounding AABB rectangle of a polygon.

Parameters:
Name Type Argument Description
polygon Phaser.Geom.Polygon

The polygon that should be calculated.
out Phaser.Geom.Rectangle | object <optional>

The rectangle or object that has x, y, width, and height properties to store the result. Optional.
Since: 3.0.0
Source: src/geom/polygon/GetAABB.js (Line 9)
Returns:

The resulting rectangle or object that is passed in with position and dimensions of the polygon's AABB.

Type
Phaser.Geom.Rectangle | object

<static> GetNumberArray(polygon [, output])

Stores all of the points of a Polygon into a flat array of numbers following the sequence [ x,y, x,y, x,y ], i.e. each point of the Polygon, in the order it's defined, corresponds to two elements of the resultant array for the point's X and Y coordinate.

Parameters:
Name Type Argument Description
polygon Phaser.Geom.Polygon

The Polygon whose points to export.
output array | Array.<number> <optional>

An array to which the points' coordinates should be appended.
Since: 3.0.0
Source: src/geom/polygon/GetNumberArray.js (Line 9)
Returns:

The modified output array, or a new array if none was given.

Type
array | Array.<number>

<static> GetPoints(polygon, quantity [, stepRate] [, output])

Returns an array of Point objects containing the coordinates of the points around the perimeter of the Polygon, based on the given quantity or stepRate values.

Parameters:
Name Type Argument Description
polygon Phaser.Geom.Polygon

The Polygon to get the points from.
quantity number

The amount of points to return. If a falsey value the quantity will be derived from the stepRate instead.
stepRate number <optional>

Sets the quantity by getting the perimeter of the Polygon and dividing it by the stepRate.
output array <optional>

An array to insert the points in to. If not provided a new array will be created.
Since: 3.12.0
Source: src/geom/polygon/GetPoints.js (Line 11)
Returns:

An array of Point objects pertaining to the points around the perimeter of the Polygon.

Type
Array.<Phaser.Geom.Point>

<static> Perimeter(polygon)

Returns the perimeter of the given Polygon.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The Polygon to get the perimeter of.
Since: 3.12.0
Source: src/geom/polygon/Perimeter.js (Line 10)
Returns:

The perimeter of the Polygon.

Type
number

<static> Reverse(polygon)

Reverses the order of the points of a Polygon.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The Polygon to modify.
Since: 3.0.0
Source: src/geom/polygon/Reverse.js (Line 7)
Returns:

The modified Polygon.

Type
Phaser.Geom.Polygon

<static> Simplify(polygon [, tolerance] [, highestQuality])

Takes a Polygon object and simplifies the points by running them through a combination of Douglas-Peucker and Radial Distance algorithms. Simplification dramatically reduces the number of points in a polygon while retaining its shape, giving a huge performance boost when processing it and also reducing visual noise.

Parameters:
Name Type Argument Default Description
polygon Phaser.Geom.Polygon

The polygon to be simplified. The polygon will be modified in-place and returned.
tolerance number <optional>
 1

Affects the amount of simplification (in the same metric as the point coordinates).
highestQuality boolean <optional>
 false

Excludes distance-based preprocessing step which leads to highest quality simplification but runs ~10-20 times slower.
Since: 3.50.0
Source: src/geom/polygon/Simplify.js (Line 160)
Returns:

The input polygon.

Type
Phaser.Geom.Polygon

<static> Smooth(polygon)

Takes a Polygon object and applies Chaikin's smoothing algorithm on its points.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The polygon to be smoothed. The polygon will be modified in-place and returned.
Since: 3.13.0
Source: src/geom/polygon/Smooth.js (Line 19)
Returns:

The input polygon.

Type
Phaser.Geom.Polygon

<static> Translate(polygon, x, y)

Tranlates the points of the given Polygon.

Parameters:
Name Type Description
polygon Phaser.Geom.Polygon

The Polygon to modify.
x number

The amount to horizontally translate the points by.
y number

The amount to vertically translate the points by.
Since: 3.50.0
Source: src/geom/polygon/Translate.js (Line 7)
Returns:

The modified Polygon.

Type
Phaser.Geom.Polygon

calculateArea()

Calculates the area of the Polygon. This is available in the property Polygon.area

Since: 3.0.0
Source: src/geom/polygon/Polygon.js (Line 167)
Returns:

The area of the polygon.

Type
number

contains(x, y)

Check to see if the Polygon contains the given x / y coordinates.

Parameters:
Name Type Description
x number

The x coordinate to check within the polygon.
y number

The y coordinate to check within the polygon.
Since: 3.0.0
Source: src/geom/polygon/Polygon.js (Line 76)
Returns:

true if the coordinates are within the polygon, otherwise false.

Type
boolean

getPoints(quantity [, stepRate] [, output])

Returns an array of Point objects containing the coordinates of the points around the perimeter of the Polygon, based on the given quantity or stepRate values.

Parameters:
Name Type Argument Description
quantity number

The amount of points to return. If a falsey value the quantity will be derived from the stepRate instead.
stepRate number <optional>

Sets the quantity by getting the perimeter of the Polygon and dividing it by the stepRate.
output array | Array.<Phaser.Geom.Point> <optional>

An array to insert the points in to. If not provided a new array will be created.
Since: 3.12.0
Source: src/geom/polygon/Polygon.js (Line 206)
Returns:

An array of Point objects pertaining to the points around the perimeter of the Polygon.

Type
array | Array.<Phaser.Geom.Point>

setTo( [points])

Sets this Polygon to the given points.

The points can be set from a variety of formats:

  • A string containing paired values separated by a single space: '40 0 40 20 100 20 100 80 40 80 40 100 0 50'
  • An array of Point objects: [new Phaser.Point(x1, y1), ...]
  • An array of objects with public x/y properties: [obj1, obj2, ...]
  • An array of paired numbers that represent point coordinates: [x1,y1, x2,y2, ...]
  • An array of arrays with two elements representing x/y coordinates: [[x1, y1], [x2, y2], ...]

setTo may also be called without any arguments to remove all points.

Parameters:
Name Type Argument Description
points string | Array.<number> | Array.<Phaser.Types.Math.Vector2Like> <optional>

Points defining the perimeter of this polygon. Please check function description above for the different supported formats.
Since: 3.0.0
Source: src/geom/polygon/Polygon.js (Line 92)
Returns:

This Polygon object.

Type
Phaser.Geom.Polygon