Phaser 3 Debugger
June 11th, 2019

Between taking care of my kids, working full-time, and doing construction on my house, I haven't had much time for programming. In the time I have had, I've worked on two things: making some updates to my website, and developing a debug utility for Phaser 3.

On my website, this dev log page recieved the most updates. I worked on adding a list of dev logs on the left to let users go to a specific log quickly. I plan to add a search bar at the top to quickly find the dev log you want. I also updated the home page to include a link to the debug utility I will talk about next.

The primary thing I worked on is the phaser3-debugger. This is a tool I created that makes it easier to debug Phaser3 games. It has a variety of features, such as adding a pause button, displaying the current values of configurable properties of entities, and pausing when a collision occurs. If you'd like to check it out, you can find it on github. It can also be installed easily via npm.

My motivation for building this tool was to help me debug a game I am building. I found that stepping through the game loop was a very slow and tedious way to find bugs, and often made it hard to see the whole picture when a lot of sprites and bodies were moving at once. The phaser3-debugger allows me to see the values of the properties I care about for each entity, in real time. Or, I can use it to slow down time so everything moves slow enough to see what happens during normally fast action. I can also pause it at any moment, and resume play when I'm ready.

After building the phaser3-debugger, I used it in my game development, and it worked beautifully! I was able to quickly identify several bugs in my code which had been eluding me for some time.

Even though the debugger isn't finished, it is certainly in a very usable state. I do have plans to add some nice-to-have features, but for now it will remain as it is. If you have any feature suggestions or find a bug, please help me out by submit a ticket on github!