Package Exports

@melonjs/debug-plugin
@melonjs/debug-plugin/dist/@melonjs/debug-plugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@melonjs/debug-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

melonJS Debug Plugin

Installation

$ [sudo] npm install @melonjs/debug-plugin

Then import and instantiante the debug plugin in your project. For example:

import { utils, plugin } from 'melonjs';

// dynamically import the plugin
import("@melonjs/debug-plugin").then((debugPlugin) => {
    // automatically register the debug panel
    utils.function.defer(plugin.register, this, debugPlugin.DebugPanelPlugin, "debugPanel");
});

Usage

The Debug Panel is hidden by default and can be displayed using the S key, it will then provide the below information : debug-panel

Amount of objects currently active in the current scene
Amount of draws operation
Amount of body shape (requires to enable the hitbox checkbox)
Amount of bounding box
Amount of sprites objects
Amount of objects currently inactive in the the object pool
Heap/memory usage
Frame update time (in ms)
Frame draw time (in ms)
Current fps rate vs target fps

Note: Heap information requires starting Chrome with --enable-precise-memory-info

Additionally, using the checkbox in the panel it is also possible to draw :

Shape and Bounding box for all objects
Current velocity vector
Quadtree spatial visualization

Questions, need help ?

If you need technical support, you can contact us through the following channels :

Forums: with melonJS 2 we moved to a new discourse forum, but we can still also find the previous one here
Chat: come and chat with us on discord
we tried to keep our wikipage up-to-date with useful links, tutorials, and anything related melonJS.