nape-js API
    Preparing search index...

    Class DebugDrawAbstract

    Abstract interface for debug rendering of a physics space.

    Implement this class and pass an instance to Space.debugDraw() to visualise the physics world — shapes, joints, contacts, AABBs, velocities, and centre-of-mass markers — using any 2D rendering backend (Canvas 2D, PixiJS, p5.js, Three.js, etc.).

    None of the methods are abstract by language enforcement — they all default to no-ops so you can override only the primitives your renderer needs.

    class CanvasDebugDraw extends DebugDraw {
      constructor(private ctx: CanvasRenderingContext2D) { super(); }

      drawSegment(p1: DebugVec2, p2: DebugVec2): void {
        this.ctx.beginPath();
        this.ctx.moveTo(p1.x, p1.y);
        this.ctx.lineTo(p2.x, p2.y);
        this.ctx.stroke();
      }
      // ... other methods ...
    }

    space.debugDraw(new CanvasDebugDraw(ctx), DebugDrawFlags.ALL);
    Index

    Constructors

    constructor

    Methods

    drawCapsule drawCircle drawPoint drawPolygon drawSegment drawSolidCapsule drawSolidCircle drawSolidPolygon

    Constructors

    Methods

    • Draw a capsule outline (two semicircles connected by straight segments). Used for: static/kinematic capsule shapes.

      Parameters

      • spine1: DebugVec2

        World-space first spine endpoint.

      • spine2: DebugVec2

        World-space second spine endpoint.

      • radius: number

        End-cap radius.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a circle outline. Used for: static/kinematic circle shapes.

      Parameters

      • centre: DebugVec2

        World-space centre.

      • radius: number

        Circle radius.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a point marker. Used for: contact points, centre-of-mass markers.

      Parameters

      • position: DebugVec2

        World-space position.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a polygon outline. Used for: static/kinematic polygon shapes.

      Parameters

      • vertices: DebugVec2[]

        World-space vertices in order. Do NOT store this array.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a line segment between two world-space points. Used for: polygon edges, velocity vectors, joint lines, AABB edges.

      Parameters

      • p1: DebugVec2

        Start point (world space).

      • p2: DebugVec2

        End point (world space).

      • Optionalcolour: number

        Optional ARGB colour hint (0xAARRGGBB). Renderers may ignore this.

      Returns void

    • Draw a filled capsule. Used for: dynamic capsule shapes.

      Parameters

      • spine1: DebugVec2

        World-space first spine endpoint.

      • spine2: DebugVec2

        World-space second spine endpoint.

      • radius: number

        End-cap radius.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a filled circle with an orientation indicator segment. Used for: dynamic circle shapes. The axis segment shows body rotation.

      Parameters

      • centre: DebugVec2

        World-space centre.

      • radius: number

        Circle radius.

      • axis: DebugVec2

        World-space end-point of the orientation indicator (from centre).

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    • Draw a filled polygon. Used for: dynamic polygon shapes.

      Parameters

      • vertices: DebugVec2[]

        World-space vertices in order. Do NOT store this array.

      • Optionalcolour: number

        Optional ARGB colour hint.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods