And, being human, we will make mistakes while coding, which leads to program errors, or 'bugs' as we programmers like to call them. Therefore to get rid of all the bugs/mistakes, or 'debug', it helps to have game variables' numbers (position, speed, etc.) and flag variables' states (true, false, on, off, etc.) displayed quickly to our screen while the game is running so we can better spot the problem. Chances are that if we see weird or unexpected raw data being output to the screen, then that is the source of the bug. We can then quickly locate it inside the code and fix it.
In the last post we learned how to add simple instruction text to the top of the browser window to help first-time players know what to do. Now we will add some 'debug' info text to the top left-hand corner of the browser window. We will also update the text inside the animate( ) loop so that the numbers on-screen will quickly change as fast as the game updates. This will indicate what's going on with all the game objects that we want to inspect more closely.
Just for reference, here's how we added the help info text last time:
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;"> Press W, A, S, and D keys to move the cube </div>
And here's our new code to add the debug text:
<div id="debug1" style="position:fixed; left:5%; top:4%; color:grey;"> Debug Info </div>
Can you spot the small differences? First, the 'id' is now named "debug1" instead of "help", which is representative of what this HTML code does. The style properties are the same except for 'left: 5%;' , which places this text only 5% from the left edge of the browser window. Finally, the 'Debug Info' text on the next line is what the user will actually see displayed in the browser window. However, we will update this so quickly that you probably won't have time to see the words 'Debug Info' - instead it will be replaced by whatever numbers and data that we want to quickly print to the screen. I just put the words 'Debug Info' in there for code readability.
Let's add a second line of debug text. This will be almost identical to the code above:
<div id="debug2" style="position:fixed; left:5%; top:8%; color:grey;"> Debug Info </div>
Notice that I changed the id name to "debug2" to help keep it separate from the "debug1" id. Finally, in the style properties, all that is changed is the vertical positioning of the text by typing 'top:8%;'. This text is now placed 8% from the top, which is a little farther down than 4%. If we didn't change this, the "debug2" text would be displayed right on top of the "debug1" text, making it impossible to read.
Here is the updated example01.html file with our new "debug1" and "debug2" text 'div' elements:
<!DOCTYPE html>
<html>
<head>
<title> Hello Three.js </title>
</head>
<body>
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
Press W, A, S, and D keys to move the cube
</div>
<div id="debug1" style="position:fixed; left:5%; top:4%; color:grey;">
Debug Info
</div>
<div id="debug2" style="position:fixed; left:5%; top:8%; color:grey;">
Debug Info
</div>
<script src="js/three.min.js"></script>
<script src="js/threex.keyboardstate.js"></script>
<script src="js/tempGame.js"></script>
</body>
</html>
Copy and paste the above code and save it as 'example01.html', writing over the old one. In part 2 of this post, we will add a few lines of code inside our 'tempGame.js' file to quickly update the debug1 and debug2 texts in real-time. Then we will see data quickly flowing to the screen!
(Continued in part 2)...
(Continued in part 2)...
