3D Game Programming

(C. Jardin) #1
<body></body>
<scriptsrc="http://gamingJS.com/Three.js"></script>
❶ <scriptsrc="http://gamingJS.com/physi.js"></script>
❷ <scriptsrc="http://gamingJS.com/Scoreboard.js"></script>
<scriptsrc="http://gamingJS.com/ChromeFixes.js"></script>

❶We’re going to use physics in this game. We use the Physijs library so we
don’t have to write all the physics code ourselves.

❷This library will help keep score in the game.


Then, at the top of the code from the 3D starter project template, just below the
<script> tag without an src= attribute, make these changes:

<script>
// Physics settings
❶ Physijs.scripts.ammo ='http://gamingJS.com/ammo.js';
❷ Physijs.scripts.worker ='http://gamingJS.com/physijs_worker.js';

// This is where stuff in our game will happen:
❸ varscene =newPhysijs.Scene({ fixedTimeStep: 2 / 60 });
❹ scene.setGravity(newTHREE.Vector3( 0, -100, 0 ));

// This is what sees the stuff:
varaspect_ratio = window.innerWidth / window.innerHeight;
varcamera =newTHREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
❺ camera.position.z = 200;
❻ camera.position.y = 100;
scene.add(camera);

// This will draw what the camera sees onto the screen:
❼ varrenderer =newTHREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ********

❶A Physijs setting enables Physijs to decide when things bump into each
other.

❷A worker sits on the side and perform all of the physics calculations.


❸Instead of a THREE.scene, we need to use a Physijs.scene.


❹Even with physics, we will not have gravity unless we add it to the scene.
In this case, we add gravity in the negative Y direction, which is down.

❺Move the camera a little closer to the action.


❻Move the camera up a little bit for a better view of the action.


A1.15Code: The Purple Fruit Monster Game


Prepared exclusively for Michael Powell report erratum • discuss

Free download pdf