Shapes

Collision Shapes

A collision shape is a Rect, Ellipse, Line, or Polygon object attached to a renderable's Body. When using Tiled, collision shapes are automatically added based on the object size and shape defined in the map editor.

Managing Shapes

Shapes can be manually managed through the body:

import { Body, Rect, Ellipse, Polygon } from "melonjs";

// add shapes
this.body.addShape(new Rect(0, 0, 32, 48));
this.body.addShape(new Ellipse(16, 5, 20, 10));

// remove a shape
this.body.removeShapeAt(1);

// get a shape
const mainShape = this.body.getShape(0);

Note: When adding a Rect to a body via addShape, it is automatically converted to a Polygon internally.

Coordinate Space

Shape positions are relative to their parent renderable. By default, their position is (0, 0) — the top-left of the parent.

Bounding Box

Every shape has a getBounds() method that returns the axis-aligned bounding box (AABB). This is used internally for broad-phase collision detection (QuadTree) and for input hit testing:

const bounds = this.body.getBounds();
console.log(bounds.width, bounds.height);

Shape Types

Shape	Description
Rect	Axis-aligned rectangle. Converted to Polygon when added to a body.
Ellipse	Circular or elliptical shape.
Polygon	Arbitrary convex or concave polygon. Concave polygons are automatically decomposed into convex triangles.
Line	A line segment between two points.
RoundRect	A rectangle with rounded corners.

Using Shapes in Tiled

See How to define world collision shapes in Tiled for details on setting up collision shapes in the Tiled map editor.

Using PhysicsEditor Shapes

For complex shapes, you can use PhysicsEditor to define shapes visually and export them for use with melonJS. See How to load PhysicsEditor shapes.