Phaser Inspector Plugin

[netcell]

[uPDATE] The plugin can now display RenderTexture on WebGL

 

So last August I posted this [WIP] Phaser Inspector Plugin. Though I have yet to solve the problem I mentioned in the topic, I have managed to have time to create a release for the plugin, in an entirely new look. The new plugin provides a floating, resizable, minimize-able panel for inspecting Display Objects and States.

 

The plugin is available here and you can try out a demo here.

 

Working features:

• Display objects tree inspection.
• Display object class guessing.
• Display object name guessing (by looking for this./name/ in parents).
• Text as name for Phaser.Text.
• Display objects non-case-sensitive search by name and class.
• Display object destroy/kill/hide.
• Properties inspection and editing.
• Texture display for sprite/image
• Bounds drawing
• States list and state change
• Floating, resizable and draggable panel
• Panel remember position on page reload
• Close/minimize panel
• Play/Pause button

Upcoming features:

• Transparent/Clickthrough panel
• Sprite/Image load Texture
• Optimize when displaying too many display objects on the tree

 

Here are some "promo" images

 

[Skeptron]

Awesome plugin. Dead simple integration and super sweet interface!

[cjke]

That is amazing, simply amazing. 

 

This is the second awesome plugin I have seen come from you, are there any more on the horizon? 

[Skeptron]

Just noticed in console : 'webkitMovementX' is deprecated. Please use 'movementX' instead. 

 

Same thing for Y. Not major, just informing you!

[wayfinder]

The plugin seems to have trouble with renderTextures. It expects a baseTexture.source and they don't have those apparently.

[netcell]

I am glad that you guys like it

 

That is amazing, simply amazing. 

 

This is the second awesome plugin I have seen come from you, are there any more on the horizon? 

 

Yes there are more to come, but it will take time, since they are currently all project integrated.

 

Just noticed in console : 'webkitMovementX' is deprecated. Please use 'movementX' instead. 

 

Same thing for Y. Not major, just informing you!

 

Must be from the snippet of intergrate.js (a library I used to make resizable panel). The snippet has both 'webkitMovementX and movementX so I guess we shouldn't have to worry, for now.

 

The plugin seems to have trouble with renderTextures. It expects a baseTexture.source and they don't have those apparently.

 

Right, I didn't test that one. the source of baseTexture of renderTexture is actually a canvas tag. I am currently expecting it to be an img tag, which has src property. I'll update today to display source.toDataURL() if the method is available

[wayfinder]

In WebGL, I don't think renderTexture.source is even there...

 

Also, for some reason the custom font doesn't work here (Win 7 Chrome)

[netcell]

In WebGL, I don't think renderTexture.source is even there...

 

Also, for some reason the custom font doesn't work here (Win 7 Chrome)

 

I have never used WebGL before so... can you provide me with a live example? I'll try to work the problem In the mean time, I've just push an update for renderTexture on Canvas and a line to prevent error on WebGL. Also, I added a play/pause button on the panel

Custom font? you mean the icons for the text font? I am currently using font-awesome for the icons and included their css & font files inside the bundle.

[wayfinder]

the text-font!

 

if you want to test with webgl, you can just take your canvas example and change the phaser game invocation to say Phaser.WEBGL instead of Phaser.CANVAS or Phaser.AUTO

[netcell]

GOT IT, The plugin can now display RenderTexture on WebGL

 

I didn't realize RenderTexture has a toBase64 method haha.

 

 

Yeah, right, I forgot to include the font I took some styles from GameClosure and didn't thought about that. The font seems to be not free. I'll use another font and embed it into the plugin.

[netcell]

Guess what is coming to Phaser Inspector Plugin? Watch the video 

[netcell]

[Deleted, some how my post got doubled]

[Skeptron]

Awesome! And I just had a suggestion : could you include in the plugin the coordinates of the cursor in real time? I mean, I was trying to place objects in my scene and I would have to make "guesses" until they were at the right place. It could have helped just to put my cursor at target destination, read the coordinates from plugin, and then set them as my object's coordinates.

 

I could have coded that stuff myself (adding cursor coordinates to the scene) but it could be a nice addition to your plugin.

