42
electronic visualization laboratory, university of illinois a Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 - 2005 Electronic Visualization Laboratory

Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

Embed Size (px)

Citation preview

Page 1: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design & Development of“That Tank Game – in 3D!!!”

CS 426

Jason Leigh

© 2004 - 2005Electronic Visualization Laboratory

Page 2: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Main Steps

1. Brainstorm the gameplay using Storyboards.2. Choose Initial Gameplay Constraints / Rules.3. Prioritize Development.4. Design Finite State Machine and Data Structures.5. Build incremental prototype incorporating each feature in

your priority list.6. Use simple placeholder 3D objects while elaborate objects

and art work are being designed.7. Add sound effects when a simple working game is in place.

Ie you have a tank that can shoot an enemy.8. Play with each prototype and add new features to priority

list.9. Repeat step 2. Sometimes you will need to modify the

game rules to improve “fun-ness”/gameplay.

Page 3: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

1. Brainstorm the Gameplay Using Storyboards

• Brainstorm the GAMEPLAY!

• DO NOT start by brainstorming the opening cutscene of the game.

• Draw them by HAND. NOT BY COMPUTER.

• Do them FAST.

• Let the IDEAS flow.

• DO NOT JUDGE the Ideas

Page 4: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 5: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 6: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 7: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 8: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 9: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Page 10: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

2. Choose Initial Gameplay Constraints / Rules (these can change as you play-test the game)

• The World– Bounded by a high wall– You are dead with 1 hit of the bullet– All enemies are dead with 1 hit of the bullet including boss– When tanks/enemies/bosses collide with scenary, they glance off

• Bullets– Bullets bounce off all surfaces- all bullets hurt everything including yourself– Bullets travel a max distance before fading– Bullets increase transparency with distance– Bullets do not collide with each other- they simply pass thru

• Enemy– # enemies attacking you is dependent on the level#– Formula might be: maxEnemyCount = 1 + level# (ie a min of 2 enemies always)– Enemy gets smarter at each level by varying AI characteristics– Can drive and shoot only in the direction they are facing.– Can shoot multiple bullets.

• Boss– Appears after N enemies killed– Can move and drive in any direction– Boss gets smarter at each level– Boss explodes as a series of destructive bullets firing in all directions– # of bullets dependent on the level maybe... have to adjust this during play test

• Tank– Can shoot multiple bullets– Start with 5 lives– After killing boss you get 1 free life

Page 11: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

3. Prioritize DevelopmentDevelop main core of the game FIRST, then iterate to

improve.

• Create placeholder models• Create main game loop• Add tank navigation and collision detection with scenery• Add bullets and bullet dynamics (bounce off scenery)• Add enemies and initial AI• Do bullet/enemy/tank collision tests• Add initial sound effects• Add boss• Add evasion AI• Add intro/outtro screen and scoreboard• Add help screen• Improve all aspects of game

– Improve AI– Tweak gameplay constraints- e.g. number of lives, powerups etc.– Add improved models– Add improved sound effects– Add improved special effects

Page 12: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Tip: Define simple sets of autonomous rules and allow FSM to follow them.

Result: Creates emergent behavior as enemies respond to the rules of the

world, bullets, and tank.

4. Design Initial Finite State Machine

Page 13: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Initial Finite State Machine

Game FSMINTRO:

display intro screenif "START" key selected currentState=INITPLAYif "END" key selected EXIT GAME

INITPLAY:init game playcurrentState=PLAY

PLAY:call main game processing function

OUTTRO:clean up game statesdisplay outtro screen with scores, stats etc.if key pressed currentState=INTRO

Page 14: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Initial Finite State Machine

Tank FSMINIT:

reset position of tankcurrentState=PLAY

PLAY:Do navigation and wall collisionIf shoot then create bullet object

EXPLODE:Play explosion soundInit explosion sequencecurrentState=EXPLODE_SEQdecrease lives left

EXPLODE_SEQ:increment and show 1 timestep of explosion sequenceif at last timestep then {

cleanup graphics "debris"decrease lives leftif lives left = 0 then GameFSM.currentState=OUTTRO

otherwise currentState=INIT}

Page 15: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Initial Finite State Machine

Bullet FSMMOVE:

Move in direction of trajectoryIF touch wall then bounceIf travelled a max distance then currentState

