3D Game Programming

The first two numbers are the amount of red we want to use, the second two

numbers are the amount of green, and the last two are the amount of blue.

For the cave, we’re using equal amounts of red and green ( 99 ), but we’ll add

a little more blue by setting it to aa.

The last thing we do above the START CODING line is switch to the orthographic

camera we used back in A Quick Peek at a Weirdly Named Camera, on page

89. This is more of a two-dimensional game, so the orthographic camera will

work better for our purposes.

WebGL Only

Make the following changes only if your computer supports WebGL

as described in Section 12.3, Realism: Shininess, on page 111. Even

if your computer does support WebGL, it’s OK to skip these settings

to make it easier to share this game with others.

Comment out the perspective camera and uncomment the three lines for the

orthographic camera:

//var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);

varcamera =newTHREE.OrthographicCamera(

-width/2, width/2, height/2, -height/2, 1, 10000

);

And, since the orthographic camera only works in WebGL, we need to switch

the renderer:

// This will draw what the camera sees onto the screen:

varrenderer =newTHREE.WebGLRenderer();

With that, we’re ready to start coding.

18.2 Setting the Game’s Boundaries

All of the action in this game will take place on the screen. So we need

something to keep the avatar in the screen. We need boundaries—four of

them. Since we need to add four of the same things, we’ll do so with a make-

Border() function. This function will use x and y positions to decide where to

place the border. It will also define a width and height to build the correct

shape. Let’s add the following code to our project below the START CODING line:

functionmakeBorder(x, y, w, h) {

varborder =newPhysijs.BoxMesh(

newTHREE.CubeGeometry(w, h, 100),

Physijs.createMaterial(

newTHREE.MeshBasicMaterial({color: 0x000000}), 0.2, 1.0

),

report erratum • discuss

Setting the Game’s Boundaries • 167

Prepared exclusively for Michael Powell