Historical errata for 3D Game Programming for Kids

You may want to double check where it says to use ‘Ctrl+Shift+J’ to open the javascript console. On my mac, I dont think I changed any keys, I use ‘Option + Command + j’ to toggle open and close on Chrome.

instead of clock = new THREE.Clock(); shouldn’t it be:
var clock = new THREE.Clock(); (at least for consistency?)

Command+Shift+J does not start the JavaScript Console on a Mac.
This does: Option+Command+J
The correct shortcut is given in the Chrome top menu bar, View-Developer-JavaScript Console. You could also just click the menu item.

Reference to makeTree changed.“Next, find where makeTree() is defined.” should be “makeTreeAt()”.

The first collisions/collisions.html extract shows the case statements for keyDown and keyUp for the arrow left key. This is a little confusing because these two case statements appear in two different functions. Maybe just the first case statement was meant to be shown.

Firstly, I assume that our avatar is ‘looking at us’.
Given that the right hand is placed to the left of the avatar as we look at it (right_hand.position.set(–150,0,0);)
When ‘up’ is pressed we are moving forward (marker.position.z decreases)
Then physically our avatar should have rotated 180 degrees

Thus I believe the turn function should reflect this.
\tif (is_moving_forward) direction = Math.PI;
\tif (is_moving_back) direction = 0;

I accept that for your example it does not matter, but the problem comes to light when some facial features are added to the avatar. The avatar will point in the correct direction when moving left or right but appear to walk backwards when moving up or down.

When following the code examples of adding a shadow I find that the shadow is displayed behind the doughnut (perpendicular to the ground). To replicate the image shown on page 121 I had to rotate the ground on the x axis:
ground.rotation.x = -Math.PI/2;

In the first reference to solar_system/above.html, the animate function, missing first line of function to request animation frame - requestAnimationFrame(animate);

Elapsed time in Chapter 13 is referenced as a variable called t. From page 135 in Chapter 14 the variable changes to the better expressed name - time.

Sorry I am being pedantic!
In the keydown listener function there the keydown code is logged to the console only if its not ‘E’ (only one else statement) rather than if ‘A’ else if ‘E’ else log(code). Maybe not worth logging at all.

I put the page number that is printed on the page in the PDF… It’s “page” 39, or per Preview, page 51 of 186. In either event, it’s right after adding the code to create the function, makeTreeAt(). Your text, describing what should happen after you enter this code, does not reflect what the code actually does… Your text states “If you entered all that code correctly, you will see the player object move off the screen and that there is a huge forest of four trees”. The code /does/ create the four trees. But, there is nothing to automatically move the player off of the page ex human involvement right? Or are you assuming that we are starting from some base implementation with automated (i.e. - non-keyboard driven) movement? Could just be my problem! :-)

This is a generic suggestion across most of the examples that I have been working through. Understanding that this is a book “for Kids”, you want to balance the amount of math that is required to do this…. :-)

Most of your code snippets use hard coded, absolute placement of objects rather than calculating dynamically the positions. For example, when you write your code to create a tree, you make a cylinder of size 50, a top of 150, and then place the top on at a y-offset of 175.

My suggestion would be to change the examples to use variables and then calculate the offsets required:

top.position.y = cylinderSize + topSize/2; // or some such

I’ve been converting my examples to their formulaic equivalents just so I can play with sizing of my designs as I go, as well as forcing myself to think through how to do this in a more genericized way….

Just a suggestion!

When I opened the console the first time there were tons of error messages, even when the code was correct. It takes a while to realize one is looking at a log history. It might make sense to mention this and/or to click the button to clear the log before typing in the “bad” code in the exercise.

Below the diagram explaining the x/y coordinate system the first line of code should read:
var right_hand = new ….
rather than
var right_hand_shape = new ….

The launchFruit() function at the bottom of page 147. I find the order of setting the LinearVelocity and rotation of the fruit, then adding it to the scene important.
The shown order - velocity, rotation and scene leads to unmoving squashed fruit. Rotation, then scene, then velocity works.
fruit.rotation.x = Math.PI/2;
scene.add(fruit);
fruit.setLinearVelocity(new THREE.Vector3(–100,0,0));

Constructing New Objects section, discussing creating objects,
“…function if itcreates new objects.” should read “…function when they create new objects”

In the key event listener you might mention what event.preventDefault() is good for.

In the example under “Understanding Simple Functions” you use double quotes e.g. logMessage(hello(“Mom”), log);
Any reason? Seems to work with single quotes you used previously equally well.

When removing the curly brace at the end of the hello function I am getting a different error message: the error marker is at the opening curly brace of the hello function and the message is “unmatched }”.

