O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 8. Debugging Your Game

Impact’s Debugger

As our game comes together and we begin to add more entities, performance is going to become a concern. Also, there may be things we need to see, such as the bounding boxes of entities and how many entities are on the screen at any given time. Luckily for us, there is a really great debugger built into Impact. In order to use it, we will need to add the following class to the main.js requires block:

'impact.debug.debug'

Once you have added this, refresh the game in your browser and you should now see the debug menu on the bottom of the screen.

Impact’s debugger will show up at the bottom of your game’s page.

Figure 8-1. Impact’s debugger will show up at the bottom of your game’s page.

As you can see, the debugger has some very helpful features. On the right-hand side, you will see the number of milliseconds your code takes to execute on each frame, followed by the frames per second, draws, and finally the number of entities. On the left are options to explore the map layers, individual entities, and performance. Let’s take a deeper look, starting with the map layers.

The Background Maps tab of the debugger shows us all of our map layers and a preview of the entire map.

Figure 8-2. The Background Maps tab of the debugger shows us all of our map layers and a preview of the entire map.

Here, you can see a preview of your entire map and what is currently being rendered in the display. You can also turn off layers ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required