Overhaul the built-in debugger

[Dovyski]

As discussed in #158, the built-in Flixel debugger has some API limitations that cause problems. It's not possible, for instance, to change the key that shows/hide the debugger. The debugger cannot be programmatically controlled either.

It's time to improve the built-in debugger. HaxeFlixel already has a great debugger API, so it might be a good start point. Below is a set of features I would like to see:

• Programmatically control the debugger using FlxG.debugger.method();
• Implement something like an "interactive debug inspection mode" (more on that below);
• Improve the console (e.g. add colors, prevent repeated messages using a number badge like Chrome console does, allow developers to type in commands);

The "interactive debug inspection mode" allows a developer to stop Flixel's updates while maintaining all debug things working. It allows interaction with the elements on the screen. For instance a developer can click a sprite and a tooltip will show its attributes (velocity, health, etc). A selected entity can be moved, rotated, deleted, etc.

Among the things I envision for this interactive mode are:

• Edit properties of any element on the screen;
• Edit tilemaps (remove and add tiles, possibly saving the result as a CSV file);
• Highlight elements of a FlxGroup;
• Select a camera and move its observed point (e.g. use keyboard arrows to navigate the scene);
• Calculate the distance between two elements;

[Gama11]

Interesting ideas with the interactive debugging! I have something similar in mind for HaxeFlixel, not quite as advanced though (https://github.com/HaxeFlixel/flixel/issues/972).

[Dovyski]

I'm planning to work on this soon, you could port our code to HaxeFlixel, @Gama11 .

[Dovyski]

I've started working on this. While refactoring the FlxReplay code, I had to hack several things to accommodate a replay plugin within the current debugger (and vice-versa).

I will start by creating FlxG.debugger with a proper API to add/remove debug overlays (e.g. VCR which contains the FlxReplay buttons at the top). Right now VCR is instantiated by the debugger itself, but it should only be added if the FlxReplay plugin was enabled.

[Dovyski]

Here's a gif showing my current progress:

It's a demonstration of how items can be selected and moved around. I've blogged about all the things I already implemented.

[greysondn]

That is encouraging. I know that we simply implemented key combinations and a subsystem of sorts for adjusting numerical variables that affected the game logic in the past, but what you're showing is neat looking, at the least.

I'm really liking the ideas but I'd like to point you towards Bret Victor's work RE: "Creators need a direct link to their creations" (he is, I think, better known for "A Brief Rant On The Future Of Interaction Design").

http://vimeo.com/36579366

That seems to be the video I'm looking for, though I'm struggling to check it as I have no player available for the video. I'll figure out some way to watch it and point out the major sections, but an active system for re-configuring and seeing changes live is part of what he demonstrates, and he demonstrates it as something he's just rigged to play with and figure things out - not, by any means, a strongly built system. Still I think those are tools that would be useful to any developer; if memory serves he demonstrates a way to trace paths, a way to record a segment of interaction and play with it along the timeline while showing where entities on screen will be, showing - directly - the effects of moving a number up and down on things that are tied to it for generation, and a few other things like toying with the gravity in real time as he tries to play the game and deriving inspiration from that. I doubt my list is complete here but should serve as a starter.

I hesitate to link him even if I want to give him his dues (don't know if it's right to ask him to be involved in any sense), but his github handle is worrydream.

I am not saying even that he's the authoritative voice or that we should follow him. His ideas are what I wish to point out as something to consider and I can think of no better way than pointing at the source. My thoughts aren't organized; now with things clear in front of me, I have odds and ends on things I've seen and looked into (and tried to implement) over time and a loss for what to do with this disorganized data in my head XD

[Dovyski]

Thanks for all the ideas and resources, @greysondn . They changed my thoughts about this debugger, how it can be improved to really help creators, not only show small things.

[Dovyski]

Several of the features described in this issue landed in https://github.com/FlixelCommunity/flixel/commit/4192cea9d137a2ba39c58419b544985cb158b50d. In the future we can add new/missing features to the debugger using only pull requests, there is no need to keep this issue open.

I'm closing it for the sake of organization.