Talking about Game development, HTML5, Javascript and Phaser.
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.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.