[Phaser 3] Migration from CE - Phaser.Utils.Debug?

I am starting my migration from Phaser CE to Phaser 3 and I am wondering if there is an equivalent class in v3 to the Phaser.Utils.Debug class (or maybe a plugin that does something similar)? I know a good deal of what it did could be done manually without much fuss, but it was handy to have a common API for debugging output like this that I could point students to or count on without needing to reinvent the wheel every time.

Cheers!
Seth

I don’t believe there is one included by default in Phaser 3.

There are certain things that can draw some debug information, like Arcade physics, Impact physics, and Tilemaps, but nothing to the extent of the Debug class from Phaser CE.

I was struggling with that too. As snowbillr said, there is no Debug class in Phaser 3, but some systems do have a debug option. What I’m doing is creating a Phaser.GameObject.Graphics layer in my scene and drawing all my custom debug info there (texts, geoms, etc). I’m updating them inside the update function, but maybe there’s a better way.

I always thought a solid way to handle showing debug info on the screen would be to have a different Debug scene that draws out all that data. Not sure if it would work that well, but that’s always where my mind went.

I figured this was the case. Thanks for the ideas and input! I’m intrigued by the task of making a plugin that would do this and trying to port over at least some of what was in the old class in Phaser CE. Will post here if I end up doing that and have anything useful to share.

3 Likes

Hello,

First, thank you for sharing your work.

I tried to implement your plugin but I can’t find the correct way to implement your plugin with my template.
You’ll see I disabled the lines : 28 & 29.
If you enabled it, it will have an error loop in the console.

Could you please have a look ?

Thanks in advance,

Anthony

Yes, thanks Samme! I had found that plugin (and a bunch of the other ones you have out there, thank you for all those). I was able to make it work in my own tests and ultimately was looking to expand on it to have it behave a bit more like the old Utils.Debug.

It looks like the problem triggers at line 111 in src/index.js of the plugin. The custom hit circle has a constructor name of ‘initialize’ rather than ‘circle’ and when it goes to lookup the stored shape in _shapes it gets undefined and that undefined causes it to choke later.

I could see a few ways to guard against things like this (aka, hit areas that for some reason return weird constructor names and would trigger an exception in the plugin) but I do not see what is causing it. It should be returning ‘Circle’ as it’s constructor name and that’s the more fundamental issue here I think. Is it maybe because of the minified version of Phaser in use? Has the constructor name been mangled or something?

Just some observations to help!
Seth B.

2 Likes

A ha! It is the minified version that seems to muck it up! Just go to settings -> Javascript in your pen and switch to non-minified Phaser and then it works fine.

Seth B.

2 Likes

I fixed that error in v1.0.2. But if you use the minified Phaser the hit area shapes may be incorrect (all rectangles), so I would advise using the nonminified version for development. :slight_smile:

1 Like

Thank You VERY MUCH Seth for your help !!!
OK, I will use the non minified version.

1 Like

Thank You VERY MUCH Samme for your help !!!
My template and your plugin work well now.
I did not know this tip : I will use the non minified version for DEV.