In a perfect world, each and every single line of your code works well and the results are exactly as you expected.
In the real world, the sad reality is we spend a lot of time debugging, prompting stuff on the console and losing the focus on what we actually love to do: building games.
This is why I am showing you FluxHunter‘s PGInspector.
It’s a tool which will inspect all your Game Objects and retrieve the series of useful information you usually find yourself to output with an inifinite series of console.log
.
Have a look at this version of “A Life of Logic“:
As you can see, you can have a lot of information about any sprite or text by simply moving the mouse over it.
Then , if you want to automatically display its properties on the console, you just have to press SHIFT + C or click on GUI_CONSOLE tab.
Probably you may want to launch the game in a new page, open the console and play with all the commans you can find in the official project page.
Installing PGInspector is very easy: first, include the JavaScript file in index.html
:
<!DOCTYPE html> <html> <head> <style type = "text/css"> body{ background: #000000; padding: 0px; margin: 0px; } </style> <script src = "PGInspector.min.js"></script> <script src = "phaser.min.js"></script> <script src = "game.js"></script> </head> <body> <div id = "thegame"></div> </body> </html>
Then, at the end of your create
method, just add:
PhaserGUIAction(this);
And you’re done. Your productivity will speed up a lot, guaranteed. Download the source code with PGInspector library.