0

I am converting an existing code base from using Flash to using CreateJS but I am in need of a way to stop the Stage update and inspect the EaselJS GUI elements for debugging.

My list of requirements for the debugger is

  • It must be possible to stop the propagation of CreateJS ticks to the non-debug parts of the GUI so that these parts do not change during inspection.
  • In inspection mode, it must be possible to see the hierarchy tree of the non-debug parts of the GUI.
  • In inspection mode, when an element in the hierarchy tree is selected, then the corresponding visible canvas graphics must change appearance to clearly distinguish it from the other graphics on the canvas, and so that its boundaries are clearly visible.
  • In inspection mode, when a point is selected on the canvas, then the corresponding element must be visible and highlighted in the hierarchy tree.
  • In inspection mode, when a point is selected on the canvas, then the following properties must be displayed for the corresponding element: coordinates & size.

To achieve the above, I need to implement at least these parts.

  • Stage traversal and data extraction.
  • Tree presentation of the data extracted.
  • Highlight of specific stage objects.
  • Control of the Stage ticking.

Are there libraries that can help me create such an inspector tool?

Community
  • 1
  • 1
jpsecher
  • 4,461
  • 2
  • 33
  • 42
  • What you expect such library to do except "helping" you? – stroncium Aug 07 '14 at 11:51
  • I found [a description about how to use multiple canvases](http://www.mikechambers.com/blog/2011/01/25/layering-multiple-canvas-elements-using-javascript-and-easeljs/) which seems to be a possible route to follow. – jpsecher Aug 07 '14 at 12:52
  • I have started a [project on Bitbucket](https://bitbucket.org/jpsecher/easeljs-inspector) that so far implements a slider to speed down the FPS. – jpsecher Aug 29 '14 at 12:58

1 Answers1

0

The EaselJS-Inspector is an example of how to solve everything above, except that I use a fixed size for all DisplayObjects.

The problem is that Shapes do not have a size unless one manually sets it.

jpsecher
  • 4,461
  • 2
  • 33
  • 42