bounding box

Phaser 3 bounding box size with Arcade Physics

intro

The Problem

Sometimes, the bounding box of the hit area is not the size that we need. This can cause problems with collisions. In the example below, even if the ninja was able to dodge an obstacle, without such a big hit area (shown in purple around the ninja), the player is sure to hit something accidentally.

Set Size of Bounding Box

For testing a solution to this problem I temporarily set a global variable in the game so I could access the ninja variable for the developer console (f-12).

window.ninja=ninja

By using this, I was able to see all of the properties on the ninja, as Chrome’s developer tools have an IntelliSense feature. I used the code below and fixed the problem. We set the size of the body by passing to the function, the width, height and a true or false as to center the bounding box around the sprite or not.

ninja.body.setSize(ninja.width, ninja.height, true);

Thinking the problem was fixed, I used the following code in my scene’s create function

this.ninja.body.setSize(this.ninja.width, this.ninja.height, true);

Problems at runtime

However, when I ran the code, it didn’t work. It worked after the player had landed on the ground. But I couldn’t get it to work the way I had in the console.

Final solution

Finally, it seemed what was happening, was the Phaser just wasn’t quite ready to deal with the ninja. For some reason, it will still dealing with setting up physics.

My final solution was to call the code after a one-second delay.

this.time.addEvent({
            delay: 1000,
            callback: this.delayDone,
            callbackScope: this,
            loop: false
        });
delayDone() {
        this.ninja.body.setSize(this.ninja.width, this.ninja.height, true);
    }

It worked perfectly!

Leave a Comment