= EXITIf touch entity (like tank/enemy) then

currentState = EXITcurrentState=EXIT

EXIT:delete bullet

Page 16: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Initial Finite State MachineEnemy FSM

INIT:Generate a random position for it in the world

PLAY:Do Enemy AI and collision detection on scenary and bullets

If detect bullet hit on self then currentState = EXPLODEEXPLODE:

Play explosion soundInit explosion sequencecurrentState=EXPLODE_SEQincrement player score

EXPLODE_SEQ:increment and show 1 timestep of explosion sequenceif at last timestep then {

cleanup graphics "debris"increase enemyCountif enemyCount reaches maxEnemyCount for the game level

and bossFlag==0 then spawn bossotherwise currentState=INIT; ie reuse the enemy object

}

Page 17: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Initial Finite State MachineBoss FSM

INIT:Initialize Boss position etc...bossFlag=1

PLAY:Do Boss AI and collision detection

EXPLODE:Play explosion soundInit explosion sequencecurrentState=EXPLODE_SEQSpawn a bunch of exploding bullets in all directions

EXPLODE_SEQ:increment and show 1 timestep of explosion sequenceif at last timestep then {

cleanup graphics "debris"increment level/wave counterincrease maxEnemyCount commensurate with levelset bossFlag to 0

}

Page 18: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Data Structures

• Create 1 data structure for each FSM• GameFSMDS, TankFSMDS, EnemyFSMDS, BossFSMDS,

BulletFSMDS• E.g.

– TankFSMDS• currentState• Model• explodeSequenceCounter

• Useful Tip for Blitz3D: you will likely need to declare global variables. If you do, do not declare them individually. Instead declare them as part of a user-defined TYPE in Blitz3D.

• Reason: BASIC does not require variable declarations before use so if you misspell variable names you will not know. By declaring it as part of a user-defined TYPE, Blitz3D will perform proper name checking since it has to associate the name with a type.

Page 19: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

5. Build incremental prototype incorporating each feature in your priority list

• Create Blitz3D timing loop and integrated stereo library calls

• Create stubs for FSMs and FSM Data Structures• Useful Tip for Blitz3D: Declare States as const in Blitz3D:

– Const c_INIT=0– Const c_PLAY=1– Const c_EXPLODE=2– Const c_EXPLODE_SEQ=3– Const c_MOVE=4– Const c_EXIT=5– Const c_INTRO=6– Const c_OUTTRO=7

• Useful Tip for Blitz3D: Variables are not case-sensitive. Ie. Foo is the same as fOo

Page 20: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

6. Use simple placeholder 3D objects while elaborate objects and art work are being designed.

(or just use Cubes and Spheres)

Page 21: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Design Prototype “Gameboard”The world is bounded by a high wall so you can’t drive

outside of it

Page 22: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Write code to do tank navigation and collision detection

Blitz3D API to Use: Collisions (lets you set collision response between entities)

Collision is set so that when tank collides with an object, it glances off its surface.

Chase Camera borrowed from Blitz3D forum.

Page 23: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Add Bullet movement and response of bullets when they collide with the scenery

Bullets bounce off the scenery.

Blitz3D API to use: CopyEntity, EntityCollided, CollisionNX, CollisionNY, CollisionNZ, AlignToVector

Bullets are just elongated spheres

Bullets also fade away as they travel more (ultimately this effect was abandoned because entities would blow up for seemingly no reason- because of near-transparent bullets)

Added fake shadow under tank to give it a sense of depth relative to the ground

Page 24: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Enemies and Initial AI

• Enemies turn to face you before firing.

• Enemies move and turn at the same time.

• When angle subtended between you and enemy is > 45 then move less but turn more.

• Else move more while turning.

• Enemies fire when angle is about 5 degrees

• Enemies fire when there is no obstructed view to you

• Enemies fire with a frequency inversely proportional to distance away (ie the closer they are the more they fire)

• Enemies do not dodge your bullets yet

Blitz3D API to use: DeltaYaw#, EntityDistance, EntityPickMode, EntityVisible

Page 25: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Add Collision Checks with Bullets

• Basically every object checks for collisions on its own and does the right thing by itself– If tank registers a bullet collision then tank

explodes– If bullet detects a tank or enemy collision then it

