Add console to debugging screen

[Gama11]

I've been working on recreating Eric Smith's "CoolConsole" (link to YouTube-Video about it, recommended you watch it) in haxe and integrating it into the flixel debugger screen. This has been inspired by Dovyski's suggestion in a Flixel-Community-issue about improving the debugging screen.

Commit on my HaxeFlixel-fork

Demo swf

The console is pretty much functional at this point and has a good number of integrated commands, but likely needs a lot of bug fixing, polish and also a more solid documentation (there are just a few comments here and there right now):

Known Bugs:

• It doesn't compile to HTML5 and windows at all atm. Haven't really looked into it, but upon compiling, I get an error saying nme.text.TextField has no field length. Flash seems to be working fine so far, haven't tested anything else. On a lot of (mobile) targets, having this doesn't make sense anyway?

Unknowns

• I don't really like the 2.5+ debugger at all. Like, the whole FlxWindow-stuff and the different debuggerLayouts. Read more about it in the issue over at the flixel-community repo, I describe it there. What do you think? I kinda think it should be considered to ditch debuggerLayouts entirely, I doubt anyone uses them. Makes it easier to integrate the console as well, which currently only works with one.
• Adding a call command that calls a function with a set of parameters. Would require a lot of repetition of the code in onKeyPress - or its abstraction. The create command currently also doesn't support parameters for the class it creates an instance of.
• Create an optional shortcut for each command that consists of two letters only. Might be nice?

Todo

• Testing
• Bug fixing / Cross-platofrm-testing
• Proper documentation
• Make the history cross-platform-compatible. Afaik, it only works in flash due to using a local shared object. Also,

Commands

Not gonna list all of them here, just the more intersting ones (have a look at the help command). A lot of them are basically just links to the public functions of FlxG:

• clearHistory - The console has a history of up to 25 commands you can browse through by using the up and down keys. This clears it.
• help - Prints all the commands there are.
• watchMouse - adds FlxG.mouse.x and FlxG.mouse.y to the watch window. Really useful for building gui stuff
• play / playMusic - use the "Beep" sound to test
• create - Creates a new FlxObject at a specified position or a the mouse coords. Use the TestSprite class / object to test it.
• set - Changes the value of a variable. Use "state" as object parameter to refer to the current state being used (FlxG.state).

Sorry, I guess I probably didn't cover a lot of stuff, but feel free to ask away.

[Beeblerox]

