Polygon Class

Polygon Class

Constructor

Parameters

• options (Object, required): An object containing configuration options for the polygon.
  • points (Array, required): An array of 2D points representing the vertices of the polygon.
  • backgroundColor (String, optional): The fill color of the polygon. Default is undefined
  • physicsEnabled (Boolean, optional): Enables physics on that polygon (works best if polygon is convex). Defualt is false
  • physicsOptions: passed to matter.js to configure how the object interacts. Set mass, friction, frictionAir, frictionStatic, restitution this way. Refer to matter.js documentation for full list

Example Usage

const polygonOptions = {
  points: [[0, 0], [50, 0], [50, 50], [0, 50]],
  backgroundColor: "#00FF00",
};

const myPolygon = new Polygon(polygonOptions);

To add to the scene, use scene.addObject()

scene.addObject(myPolygon)

Properties

• type (String): Indicates the type of object, set to "polygon".
• points (Array): An array of 2D points representing the vertices of the polygon.
• backgroundColor (String): The fill color of the polygon. (Supports all CSS colors and schemas - eg: hex, rgb, rgba)
• coordinates (Array): The coordinates of the top-leftmost point of the polygon.
• convex (Boolean): Indicates whether the polygon is convex.
• square (Boolean): Indicates whether the polygon is a square.
• hitbox (Array): An array representing the hitbox dimensions if the polygon is a square.
• Inherited properties from GameObject:
  • position (Array): position of object (top-left most point of polygon... do not use to reference polygon... very unstable)
  • rotation (Number): Rotation in radians of object (only if physics enabled)
  • bounds (Array): [rightBound, bottomBound]
  • boundsActive (Boolean): Are the bounds active on the object or no
  • physicsEnabled (Boolean): Is the physics engine active on this object
  • body (Matter.js Object Reference): Reference to the physics body (if physicsEnabled is true). Only gets applied when added to a scene

Methods

setHitBox(width, height)

Sets the hitbox dimensions of the polygon. If width and height are provided, the polygon is considered a square.

• width (Number): The width of the hitbox.
• height (Number): The height of the hitbox.

myPolygon.setHitBox(30, 30);

draw({ ctx, camera })

Draws the polygon on the canvas using the provided rendering context (ctx) and camera coordinates.

• ctx (CanvasRenderingContext2D): The 2D rendering context of the canvas.
• camera (Array): An array representing the camera coordinates.

const canvasContext = document.getElementById("myCanvas").getContext("2d");
const cameraCoordinates = [0, 0];
myPolygon.draw({ ctx: canvasContext, camera: cameraCoordinates });

polify()

Returns an array representing the vertices of the polygon.

const polygonVertices = myPolygon.polify();

getWidth()

Calculates and returns the width of the bounding box of the polygon.

const polygonWidth = myPolygon.getWidth();

getHeight()

Calculates and returns the height of the bounding box of the polygon.

const polygonHeight = myPolygon.getHeight();

move(vector)

Moves the polygon by the specified vector.

• vector (Array): An array representing the movement vector.

const movementVector = [10, 0];
myPolygon.move(movementVector);