Debug Draw

The physics debug draw overlay renders wireframe outlines for all colliders, velocity arrows, and contact points. It uses the engine’s Draw API and works in both the editor and at runtime.

Enabling Debug Draw

import { Physics } from 'esengine/physics';

// Toggle debug draw on/off
Physics.setDebugDraw(app, true);

Configuration

Control which elements are visualized:

import { Physics } from 'esengine/physics';

Physics.setDebugDrawConfig(app, {
    enabled: true,
    showColliders: true,    // wireframe collider outlines
    showVelocity: true,     // velocity arrows on dynamic bodies
    showContacts: false,    // contact point markers
});

Property	Type	Default	Description
enabled	boolean	false	Master toggle for debug drawing
showColliders	boolean	true	Draw collider wireframes
showVelocity	boolean	false	Draw velocity arrows on dynamic bodies
showContacts	boolean	false	Draw contact points on collision enter

Color Coding

Collider outlines are color-coded by body type:

Body Type	Color
Static	Blue
Dynamic	Green
Kinematic	Cyan
Sensor	Yellow (semi-transparent)

Velocity arrows are drawn in red. Contact points are shown as red dots.

Tip

Debug draw is registered as a custom draw callback named 'physics-debug-draw'. It is automatically set up when the physics plugin initializes — you only need to enable it.

PhysicsDebugDraw Resource

For advanced control, access the PhysicsDebugDraw resource directly:

import { PhysicsDebugDraw } from 'esengine/physics';

const config = app.getResource(PhysicsDebugDraw);
config.enabled = true;
config.showVelocity = true;
app.insertResource(PhysicsDebugDraw, config);

See Also

• Physics Overview — setup and configuration
• Colliders — collider shapes
• Custom Draw — engine draw API