@Gama11 that would be a cool feature, but i need to think about it.
I think that the error with TextField can be solved by changing the lines 203 and 210 _input.length with _input.text.length in Console.hx (or i'm wrong)
There is also gconsole project from @prog4mr https://github.com/ProG4mr/gconsole which works on almost all targets (but not on html5)

[Gama11]

@Beeblerox Alright. Even if it's not being included in core-flixel, I think it could probably still be made available through a plugin or something like that (I don't really know how plugins work and how easy it`d be to make additions to the debugging screen via that).

I think the main benefits of this console are not so much all the commands from FlxG - I mainly added them because it was easy to do so and there's no real reason not to - but the high level of customizability (you can add new commands yourself) and the set and create commands. I always wanted to be able to change variables without recompiling - it's great for balancing. When I found out that FlxG.watch could do that as well, I was kinda thrilled - but in reality, it's too much of a hassle to really be useful as you have to add the variables to the watch window beforehand and all that. Not really as convenient as it could or should be.

It seems like _input.length really cauesd some issues. Also the restrict field - without that, the console is only slightly less convenient and it's still available in flash. After fixing that, another error appears for html5: "nme.text.TextFieldType should be String" and "browser.text.TextFieldType should be String" in line 303 of FlxTextField. Not sure what's up with that, is that class somehow used to replace nme.text.TextField on some targets? It now compiles fine to windows though, also seems to be working fine. Except that the Tab-key doesn't focus the console for some reason and the black background of the console is missing.

Had no idea about gconsole. Looks pretty similar to the CoolConsole / my version of it when it comes to features, but I haven't tested it yet. Still, I think it would be better to have something like this integrated into the flixel debugger so it can work in conjunction with the other features like log and watch.

[tiagolr]

Yes, i admire your work but its a shame ppl are always reinventing the wheel, gconsole has a very neat/adaptable design, does not have many known bugs, and could have saved you tons of work by integrating it instead of creating a console from scratch. Not saying this because i created that console, I'm just thinking simple.

As any other open project it would also benefit greatly from other developers adding features to it.

Anyways good luck @Gama11 and nice work so far =) Cheers.

[Gama11]

@prog4mr Thanks. Like I mentiond before, I had absolutely no idea something like that already exists in haxe. I guess I should have created an issue here before starting to work on it, but I was rather enthusiastic about it. It probably would've saved me a lot of work, but then again, I learned a crapload of things about haxe (which I'm very new to) doing all of this, which is great too.

I'm eventualy gonna have a closer look at your console. I'm sure there are still things to learn from and that could be useful :)

Btw, I now got it to compile to HTML5 (there were issues with 'FlxTextField' which I wasn't at all using, but there was an import of it somewhere). Thing is, it seems like the debugger screen is not working at all in HTML5 - just not showing up when hitting the key (or even when manually forcing it to show up in code).

[Beeblerox]

@Gama11 i've disabled debugger for html5

[Gama11]

@Beeblerox Any particular reason for that?

[Beeblerox]

i don't remember :) will try to reenable it, since i need to find out why dev version doesn't work on html5 (in most cases)

[Beeblerox]

@Gama11 i've made commit which enables debugger on html5 target: https://github.com/Beeblerox/HaxeFlixel/commit/e7210d3512f7445733e3d6dc08882c1aadb717ca
But i must warn you - it works in FireFox, doesn't work in IE9, and i haven't tested it in Chrome

[Gama11]

@Beeblerox Chrome seems fine as well.. Except that the console input textfield doesn't show up for some reason in both FF and Chrome.

[Gama11]

Made a few more changes. All debugger layouts are now fully supported - press the up and down keys in the demo to browse through them (even though I still don't think debugger layouts are useful).

[Beeblerox]

@Gama11 Looks very good! I like very much how you've changed debugger layouts, but gconsole by @prog4mr has more convenient functionality (in my opinion, but i can be wrong). And i'd like to bring them together if you ( @Gama11 ) and @prog4mr don't mind

[Gama11]

@Beeblerox Thanks! :) I haven't yet had a closer look at @prog4mr's gconsole, but I'm sure it's a lot more advanced than mine. I don't mind to "bring them together".

Btw, what are your thoughts on debugger layouts? Like I mentioned before, I haven't seen anyone actually using them and I don't think they're worth having - similar to the glitchy FlxWindow used for the debugging tools (can be moved around when the debugger isn't up, when two windows are on top of each other, both are moved around etc...)

[Beeblerox]

@Gama11 interesting. I haven't used debugger much, but i'd like to leave layouts in the engine (i saw that someone used them, but can't remember who it was). The bug with two overlapping FlxWindows can be solved easily (i think) and i will do it. And you've mentioned that there are more bugs with FlxWindow, can you list some more? i'll try to fix them also.

[Gama11]

@Beeblerox Alright.. Like I mentioned, you can interact with windows when the debugger isn't up (dragging them around and resizing them). Not sure if there are other issues. In general, I don't think the functionality to be able to rearrange the windows is all that useful - unless flixel automatically saves this information.

[Beeblerox]

@Gama11 thanks for the info. i'll think about debugger layouts, Maybe we should start thread about it on the forum?

[tiagolr]

Hey, the gameconsole has very simple code-base, don't know how you plan to merge the two consoles, but should be totally possible, let me know if you need anything.

PS - there may be easy ways to integrate gconsole with flixel console, like copying the output of the gconsole to flixel console etc... it depends on what you're looking for.

[Gama11]

@Beeblerox A forum thread seems like a great idea. A lot of important questions could be answered there - like, if people are looking for changes and new features, if they find debugger layouts useful, or if they even use the current debugger in the first place. And if not, why.

@prog4mr Also not quite sure how exactly merging them would work. I guess one could compare them (feature- and code-wise?), then discuss which approach is better etc.. For example, I think you need to register variables in gconsole in order to be able to change them, which is not the case for this one (however, it still seems a bit buggy).

[tiagolr]

How do you currently get variables then?

[Gama11]

@prog4mr The set command for changing vars currently requires you to pass the variable's object as well. It then attempts to turn the string entered by the user into an actual object, then changes the var using Reflection - seems to be pretty much the haxe equivalent of what the CoolConsole was doing in AS3. It's probably not the nicest way to do it and also doesn't seem to work to access "nested variables" (variable within an object that is a field of an object - state.sprite.x for example).

[tiagolr]

Ok, thats neat, gameconsole does not have that yet (nested atributes / objects) tho its in the 'todo' list.

[Beeblerox]

@Gama11 actually i've questioned people on twitter and couple of them answered positively on debugger layouts, so i'll leave them

[Gama11]

@Beeblerox Fair enough. However, feedback on the debugger in general, not just debugger layouts, probably wouldn't hurt either.

[gamedevsam]

Oh wow, the console integration is really sleek! Does this work on cpp target?

[Gama11]

@crazysam Thanks! :) Yep, it does, (at least windows target) - although auto-pausing the game when the textfield has focus (which I figured would be useful) doesn't work properly and the textfield doesn't look quite as nice visually. And, on html5, the textfield just doesn't appear at all.

[gamedevsam]

I'd be interested in integrating this feature into the main branch of the engine, especially if you can add your demo to HaxeFlixelDemoes repo to give people instructions on how to create hooks with your console.

[impaler]

This would be a great addition, nice work Gama11.
I would like to see the debugger as 'modular' and replaceable as possible. I am not a user of the layouts and I don't like the way the buttons are positioned in, it makes removing or adding a button messy.

[Gama11]

@crazysam Yeah, sure, coming up with a quick demo shouldn't be a problem. :)

@impaler So I guess you would like the console windows to be resizable as well? Since I deactivated that for now. What exactly is your problem with the buttons? I kinda like how they're positioned in. Is it the code which handles it or the fact that you can't really move them?
I'm not against being able to resize and rearrange windows, to essentially customize your console - but I think it doesn't really make too much sense atm, as flixel doesn't save these preferences - it wouldn't be hard to integrate this, but it got me thinking about saving data. Also might be nice to be able to toggle between being able to interact with windows via another button.

Currently, flixel already uses a local shared object for saving the game's volume (at least for flash, not sure for other targets). But it got me thinking - I use another one for saving the command history. It would make more sense to have one central save for all of that, maybe even accessible via FlxG so that programmers can use that one to save their game's data. They wouldn't have to handle that themselves anymore.

[impaler]

@Gama11 yes my comments would relate to a future feature. Now you mention resizing the debugger does look pretty bad when you toggle a fullscreen mode, I might look at that in the future.

What I mean by the buttons, currently in VCR.hx all the buttons are positioned based on eachother. I would like to see it replaced by some simple layout logic with with a addButton() function so it would be easy to add custom buttons or remove them. Ideally I think it would be more user friendly having buttons/vars to minimize/disable all the windows individually. Saving their positions etc in a shared object could be interesting but not necessary.

Combing Flixel's core shared object with your console's history looks like a more organized approach.

[Gama11]

@impaler That makes sense.. That way, you could customize the debugger even more, by adding custom buttons. Seems like an interesting idea.

I made a commit which involves the merge of the two shared objects.

I'm currently reworking the set command a bit and also working on a call command which calls functions with a set of params. This requires you to register objects / functions to the console first. I'm wondering where to add these additional functions required - you could just have everything in FlxG, but that would clutter it even more. I'm thinking having a reference to the console in FlxG might be a good idea, so you need to call FlxG.console.addCommand() / FlxG.console.registerObject(). That'd be similar to what's been done to FlxG.follow() which is now FlxG.camera.follow() IIRC.
However, this also makes it harder to find out about the console / the existance of these functions in the first place (when I was new to flixel, I would often just browse through the functions available in FlxG by looking at the auto-completion to find out about new features).

[Gama11]

I made another fairly large commit. I substantially changed the way the set command works and I also added the promised call command. Both seem to be working fine. In order to be able to use the set command, you first have to register the object that contains the var you want to manipulate. It works similarly for the call command, you need to register the function beforehand.

I decided to go with the approach of having a reference called console in FlxG.

The help function has been changed significantly as well. It no longer spits out a wall of text, but a compact list of all the commands. Of course it doesn't display as much information anymore, so there's now the option to pass a command as param of the help command which then gives you more information about that specific command.

I also improved the demo.

Are there any other things you'd like to be changed about / integrated into the console?

[impaler]

Nice one Gama11, I started some code for custom buttons #348

[Beeblerox]

@Gama11 I've merged your pull request. and made some changes on texture_atlas branch for ConsoleCommands' set() method: https://github.com/Beeblerox/HaxeFlixel/blob/texture_atlas/src/org/flixel/system/debug/ConsoleCommands.hx#L286
Now it can handle "nested" properties. For example:
set testSprite scrollFactor.x 0.5
or
set testSprite.scrollFactor y 0

[Beeblerox]

@Gama11 plus i've modified call() method, so now you can call methods from registered objects also:
call testSprite.kill

[Beeblerox]

@Gama11 and i also want to modify set() method again to make it work like this:
set testSprite.x 100

[Gama11]

@impaler Nice! :)

@Beeblerox Those are some pretty awesome changes! :) They make it a lot more convenient. Is there a limit to the level of nesting it can handle? If not, that would be great, you could do some crazy stuff like set FlxG.state.sprite.x 5. From just looking at the code, it seems like that's indeed the case as you're doing it with a loop, which seems like a pretty awesome and flexible approach.

I also like the idea of being able to pass commands like set testSprite.x 100 - it's more intuitive because it matches the synatx of code.

Tbh, I'm a bit confused about the texture_atlas branch. :D I've been told dev is the branch to do pull requests on, but now texture_atlas is ahead of dev (at least when it comes to the console). Are those two going to be merged at some point in the future?

[Beeblerox]

@Gama11 i've made that change with setting variables already on texture_atlas branch. and i believe it should work with very deep nesting (not just with 1-2 levels).
Sorry about this mess with branches. i'm not very comfortanble with git or any other version control system, so i work this way. Sorry again :( But i'll release next version soon (probably next week) and will merge all changes in flixelNME branch and delete other

[Gama11]

@Beeblerox No need to apologize! I really appreciate what you're doing, after all, haxeflixel wouldn't even exist without you. :) And I can't say I'm particularly comfortable with git either (and not any other version control, this is the only one I ever used so far). I've only recently started to understand how the whole pull-request stuff works, that you need to fork the original repo for that etc etc... It's rather counter-intuitive for beginners in my opinion.

By next version you mean 1.10 I assume? Looking forward to that. :)