Phaser Debug Module

[xerver]

Many of you have heard about this, but I wanted to make a post announcing the module.

 

I have created a debug module to help diagnose different CPU related problems you may encounter in your game. The plugin is pretty simple right now but I hope it can grow to be feature-rich as needs evolve. Here is a screenshot of the performance panel:

 

 

 

You can find the module on GitHub: https://github.com/englercj/phaser-debug

 

If you have problems or questions please read the Contributing Guide and post issues on the tracker. Thanks all, happy debugging!

[lewster32]

This is excellent! Nice work!

[Orbital Game Studios]

Awesome! I will be utilizing this for sure! Very nice work. 

[stupot]

Great stuff and very interesting - this could be very useful, especially the SceneTree (which would be helped if it would display the key names).

 

For me it didn't show initially, I've got a complex page setup with the phaser app running in div buried many levels deep, although displayed fullscreen.

 

I had to edit it to make it add the 'pdebug' div to the element of my choice rather than the default document.body, maybe this flexibility could be added.

[oddskill]

Hey, very nice.

 

Looks like i got a new tool in my toolbox.

regards

[Sebi]

Indeed a pretty cool plugin. Maybe I should try out working with Phaser soon.

[xerver]

Great stuff and very interesting - this could be very useful, especially the SceneTree (which would be helped if it would display the key names).

 

For me it didn't show initially, I've got a complex page setup with the phaser app running in div buried many levels deep, although displayed fullscreen.

 

I had to edit it to make it add the 'pdebug' div to the element of my choice rather than the default document.body, maybe this flexibility could be added.

Post feature requests and issues on the github page, or I will never actually get around to working on it.

[hellspawn_bg]

Hi Xerver, 

 

Thanks for the excellent module.My game feels laggy and I have decided to go with your module to dig around what the problem might be. To my surprise it showed me that it constantly runs on 60 frames, although it lags and has those nasty hiccups. I am not really sure how to interpret the results that I get. More specifically, what is 2ms and 21 draws? Shouldn't be like the draws be equal to the frames per second? The bottom diagram is also a bit strange for me, how should I read it? Thanks once again.

 

[xerver]

2ms is the time it takes to execute one frame tick, it is the amount of time it takes game.tick() to run.

 

60fps is calculated based on the time it takes for the game to go from the start of one game.tick() to the start of the next game.tick().

 

21draws is the number of WebGL draw calls that are made each frame (each filter pass is a draw, each flush of a webgl batch is a draw, etc).

 

If you are seeing jumping and lagging it doesn't seem related to CPU, I would need to see a live running example to know better though. Have you tried profiling your memory? Sounds like you are getting hit by GC spikes which will "pause" all the running JS and act like you are descibing.

[pandavigoureux29]

Hi 

 

Thanks for this module, I'm using it a lot, especially for the draw calls.

 

Regarding these, I noticed that Object not displayed in the camera are still increasing the number of draw calls. Isn't that weird? I know this might be a Phaser issue, but did you also noticed that? I managed to decrease them by setting the alpha of "unseen" object to 0, but I wanted your advice on this ( as I have to constantly check if a sprite is in the camera or not == more CPU usage )

 

Also, I get (N/A) draws when playing in the browser from my tablet.

 

Cheers

[tiagokeller]

If someone is looking for a typescript definition for this plugin, here it is:

///<reference path="phaser.d.ts"/>declare module Phaser{  module Plugin{      var Debug:Phaser.Plugin;  }}

[Tom Atom]

@tiagokeller: thanks! It saved lot of time for me.

[ForgeableSum]

Thanks Tom for resurrecting this thread. Is this plugin still working and/or maintained? If so I could use it. 

[Tom Atom]

@feaudalwars: I downloaded it yesterday from xerver's GitHub link. Last build is 2 months old. I am using it with latest Phaser (2.3.0) and everything works so far.

[ForgeableSum]

This is still working. Make sure you give .pdebug a high z-index otherwise it won't appear (if your canvas is using CSS z-index) 

 

I can't see how this module is much us though as all it shows is very general info. It doesn't break performance down into something more granular, such as which functions are using resources. I think your typical JS profiler tells more than this.   

[Tom Atom]

You are right, but additional value for me is you can browse scene graph.