2WebGL Game: Road Race! Environment Car model, smoke Animation Sounds Interactive Computer GraphicsWebGL Game: Road Race!EnvironmentCar model, smokeAnimationSoundsCollision detectionKeyboard inputHUD, speedometerFrom WebGL: Up and Running by Tony Parisi (O’Reilly)
3Game Design First step in game design: “3CAD” Character Camera Control Interactive Computer GraphicsGame DesignFirst step in game design: “3CAD”CharacterCameraControlArt DirectionThis is from a veteran game designer. Essential to decide those things first.Define the worldDefine character’s identityCharacter’s point of viewHow he moves within the worldThen you can start designing play elements, materials, win conditions, mechanics, etc.
4This game Character is car. Third-person (over-the-shoulder) view Interactive Computer GraphicsThis gameCharacter is car.Third-person (over-the-shoulder) viewKeys to control character“Graybox prototype”: fully renderCharacterPoint of viewMotion controlsSee grayBox.jsIdea: understand the character you are building and how it moves.
5Graybox implementation Interactive Computer GraphicsGraybox implementationKeyboard controls: implement keyDown and keyUp handlersCameraOffset camera position from carlookAt the carGrayBox implementation for your 3D game
6Better Character Control Interactive Computer GraphicsBetter Character ControlMorph TargetsSee animated characters at TurboSquid
8Interactive Computer Graphics Keyframe AnimationRudimentary keyframe animation in Three.js: KeyFrameAnimation objectSet of morph targetsTime over which to morphDocumentation: “todo”Other Web documentation available
9Car Animation Need animations: colliding with guard rail, crash Interactive Computer GraphicsCar AnimationNeed animations: colliding with guard rail, crashThree.js has KeyFrame AnimatorSee car.js
11Movin’ down the road Texture animation Make the road shorter Interactive Computer GraphicsMovin’ down the roadTexture animationMake the road shorterMove the road (i.e. move the texture y coord faster)
12Interactive Computer Graphics Collision DetectionHow to tell when car hits guard rail or another car?More complex game: physics engineDefine velocity, physical properties of objectsCompute collisions every frameGraybox:If x coordinate gets too small or large, guard rail collisionFor each other car, test if our car is within a fixed distance [use Three.js’ Vector3.distanceTo()]
13Art Direction Second part of 3CAD: art direction Interactive Computer GraphicsArt DirectionSecond part of 3CAD: art directionLook: future or retro?Mood: whimsical or dark?Style: realistic or cartoonyTargeting male or female? Age demographic?Requirements may change as game is fleshed outArt direction study:You may think you can get away with procedurally generated trees, but later realize you want better, modeled ones.You may start out with default shaders, later decide you need to hire a programmer for a custom shader to get just the right look.
14Heads-up Display Compositing 2D and 3D is useful! Interactive Computer GraphicsHeads-up DisplayCompositing 2D and 3D is useful!Open source speedometer from https://github.com/vjt/canvas-speedometer
15Car Model From TurboSquid Came as zip file with several textures Interactive Computer GraphicsCar ModelFrom TurboSquidCame as zip file with several texturesSwap textures on the fly to make it look like there are more car models!Model viewer:JSONColladaYou may have to adjust model after loading (size, etc)
16Exhaust Particle system! 100 texture-mapped particles (smoke blobs) Interactive Computer GraphicsExhaustParticle system!100 texture-mapped particles (smoke blobs)Move with random velocityAnimate each particle, each frameSmoke texture:See exhaust.js
17Sound Find your sounds early: they can make the game Interactive Computer GraphicsSoundFind your sounds early: they can make the gameSound lab uses HTML5 <audio> tag
18Putting the game together Interactive Computer GraphicsPutting the game together