The listing following the statement “JavaScript can open browser alert dialogs” doesn’t open an alert box. Either I misunderstood what the author meant or the listing doesn’t seem appropriate.

It seems the code shown for the turn function is incomplete. Apart from setting the variable direction it is not apparent where the variable is used. In the following text (in 8.2) there is mention of setting rotation.y which is not shown in the code.

Coding with the ICE Code Editor tip. Although the ICE editor is available offline, I find the references to the third party scripts are not available (e.g. Three.js) - giving the error message Failed to load resource.

PlaneGeometry. The plane image shown on page 11 does not match the code example. The rotation needs to be something similar to ground.rotation.set(5,0,0); Additionally, the ground.rotation.set statement is missing from the final code block on the same page.

Continuity. Page 25 describes the right_hand variable. On page 26 the variable changes its name to r_hand (You may call this shorthand? :) )

When explaining the x-axis for the hands it makes reference to changing the position by reversing the sign. However in the following pages (#28-31) the sign switches between positive and negative.

A call to event.preventDefault() sneaks into the keydown addEventListener method for the first time without explanation (the statement is not included in the code block of the same method call on page 50).

Suggestion whilst explaining conditionals - Maybe a tip about equals (assignment) and double equals (equality test).

The bottom right hand tree never bears fruit. (Due to it being the first tree in the trees array). I find that the first line of the checkForTreasure function
if (!tree_with_treasure) return;
will prevent position 0 in the array from being checked. Maybe
if (tree_with_treasure==undefined) return;
would be better.

The turn function, forward/backward direction statements do not match table on page 85. ditto in the code in the turn function on pages 90/108/121.

When the timeout expires on the console, an uncaught type error occurs: Cannot call method ‘stop’ of undefined. The Game Over! message is not shown.

Pressing ? for the scoreboard does not bring up the help message. I assume that ‘?’ refers to ASCII value 63. In fact, when I add an
alert(event.keyCode);
statement to my keyDown function I cannot get an alert for just ‘?’. This is due me requiring two key presses to achieve a ‘?’ - the shift key (16) and then a separate key press for ‘/’ (191).

Extra parentheses when explaining the Math.sin() function “…the value of Math.sin()() sets a timeout…”. A similar problem on Page 194 when explaining Math.random() function “…number comes from Math.Random()()…” and on page 237 resetItems() “…the definition of resetItems()() should come after…”

Suggestion - Specify that the newly created animateFruit function should be called from the end of the scorePoints function i.e.

function scorePoints() {
scoreboard.addPoints(10);
Sounds.bubble.play();
animateFruit();
}

Adding html in the

section. An error marker appears in the left hand column of the

tag and the line of following tag. e.g. a red error box appears on lines 1 and 2. The error tool
tip reads
Expected an identifier and instead saw ‘<’.
Missing “;” before statement

These errors do not appear to prohibit any code running.

In The Code So Far section, The anitAlias property in the canvas renderer is new! i.e.
var renderer = new THREE.CanvasRenderer({antialias:true});

Maybe this suggestion is more an exercise for the reader but my avatar felt a little sluggish. I refactored the keyDown method, changing the literal ‘5’ references into a variable named speed. I settled on the value 25.

When explaining the PerspectiveCamera (distance and position), The field of view variable has also changed from 75 to 45.

The animate function shown on page 137 requires requestAnimationFrame(animate); statement.

“Congratulations! You have written your very first game in JavaScript.” Is this statement still true now Chapter 11 has been added? Maybe “..very first physics based game…” or even …platform game…

Adding Simple Graphics section, Point (3) - “No other changes are needed.” when explaining the addPlayer() and launchFruit(). Superfluous?

Challenge: Game Reset
Although technically it doesn’t matter (because the keyboard is not case sensitive) I offer this suggestion to try and avoid some confusion. When adding a keyboard handler for reset, I believe it would be more correct to say “…when the R key…” rather than “…when the r key…” as R=ASCII value 82 and r=ASCII value 114.

Challenge Game Reset. Comparing my attempted solution with yours in The Code So Far, I would not have got the player.__dirtyPosition statement at this stage in the book (The excellent explanation doesn’t come till the next chapter). (And to be pernickety :) - the second condition check on game_over boolean is unnecessary).

Maybe its just personal preference but I prefer the score mesh to be invisible (I find that the blue wire frame square looks odd when the table has been tilted). Thus I would recommend changing the score variable within the addGoal() function to

var score = new Physijs.ConvexMesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshNormalMaterial({visible:false})
);

First paragraph on page 221 “…So if we are slooking for the river function…” Hmmm… :)

Resetting the Game section. The code snippet shown below the statement “Below addRaft() lets add the following” goes on to show other functions rather than the startGame() function.

