search

HaxeFlixel / flixel

Free, cross-platform 2D game engine powered by Haxe and OpenFL
https://haxeflixel.com/
MIT License
1.99k stars 438 forks source link

Add console to debugging screen #323

Closed Gama11 closed 11 years ago

Gama11 commented 11 years ago

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:

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:

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

Beeblerox commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@Gama11 i've disabled debugger for html5

Gama11 commented 11 years ago

@Beeblerox Any particular reason for that?

Beeblerox commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

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

tiagolr commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

How do you currently get variables then?

Gama11 commented 11 years ago

@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 commented 11 years ago

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

Beeblerox commented 11 years ago

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

Gama11 commented 11 years ago

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

gamedevsam commented 11 years ago

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

Gama11 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

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

Beeblerox commented 11 years ago

@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 commented 11 years ago

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

Beeblerox commented 11 years ago

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

Gama11 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@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. :)