Entity inspector

[aduros]

An irreplaceable tool for web development is the DOM inspector that comes in every browser these days. You can quickly see the page element hierarchy. You can mouse over elements and see them highlight on the page. You can change element properties and see the changes immediately. It's fantastic.

I want this same power for game development! It should be feasible to put together a tool that lets you step through the entity hierarchy of a running Flambe app (in debug mode). Through the magic of web technology, this can be a tool running in a second browser tab/window.

The big TODOs:

• Take a close look at other tools that do this. MonsterDebugger comes to mind.
• Put together a UI for hierarchy navigation. Maybe something like this? Something more traditional?
• Generate programmer-readable names for entities when shown in the inspector. Probably using the source location where it was instantiated: "FooScene.hx:666". Something similar for components.
• Hook up a UI for displaying and editing component properties. With special handling for boxed Values.
• Mousing over an entity in the inspector should highlight its sprite bounding box in the game.
• ctrl-clicking on the game should open the inspector to the sprite under the cursor.
• What happens when new entities are added/removed? For now, don't handle live updates. Put a button on there that takes a snapshot of the entity hierarchy. Updating component properties in the editor should still be sent back to the game, but maybe not the other way around, at least for now.

A non-trivial amount of work, but something like this could be insanely useful. I can't count the times I've settled to using debug print outs to resolve weird graphical bugs, or recompile-refresh to see what a sprite looks like a few pixels to the left until it looks just right.

[markknol]

This would be very useful!

• Maybe a silly idea, but for html target, it could be possible to recreate the hierarchy/displaylist of all displayobjects of flambe as transparent DIVs on top of the canvas with the same transformations. This allows inspecting with normal browser tooling (inspect element with outlines on right places).
  You could use the names as the div id, and could pass certain properties as data-attributes or something. If you want to take this further, you need some kind of magic trick to add/view entities properties and reflect back to the app. This could save creating own debug/inspection tools, but I have no idea how far this could be taken with browser tooling only. I can also imaging this could be very slow in some cases, but would be nice to try out?

Some other ideas which could be useful for the inspection/property editing

• I created this for the temple lib (flash) http://templelibrary.googlecode.com/svn/trunk/modules/liveinspector/readme.html
• This is kinda the same principle, but for javascript: Js dat.gui https://code.google.com/p/dat-gui/
• Ultimately, you could create some kind of console, which also would work for debugging on mobile. What I also did to easily view debug messages on mobile in multiple browser: overwrite console.log and write the messages to a div on top of my flambe app.

I have no idea if such reflection is doable in Haxe.

Does NME has solutions for such things, maybe can we borrow them?

[aduros]

On 06/03/2013 02:49 PM, Mark Knol wrote:

• Maybe a silly idea, but for html target, it could be possible to recreate the hierarchy/displaylist of all displayobjects of flambe as transparent DIVs on top of the canvas with the same transformations. This allows inspecting with normal browser tooling (inspect element with outlines on right places).

That's the one (and only) nice thing about DOM-based renderers. It wouldn't be worth it at this point though, and seems kinda hacky to force browser tooling by sticking things in data attributes. I think we can create something that works better than the DOM inspector for games, with less effort.

*

I created this for the temple lib (flash)
http://templelibrary.googlecode.com/svn/trunk/modules/liveinspector/readme.html

*

This is kinda the same principle, but for javascript: Js dat.gui
https://code.google.com/p/dat-gui/

Nice, I'll definitely be scoping the codez.

Ultimately, you could create some kind of console, which also would work for debugging on mobile. What I also did to easily view debug messages on mobile in multiple browser: overwrite console.log and write the messages to a div on top of my flambe app.

This seems like a different problem, but maybe something that could be put into this tool later. I always have the Chrome console open anyways, because I like seeing error stack traces and using the debugger/profiler.

I have no idea if such reflection is doable in Haxe.

It should be!

Does NME has solutions for such things, maybe can we borrow them?

Not that I know of.

[volkipp]

A tool like that would definitely be extremely helpful! For our flash games I've used CoolConsole and DConsole to help debug games. I haven't used flash-console but it looks interesting.

One of the most frustrating things is debugging mobile. It would be helpful if the console / inspector could be run as a server, and then have your game connect to the server on your desktop.

[aduros]

Yeah, maybe having it use a websocket server instead of postMessage is the way to go.

It would be convenient to combine this and Catapult into one wafl devserver command.