netcell

Phaser Inspector Plugin

Recommended Posts

[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 :D

 

21076450010_efa799bf08_o.png21076450170_23796d65a4_o.png

Share this post


Link to post
Share on other sites

I am glad that you guys like it :D

 

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

Share this post


Link to post
Share on other sites

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...:D 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.