I’ve been working on a new feature called interactive debug that will be available in the next release of Flixel Community. It’s a plugin activated when the debug overlay becomes visible. It allows developers to interactively move and change elements while the game is running. Before showing the new feature in action, let me explain why it was developed.

When making a game, I tend to spend a significant amount of time tweaking things. For instance a level is usually not good at first, because the player is unable to overcome some obstacles (they are too high or their gap is too big). I fix that by following an extremely boring workflow: tweak something, compile, open the game, walk the player’s character to the right place, test, then repeat everything again. I can optimize that workflow by hardwiring the player’s character at the right place, but I just removed a single task from the list. I still need to go back and forth from the IDE to the game to make things right.

Sometimes I just want to test the enemy AI, but the player’s character isn’t at the right spot, or the enemy is at the wrong place, and so on. I got tired of all that and decided to implement something that allow me to change things while the game is running. I call it interactive debug. When it is active, developers can choose tools to change the game elements, e.g. the pointer tools is used to select things, while the tile tool is used to change tilemaps.

Below are some gifs showing my progress related to this feature. This is an early preview and just a few things are implemented, but it’s possible to have an idea of what is coming. The first tool is the Pointer, which can be used to selected elements on the screen. Anything that has a position (x and y properties) can be selected:

 When an element is selected, it becomes highlighted and its class name is displayed. It’s also possible to select multiple elements by holding Ctrl while clicking:

After an element is selected, it can be moved using the Move tool:

 Sometimes it’s useful to remove an element from the screen, so the Eraser tool comes in handy. Just press Delete and all selected elements will be removed from the screen (interactive debug calls kill() on them). It’s also possible to permanently remove elements (from the memory) by pressing Delete while holding Shift:

Finally the Tile tool allows a developer to modify any tilemap on the screen. Right now it’s possible to edit just the first tilemap found in the state’s display list, but that will change in the future:

 I have more tools and ideas planned, such as Rotate, a property inspector and the ability to save any changes made during the interactive session. You can follow my progress by watching issue #206 in the Flixel Community repository on Github. I think this new feature will drastically improve the workflow of all Flixel developers.