Game development a platformer game with Phaser and HTML 5: Tutorial 9

Debugging issues in your game and fixing up weird occurrences

We have now implemented quite a few concepts in phaser. As some of you may have realised by now we have a few bugs with our collision detection. This tutorial has been constructed to show you practically how to debug and fix these issues. So that when you start developing your own games you will know how to debug your issues.

Take a look at some of the issues we are facing in the below video.

The issues

  1. Our player can walk in thin air.
  2. Our player doesn’t even touch our hazards and dies.

How to debug this issue?

In order to debug the problem we need to enable phaser default debugging on bodies. We do this by building a new method called the render method and will look something like this.


render: function() {
this.game.debug.body(this.player);
this.fires.forEach(function(element){
this.game.debug.body(element);
}, this);
this.platforms.forEach(function(element){
this.game.debug.body(element);
}, this);
this.spikes.forEach(function(element){
this.game.debug.body(element);
}, this);

}

Basically what we are doing here is first of all enabling debug body on our player and then looping through our object groups to enable debug body on them. You should have something like below now :

Phaser body debug mode active on objects in the scene
Phaser body debug mode active on objects in the scene

The green boxes you now see around the objects are our bounding boxes or collision boxes as they are more commonly known. Watch the below video to understand how this works.

To explain it in simple terms the bounding box is an invisible box which gets wrapped around all objects you enable a body on in phaser. This box is then compared to other objects to see if they collide or not. One of the reasons our boxes are so big compared to our actual objects are because we have scaled our images in our project.

How to fix the bounding box sizes

We can scale our bounding boxes in phaser. To fit our objects by manipulating the bounding box size. We can do this with the following bits of code.


this.fires.forEach(function(element){
element.anchor.setTo(1);
element.body.setSize(element.width*0.5,element.height*0.5,element.width/2,element.height/2);

}, this);

this.platforms.forEach(function(element){

element.body.setSize(234,element.height-10,0,0);
}, this);

this.spikes.forEach(function(element){

element.anchor.setTo(1);
element.body.setSize(element.width*0.5,element.height*0.5,element.width/2,element.height/2);
}, this);

The improved end result

We have now made our bounding boxes more of a perfect fit. For our objects in our game as you can see from the video below it does have some form of challenge. As I struggled to get past the hazards on the first try.


 

Leave a Reply

Your email address will not be published. Required fields are marked *