Shape

A visual for drawing arbitrary 2D shapes with automatic triangulation.

Shape extends Mesh but provides a simpler interface for defining polygons. You only need to provide the outline points, and Shape automatically triangulates them into triangles for rendering.

Features:

• Automatic triangulation of concave polygons
• Support for complex shapes with holes (using advanced triangulation)
• Auto-computation of size from points
• Integration with Nape physics for collision shapes
• Efficient updates when shape changes

The shape is defined by a series of points forming a closed polygon. Points should be provided in counter-clockwise order for proper rendering.

// Create a triangle
var shape = new Shape();
shape.points = [
    50, 0,    // Top point
    0, 100,   // Bottom left
    100, 100  // Bottom right
];
shape.color = Color.BLUE; // Fill color

// Create a star shape
var star = new Shape();
var points = [];
for (i in 0...10) {
    var angle = i * Math.PI / 5;
    var radius = (i % 2 == 0) ? 50 : 25;
    points.push(Math.cos(angle) * radius + 50);
    points.push(Math.sin(angle) * radius + 50);
}
star.points = points;
star.color = Color.YELLOW; // Fill color

Instance Members #

A flat array of vertex coordinates describing the shape outline. Format: [x0, y0, x1, y1, x2, y2, ...]

Setting this property automatically triggers triangulation. When modifying the array contents directly (without reassigning), you must set contentDirty = true to update the shape.

Points should be in counter-clockwise order for proper rendering. The shape is automatically closed (last point connects to first).

If true, width and height are automatically computed from shape points. This ensures the shape's bounds always match its actual geometry. Set to false if you want to manually control the shape's size. Default is true.

Recomputes the shape's triangulation from its points. Called automatically when points change or contentDirty is true.

This method:

1. Triangulates the shape points into triangles
2. Updates the mesh indices
3. Optionally recomputes size from points

Override to implement custom triangulation strategies.

Initialize Nape physics body for this shape. Creates a physics body that matches the visual shape for accurate collisions.

If no collision shape is provided, automatically creates a polygon matching the shape's points.

Private Members #

Metadata #