removes itself– If enemy registers a bullet collision then enemy

explodes

Page 26: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

7. Add sound effects when a simple working game is in place

• Bullet shots

• Explosion sounds

• Bullet bounces

• Blitz3D API: LoadSound, PlaySound

Page 27: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Animated Mesh

• Instead of static enemy models, added animated models- animated 3DS file.

• Used models from DarkMatter CD.• Blitz3D API: LoadAnimMesh• Blitz3D Tip: Collision checks don’t seem to

work with animated meshes since it can’t correctly find the first child object.

• Solution: Create a completely transparent cube and add the animated mesh as a child of the cube. Then collision checks are done to the cube.

Page 28: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added the Boss FSM and Data Structures

• Boss fires more than regular enemies.

• Problem: Because boss fires so often its bullets often bounce and kill itself

• Solution: Adjust “rules” so that Bosses bullets cannot hurt itself- because boss has special bullets.

• Each time boss is killed, one more enemy is spawned to increase game difficulty level.

Page 29: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Evasion AI

• For each bullet:– Check angle subtended by bullet and enemy– If angle is very small (5 degrees) then set

enemies evasion flag– Game level determines how far ahead the bullet

can look.

• Enemies evade by moving backwards and turning in some arbitrary direction.

Page 30: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Scoreboard

Lives Level

Kills

Mono Screen

Stereo Screen

Lives

Level

Kills

Page 31: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Intro Screen

Blitz3D API: HideEntity, ShowEntity

Page 32: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Intro screen is just a 3D model

Page 33: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Game Over / Outtro screen

Page 34: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Again, Outtro is just a 3D object

Page 35: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Instead of spheres as bullets, I tried using Sprites. Blue sprite for my bullets. Green sprite for enemy bullets.

Red sprite for boss bullets.

Blitz3D API: LoadSprite

Blitz3D Tip: Sprites are already billboarded by default. Sprites also use black as transparent by default.

Page 36: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Changed all sounds to 3D Spatialized Sound

• Blitz3D has the notion of a Listener which is YOU- the tank (use CreateListener).

• Then Load sounds with: Load3DSound rather than LoadSound

• Then use EmitSound on all objects that need to make a sound.

• Ie. Replace PlaySound with EmitSound calls.• Added looping hum to Boss (use LoopSound)• Added looping background music

Page 37: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added Explosion Sprite to Enemies(not Bosses or Tank)

• Explosion works by scaling it from large to small over time and simultaneously spinning it about the Z axis.

• When Bosses explode they rain bullets in all directions. The number of bullets determined by the game level.

• Tank explosion is done by rotating the tank about X axis and randomly about Y axis; and turning transparent

Page 38: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Why Should Bosses Have All the Fun?!Added Power Blast to Tank

You get 1 new Power Blast everytime you kill a Boss

Page 39: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Added the Help Screen

Help screen is added as a child to the Camera so that it will always face you wherever you might be looking.

Use ShowEntity and HideEntity to show and hide help screen

Page 40: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Enemy Intro Transition

• When enemies are first created by the game, they do not just POP into view.

• They grow from tiny to regular size.

• This gives a less jarring transition for introducing the enemies.

Page 41: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

Closing Remarks About CodingNotice that most of the functions have very similar properties

• Tank Functions:– CreateTank– TankProcess – call FSM for each tank (there is only

1)– TankFSM– TankNavigate– TankCheckCollisions

• Enemies Functions:– CreateEnemy– EnemiesProcess – call FSM once for each enemy– EnemyFSM– EraseAllEnemies– SpawnAllEnemies– EraseEnemy– EnemyNavigate– EnemyCheckCollisions

• Bullet Functions:– CreateBullet– BulletsProcess– BulletFSM– BulletCheckCollisions– EraseAllBullets– EraseBullet

• Boss Functions:– CreateBoss– BossProcess– BossFSM– EraseAllBosses– EraseBoss– BossNavigate– BossCheckCollisions

Page 42: Electronic visualization laboratory, university of illinois at chicago Design & Development of “That Tank Game – in 3D!!!” CS 426 Jason Leigh © 2004 -

electronic visualization laboratory, university of illinois at chicago

8. Play with each prototype and add new features to priority list- time permitting

• Tweak AI

• Add different Levels

• Maybe different enemy types? Add Shields?