melonJS Debug Plugin

!melonJS Logo


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

Then import and instantiante the debug plugin in your project. For example:
``JavaScript
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.