netcell Posted September 9, 2015 Share Posted September 9, 2015 [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/imageBounds drawingStates list and state changeFloating, resizable and draggable panelPanel remember position on page reloadClose/minimize panelPlay/Pause buttonUpcoming features:Transparent/Clickthrough panelSprite/Image load TextureOptimize when displaying too many display objects on the tree Here are some "promo" images abshinri, danielbeck, qdrj and 5 others 8 Link to comment Share on other sites More sharing options...
Skeptron Posted September 9, 2015 Share Posted September 9, 2015 Awesome plugin. Dead simple integration and super sweet interface! jdnichollsc and netcell 2 Link to comment Share on other sites More sharing options...
cjke Posted September 9, 2015 Share Posted September 9, 2015 That is amazing, simply amazing. This is the second awesome plugin I have seen come from you, are there any more on the horizon? jdnichollsc and netcell 2 Link to comment Share on other sites More sharing options...
Skeptron Posted September 9, 2015 Share Posted September 9, 2015 Just noticed in console : 'webkitMovementX' is deprecated. Please use 'movementX' instead. Same thing for Y. Not major, just informing you! netcell 1 Link to comment Share on other sites More sharing options...
wayfinder Posted September 9, 2015 Share Posted September 9, 2015 The plugin seems to have trouble with renderTextures. It expects a baseTexture.source and they don't have those apparently. netcell 1 Link to comment Share on other sites More sharing options...
netcell Posted September 10, 2015 Author Share Posted September 10, 2015 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 Link to comment Share on other sites More sharing options...
wayfinder Posted September 10, 2015 Share Posted September 10, 2015 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) Link to comment Share on other sites More sharing options...
netcell Posted September 10, 2015 Author Share Posted September 10, 2015 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. Link to comment Share on other sites More sharing options...
wayfinder Posted September 10, 2015 Share Posted September 10, 2015 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 Link to comment Share on other sites More sharing options...
netcell Posted September 11, 2015 Author Share Posted September 11, 2015 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. Link to comment Share on other sites More sharing options...
netcell Posted September 14, 2015 Author Share Posted September 14, 2015 Guess what is coming to Phaser Inspector Plugin? Watch the video Link to comment Share on other sites More sharing options...
netcell Posted September 14, 2015 Author Share Posted September 14, 2015 [Deleted, some how my post got doubled] Link to comment Share on other sites More sharing options...
Skeptron Posted September 14, 2015 Share Posted September 14, 2015 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. Link to comment Share on other sites More sharing options...
wayfinder Posted September 14, 2015 Share Posted September 14, 2015 Skeptron: that's a feature in Phaser.Debug, check the docs Link to comment Share on other sites More sharing options...
netcell Posted September 14, 2015 Author Share Posted September 14, 2015 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? Link to comment Share on other sites More sharing options...
Skeptron Posted September 14, 2015 Share Posted September 14, 2015 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! Link to comment Share on other sites More sharing options...
netcell Posted September 14, 2015 Author Share Posted September 14, 2015 Okay, tooltip then Link to comment Share on other sites More sharing options...
netcell Posted September 15, 2015 Author Share Posted September 15, 2015 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 Link to comment Share on other sites More sharing options...
codevinsky Posted September 16, 2015 Share Posted September 16, 2015 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. Link to comment Share on other sites More sharing options...
netcell Posted September 16, 2015 Author Share Posted September 16, 2015 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 Link to comment Share on other sites More sharing options...
drhayes Posted September 16, 2015 Share Posted September 16, 2015 Maybe the inspector should be wrapped in an IIFE so it hides its version of angular? Link to comment Share on other sites More sharing options...
netcell Posted September 16, 2015 Author Share Posted September 16, 2015 It infact is, but I may have put the variable to global my bad. Link to comment Share on other sites More sharing options...
stupot Posted September 17, 2015 Share Posted September 17, 2015 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 Link to comment Share on other sites More sharing options...
netcell Posted October 6, 2015 Author Share Posted October 6, 2015 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. Link to comment Share on other sites More sharing options...
stupot Posted October 6, 2015 Share Posted October 6, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts