Debug features

We've included a few debug features in the Platformer Engine that we hope developers will find useful. They are detailed below.

##Message Tracking 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.

##Render Debug The Render-Debug 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 Render-Debug add it to the json definition of the object you're working on like this:

{
	"type": "render-debug",
	"regX": 120,
	"regY": 240
}

type - Indicates we're adding the Render-Debug component. regX - This is the x-origin point of the shape. regY - This is the y-origin point of the shape.

###Without Collision 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.

###With Collision 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.

###On Click Clicking on an entity with an Render-Debug 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.

##FPS Counter The FPS Counter is an entity that can be added to a layer to display diagnostic information about the game. It will display the average FPS of the game as well as other defined values. To add values trigger a 'time-elapsed' message on the scene layer and the FPS Counter will tally and display the values. The name and time elapsed will be displayed on screen in the format "name: timeElapsed". For more information on setting this up, check out Logic-FPS-Counter.