Debugger

Pontus Alexander
ReCreating Megaman 2 using JS & WebGL
2 min readJul 23, 2015

A game engine needs good ways of debugging games. My engine doesn’t provide much of that kind. I felt like the debug code polluted my project. I could already expose collision zones, but since I wrote the camera path feature I felt I needed a good way to debug that as well.

I started writing a method on the game object that looped over all the camera paths in the scene, created meshes of them and added them to the scene. It worked nicely. But in order to remove these “fake” elements I needed to keep track of them. I didn’t want to pollute the game or engine classes with mostly unused sets or arrays, so I wrote a debug class that you attach to the engine. The debug class contains tools for manipulating the game world and keeps track of whatever dirt it left.

In this snippet I create messes for both the windows and constraints of camera paths and keep the meshes in a set in the debugger.

This way of writing a debugger is much nicer than my old solution for exposing collision zones. I had a flag in the XML that updated a static property of the base object which in turn told the collision zone method to create a mesh and insert it in the scene for every collision zone created. It didn’t feel nice, so I included those thing in the debugger class as well.

For the full debugger commit, click here.

In the screenshot collision zones are white wireframes, the cyan in the middle is a constraint, which the camera must follow, and the green line going diagonally across the screen and along the bottom is part of a the wireframe mesh representing the camera window.

--

--

Pontus Alexander
ReCreating Megaman 2 using JS & WebGL

I’m a software engineer, living in Stockholm. I write about random things that interest me.