Plugin Debug Overlay

Plugin: Debug Overlay

dopaminejs-plugin-debug-overlay 1.0.1.

npm install dopaminejs-plugin-debug-overlay

A small box in the top right corner that shows what the kernel is doing.

import { Game } from 'dopaminejs';
import { DebugOverlayPlugin } from 'dopaminejs-plugin-debug-overlay';

const game = new Game();

if (import.meta.env.DEV) {
    game.kernel.plugins.use(DebugOverlayPlugin);
}

game.start();

import.meta.env.DEV is a Vite flag. With another bundler, use whatever marks a development build.

What it shows

Line	Source
FPS	1 / dt of the last frame, rounded
Frame Time	dt in milliseconds
Systems	number of registered systems
Plugins	number of loaded plugins

It updates on every tick, so the numbers only move while the loop runs.

Details

• The element is #dopamine-debug-overlay, fixed, with z-index: 10000. It ignores pointer events.
• FPS is the instant rate of one frame, not an average. It jumps around.
• dt is capped at 0.1 seconds, so the box never reports under 10 FPS.

Removing it

game.kernel.plugins.remove('debug-overlay');

Removes the element and the tick listener.