Getting started. After starting a 3D Starter Project (with Physics) and following the setting the camera instruction, the renderer needs to be changed from the default Canvas to WebGL.

In the final The Code So Far section, the pause=false statement is missing out of startGame() function. This prevents the raft from moving onRestart(). Also, (not as important but for consistency) the scoreboard.message(’’); appears in the startGame() function on Page 234, as scoreboard.clearMessage() on Page 237 but does not in the Code So Far section.

The Code So Far section has set the gravity to a more realistic –5, rather than the default –100. This slight change is not mentioned previously in the chapter.

When making reference to adding three lines for a time bonus “We do this by adding the last three lines shown below…”, the code that follows is a repeat of the checkForGameOver() function . The context of the subsequent paragraph challenges the reader to attempt the time bonus problem (i.e. “Can you do it?”)

At the end of chapter 13, What’s next, it states that “..we are not going to continue working on this project. Instead…” and Chapter 14 is phases of the moon and starts by making a copy :)

In the Phases of the Moon, The Code So Far section the intensity of the sun’s point light has been increased from 5 to 10.

Looks like a formatting instruction crept into the text here:
“To keep score in this game, we are going to need something new&emdash;a
scoreboard.”

The chapter speaks about keydown events and event listeners.
But we are doing this in the ice environment.

I’m not sure how to get the program to work since it seems the ice environment is capturing the keyboard events and not sharing.

Could you add a tip for this?

(Having fun writing programs with my 10yr old son)
Thanks,

The code of Tilt-a-Board does not work. I tried it locally and it is not working.
“Uncaught Error: SecurityError: DOM Exception 18 ” in chrome

SecurityError: The operation is insecure.
[Parar en este error] \t

this._worker = new Worker( Physijs.scripts.worker || ‘physijs_worker.js’ ); in firefox

Footnote 1 reads:
“Without parentheses, multiplication is done first, then division. Remember the “order of operations” from your math class!"

It should be:
“…multiplication is done first, then addition…”

Surely the correction of the footnote as published, is in fact incorrect? From my recollection of basic mathematics the order of operations is “Brackets, Of, Multiplication, Division, Addition, and Subtraction”. If the rules haven not changed, then your original footnote is correct and did not need correcting.

WebGL may not work properly with Chrome 36. Seeing errors like:

Error creating WebGL context.
Uncaught TypeError: Cannot read property ‘getExtension’ of null

May need to manually modify this version of Three.js to remove the experimental part of experimental-webgl (or check for both).

There is no indication in the text that curly braces need to be added around the conditional blocks when adding the is_moving_* booleans.

“Just like we did at the end of Chapter 1 . . . we start by changing the very last line of the code” but in chapter 1 the code was just placed before the last line.

“Back in Chapter 3 . . ., on page 25, we used a function to avoid having to repeat the same process for creating a tree”. Should be Chapter 4.

Reported from the forums (forums.pragprog.com/forums/284/topics/12871): Just replacing the 2 lines of the code for the OrthographicCamera is not sufficient. The renderer also needs to be modified to be WebGLRenderer. It wasn’t clear that the renderer needed to be replaced and explicitly stated as it was in chapter 18, Getting Started section.

The “PDF” page number above is actually a kindle sentence number. The section is “Listing Things” in chapter 7.

You may wish to mention the push method here since it is used later on in the book (Chapter 10 Collisions) without any explanation in chapter 10.

Also, for chapter 10, there is a lot of items introduced without much explanation. I am able to understand the material without much trouble, but I think a young or inexperienced programmer might easily get lost. One example is when the detectCollisions function creates a vector3 object without any explanation of what a vector is or why it is being created.

PDF Page is kindle reference. In Chapter 11, Fruit Hunt, Jumping for Points section, there is a sentence which reads, “Now we add the jump function that the case statement calls.”

There is no case statement in the code.

"So let’s add a second

Bottom third of the page:
“So gameStep() is processed every 16.67 milliseconds, which may seem very
frequent. In computers, though, that is not very frequent. The animation will
get updated at least sixteen times, and probably a lot more, during those
1000 milliseconds.”

Isn’t it rather: “… will get updated at least sixty times …”?

uncomment the addBall() call page 150
uncomment the call to addBall() page 151

I lost my whole project

When I try doing the Math.sin(clock.getElaspedTime()5) 50; it doesn’t move until I release the key and also the arms don’t move and the only way I can move them is replacing it with position = -position.

For some odd reason I have follow all the steps of Chapter 1. Project: Creating Simple Shapes (Page 3). But it won’t load the sphere!
If someone could tell me how to fix this or if I need something that would be greatly appreciated.
(P.S: I am using Google Chrome.)