[wayfinder]

Skeptron: that's a feature in Phaser.Debug, check the docs

[netcell]

Awesome! And I just had a suggestion : could you include in the plugin the coordinates of the cursor in real time? I mean, I was trying to place objects in my scene and I would have to make "guesses" until they were at the right place. It could have helped just to put my cursor at target destination, read the coordinates from plugin, and then set them as my object's coordinates.

 

I could have coded that stuff myself (adding cursor coordinates to the scene) but it could be a nice addition to your plugin.

 

How about I add a drag and drop toggle for display object

 

- Select an object

- Turn the drag and drop on which

   + enable input

   + enable drag

   + set inputPriorityID very high

- Drag and drop at your desire location

- Read the location from the detail panel

- Turn off the drag and drop

 

Sound good?

[Skeptron]

Hmmm it's really better for the situation I described, but there might be a lot of other situations where it wouldn't be of any use to drag / drop but just having the coordinates would help. 

 

But yeah sounds cool!

[netcell]

Okay, tooltip then

[netcell]

Done with the custom plugin system for Phaser Inspector Detail Panel Updating soon. With this, you can write custom inspecting sections on detail panel to help inspecting specific features of your games. Others might also develop independent plugins for the Phaser Inspector Plugin to share with the community

 

Yeah, it is a plugin-ception.

 

Notice: While writing a plugin to live displaying and editing a number/text value is relatively simple, with some prewritten classes that you only need to extend and configure, writing complicated things like the frame renderer like the one at the end of the detail pane when selecting a sprite/image would require you to know Angular.js to write the html template .

 

Here is a gist for an example of a complicated custom Phaser Inspector Detail Panel Plugin (the frame renderer) https://gist.github.com/netcell/6a2dd5def022600e47b0

[codevinsky]

So, one -huge- problem I've encountered thus far:

 

I've got an angular application wrapping my game layer. As such, phaser-inspector -dies- immediately and doesn't start up.

[netcell]

I see, I would reconfigure the code to not load angular instead of silently skip loading. Also, I think I need to change the module name to prevent conflict

[drhayes]

Maybe the inspector should be wrapped in an IIFE so it hides its version of angular?

[netcell]

It infact is, but I may have put the variable to global my bad.

[stupot]

Just tried this to see if it would be useful for me - looks like it probably would.  The example works but when I try and embed it into my app it doesn't.  My app itself sits in another 3rd party container which looks like it is affecting the listeners and causing problems.

 

After a quick poke at it, It looks like the inspector-plugin it isn't recieving mouse down events, eg I can move over the drag bar and the cursor changes but nothing happens when I click.  Is there anyway I can quickly confirm this as being the problem, or is there a way to re-instate the required listeners?

 

ta

[netcell]

Hi everyone, long time no see, I was drowned in work. I have recently pushed to the dev branch some new commits, fixed certain bugs, improved some usabilities, introducing plugins (or add-ons?) and wrapping angularjs to prevent conflicts.

I would be writing about details in this update soon

 

 

Maybe the inspector should be wrapped in an IIFE so it hides its version of angular?

 

Hi, it is now fixed in the dev branch, you should try it out

 

 

Just tried this to see if it would be useful for me - looks like it probably would.  The example works but when I try and embed it into my app it doesn't.  My app itself sits in another 3rd party container which looks like it is affecting the listeners and causing problems.

 

After a quick poke at it, It looks like the inspector-plugin it isn't recieving mouse down events, eg I can move over the drag bar and the cursor changes but nothing happens when I click.  Is there anyway I can quickly confirm this as being the problem, or is there a way to re-instate the required listeners?

 

ta

 

Do you have a link to your game? I can try to see what went wrong.

[stupot]

Do you have a link to your game? I can try to see what went wrong.

 

Hi,  I'm afraid the framework that my Phaser app sits in isn't mine or publicly accessible, which is why it isn't straight forward for me to debug either. The Inspector runs fine when used in a standard Phaser app, just not when I embed it in the 3rd party container.

 

I'll try the current dev version later, maybe the clash has gone.