Debug features
We've included a few debug features in the Platformer Engine that we hope developers will find useful. They are detailed below.
Sometimes it's useful to be able to see where a message you send goes after you send it. To make this possible, we've added a debug flag to the trigger function which turns on message tracking for a message. Message tracking outputs information to the console each time the message is passed.
The trigger function looks like this:
this.owner.trigger(‘message-name’, messageData, false);
There are two ways that you can add a debug flag. First, setting the third parameter in the trigger function to 'true' will turn on message tracking or in the case that 'messageData' is an object, you can name a field in the object 'debug' and set it to true. This will also turn on message tracking for that message.
The RenderDebug component is useful for visualizing an entity both on screen and in the console. It renders a rectangle at the location of the entity (useful when entity art isn't in place or the entity is invisible) or if the object has an collision component it renders the collision box for the entity. It also allows the user to click on entity to print the entity object to the javascript console.
To use RenderDebug add it to the json definition of the Entity you're working on like this:
{
"type": "RenderDebug",
"regX": 120,
"regY": 240
}
type - Indicates we're adding the RenderDebug component. regX - This is the x-origin point of the shape. regY - This is the y-origin point of the shape.
For entities without collision components you can control the width and height of the rectangle displayed by setting 'width' and 'height' properties on the entity in the properties section of the entity json definition or on the entity in Tiled.
Entities without collision components will render grey rectangles.
Entities with collision components will inherit their width and height from the axis-aligned bounding box (AABB) of the entity. This rectangle will be rendered in pink.
If the entity is the owner of a group shape (a collision situation in which entities are dependent on one another for their position) the axis-aligned bounding box of the group shape will be displayed as a green rectangle.
Right-clicking on an entity with an RenderDebug component will print the entity object to the javascript console. This is sometimes hindered by overlying DOM elements or layers, so it may be useful to hide these elements when trying to debug.
