Video Game Programming Level One – Side Scroller

1. Video Game ProgrammingLevel One – Side Scroller INSTRUCTOR Instructor Here TEACHER’S ASSISTANT TA Here

2. PART 1 – SideScroller Basics Objective: Set up the SideScroller game, create the first level with map for the level. • Step 1 – Set up the project • Step 2 – Game Properties • Step 3 – Level 1 and the Master Map • Step 4 – Save and Test

3. STEP 1: Set up the Project • Create a New project. • Save the project and enter SideScroller.fun for the name of the new project.

4. STEP 2: Set Up the Game Properties • Right-click on Game and select Properties. • Select 640x480 in the Resolution menu. • Select True Color (32 bit) from the Color Bit-Mode. • Set the Compiler to the compiler currently installed on the computer. • In the Window Title text box enter Side Scroller (your name). • Click OK.

5. CONCEPT - MASTER MAP • In Fun, a Master Map is the main map of the level. • The world size cannot be bigger than the Master Map, and it doesn't wrap at edges. • Master Maps do not move.

6. STEP 3: Level_1 and the Master Map • Set up Level_1 • Add a Map to Level_1 • Use Main_Map for the name. • Browse for the file name Art Assets\Maps\mainMap.bmp and set it. • Set this map to be the Master Map.

7. STEP 4: Save and Test • Save the Project: • Click on Project and Save. • Run the Project: • Click on the Build/Run button in the menu bar. • Results: • The level should display with the Master Map for the background.

8. PART 2 – The Player Objective: Put the Player into the game and create some behaviors to deal with sprite movement and set up the viewport to with the player. • Step 1 – The Player Ship Actor • Step 2 – 8-Directional Movement • Step 3 – Set up the Player Sprite • Step 4 – Viewport Movement • Step 5 – Wrapping Maps • Step 6 – Save and Test

9. Step 1: The Player Ship Actor • Add a new Actor and name it PLAYER • Add the first Animation Set • Use DEFAULT for the name. • For the animation frame use Assets\Actors\fighter1.bmp • Set the collision Data (ok to use the auto button)

10. CONCEPT: 8-DIRECTIONAL MOVEMENT • 8-Directional Movement uses the x and y components separately. • Each component can be negative, zero, or positive. • The direction given in red would be obtained by using (1, -1) for the direction.

11. STEP 2: 8-Directional MovementPlayerMoveFN Use: This Object Function will be used to take input from the arrow keys and move the Player Ship sprite based on the input. Create the Function: • Create an Object function called PlayerMoveFN • Enter the following code for the function body.

12. PlayerMoveFN Code int x = 0; int y = 0; if ( pKeyboard->IsPressed(DIK_UP) ) y -= 1; if ( pKeyboard->IsPressed(DIK_DOWN) ) y+= 1; if ( pKeyboard->IsPressed(DIK_LEFT) ) x -= 1; if ( pKeyboard->IsPressed(DIK_RIGHT) ) x += 1; This->VectorDirection(x,y);

13. CONCEPT – Main Character • In Fun the Main Character is a special character that cannot leave the viewport. • There can only be one Main Character in a level.

14. CONCEPT – GHOST COLLISION • Ghost collision allows collisions to occur without an automatic response such as reflection. • This is useful when objects should collide but not stop/bounce.

15. STEP 3: Set up the Player Sprite • Add a sprite to Level_1 and name it Player_Ship. • Use PLAYER for the actor. • Set the sprite’s behavior to use PlayerMoveFN. • Set this sprite to be the Main Character. • This sprite should collide with other sprites and with the map and ghost collision should be set.

16. CONCEPT – Viewport Movement • The viewport or the window into our game world can be moved around a map which could be much larger than the viewport. • The Main Character attribute on a sprite can be used to make the viewport move with the sprite. • The Main Character must be in the viewport bounding box at the start or an error will occur. Also it cannot leave the viewport bounds

17. CONCEPT – VIEWPORT MOVEMENT (cont.) • Viewport Bounds act like a cage that the main character can push around. • Inflation stretches these at the edges.

18. STEP 4: Viewport movement • Set the Player_Ship sprite as the Main Character (If not already set). • Set the viewport bounding box bounds and inflation in the level properties.

19. CONCEPT – WRAPPING MAPS • Wrapping maps “wrap” around when the edges is reached. • Can be scrolled constantly or relative to the viewport.

20. STEP 5: Wrapping Maps • Add a map named Wrapping_Map • Make it scroll constantly left AND relative to the ship's movement. (HINT: This can be set up using the maps scrolling options) • NOTE: The main map’s Transparency should be adjusted to allow the wrapping map to be seen.

21. STEP 6: Save and Test • Save the Project: • Click on Project and Save. • Run the Project: • Click on the Build/Run button in the menu bar. • Results: • The level should display and the Player Ship should move around by pressing the arrow keys

22. PART 3 – Aliens!! Objective: Add an alien probe to the game that will bounce around the map, but pass through the Player’s ship. • Step 1 – Alien Probe Actor • Step 2 – Alien Behaviors • Step 3 – Create the Alien Sprite • Step 4 – Save and Test

23. STEP 1: Alien Probe Actor • Add a new Actor and name it ALIEN_PROBE. • Add the first Animation Set • Use DEFAULT for the name. • For the animation frame use Assets\Actors\alienProbe.bmp • Set the collision Data (ok to use the auto button)

24. CONCEPT – PEG REGISTERING • Peg registering allows you to align animations of different sizes • Necessary to make explosions grow from the center instead of the upper left

25. STEP 1: Alien Probe ActorCONTINUED • Add the second Animation Set • Use EXPLODE for the name. • For the animation frames use Assets\Actors\Explosion01.bmp, …\Explosion02.bmp and …\Explosion03.bmp. • This Animation Set should be Peg Registered.

26. STEP 2: Alien Behavior Alien_Damage_FN Use: This function will detect when something collides with the Alien Probe sprite and in that case will play the explosion animation for the alien. Create the Function: • Create an Object function called Alien_Damage_FN. • Enter the following code for the function body.

27. Alien_Damage_FN Sprite* player = This->CollisionWithSpritePtr( "Player_Ship" ); if ( player ) { This->Speed(0); This->Animation(ALIEN_PROBE_EXPLODE); } if ( This->EndOfAnimation(ALIEN_PROBE_EXPLODE) ) { This->DeleteFlag(true); }

28. STEP 3: Create the Alien Sprite • Create a sprite named Alien_Probe. • Use the ALIEN_PROBE actor. • Alien_Damage_FN should be used for this sprites behavior. • Set probe to bounce around the map (HINT: Precise Collision and Reflection can be used). • Be sure to use a different Display List than the player’s.

29. STEP 4: Save and Test • Save the Project: • Click on Project and Save. • Run the Project: • Click on the Build/Run button in the menu bar. • Results: • Now there should be an Alien Probe bouncing around the map and it should explode when the player ship hits it.

30. PART 4: Dynamically Creating the Bullets Objective: • Dynamically create sprites, use a spawning system and movement patterns for the sprites. • Step 1 – The Bullet Actor • Step 2 – Dynamic Sprite Creation • Step 3 – Firing the Bullets • Step 4 – Create the Master Bullet • Step 5 – Add the Sound • Step 6 – Save and Test

31. Step 1: The Bullet Actor • Add a new Actor and name it BULLET • Add the first Animation Set • Use DEFAULT for the name. • For the animation frame use Art Assets\Actors\playerBullet.bmp • Set the collision Data.

32. CONCEPT – DYNAMIC SPRITE CREATION • In games we need to be able to create and delete sprites at anytime during the game. • In Fun the CreateSprite function allows us to make a copy of a sprite. • We keep a “template” or “master” around set to “unused” to create clean copies from.

33. STEP 2: Dynamic Sprite CreationSprite_Copy Use: Sprite_Copy will make a copy of a sprite that is passed into the function and return the newly created sprite. Create The Function: • Add a new My Function named Sprite_Copy. • The declaration should be Sprite* Sprite_Copy(const char* original, const char* newname, int x, int y, float angle, float speed) • The function body is as follows.

34. Sprite_Copy Sprite* osprite = Sprite::Search( original ); if ( osprite ){ Sprite* newsprite = osprite->CreateSprite(); newsprite->Name( newname ); newsprite->WorldPositionX( x ); newsprite->WorldPositionY( y ); newsprite->VectorAngle( angle, 0 ); newsprite->Visible( true ); newsprite->Speed( speed ); newsprite->Unused( false ); return newsprite;} else return 0;

35. CONCEPT – DEBUGGING DYNAMICS • Always check collision with name of copy, not original • Sprite_Copy returns 0 if the original wasn't found – CHECK THIS! • Make sure you set attributes – including Name and Unused – or your results may be incorrect

36. CONCEPT – HOTSPOTS • Hotspots are a way to store a relative position on a sprite that changes as the animation changes • Important for guns, held equipment, and other things that might change position relative to a character's pose

37. STEP 3: Firing the BulletsPlayer_Fire_FN Use: Player_Fire_FN calls the Sprite_Copy function to create a new bullet that will “fire” from the ship. This function will also play the bullet sound. Create The Function: • Add a new Object Function named Player_Fire_FN. • Now enter the following code into the function body. • Be sure to add this function to the Player_Ship’s behavior and to update the Player_Ships’s Hotspot

38. PlayerFireFN if ( pKeyboard->IsTriggered(DIK_SPACE) ) { Sprite_Copy( "Bullet_Master", "Bullet", This->WorldPositionX() + This->HotSpotX(0), This->WorldPositionY() + This->HotSpotY( 0 ), 0, 10 ); SoundPTR shootsound( "Fire_Bullet" ); shootsound->Play(); }

39. STEP 4: Create the Master Bullet Sprite • Create a sprite named Bullet_Master and check Unused. • Use the BULLET actor. • Set this sprite to collide with other sprites and the map. • Set this sprites display list to be the same as the ships (to ensure that the bullet doesn’t collide with the ship).

40. STEP 5: Add the Sound • Add a sound to Level_1 named Fire_Bullet. • For the sound file use ArtAssets\Sounds\SFX\Bullet1.wav

41. STEP 6: Save and Test • Save the Project: • Click on Project and Save. • Run the Project: • Click on the Build/Run button in the menu bar. • Results: • Now the Player Ship should fire a bullet and the bullet sound should play when the space bar is pressed.

42. PART 5: Give the Bullets an Effect Objective: • Make the bullets collide with the alien ships and delete the bullets when in that event and when they go off the screen. • Step 1 – The Bullet Behavior • Step 2 – Modify Old Functions • Step 3 – Save and Test

43. STEP 1: Firing the BulletsBullet_Life_FN Use: Bullet_Life_FN will delete the Bullet when it leaves the viewport Create The Function: • Add a new Object Function named Bullet_Life_FN. • Now enter the following code into the function body. • Be sure to add this function to the Bullet_Master’s behaviors.

44. Bullet_Life_FN if ( !This->InViewport() ) This->DeleteFlag(true);

45. STEP 2: Modify Old FunctionsUpdate Alien_Damage_FN Use: When the Bullet hits the Alien we will want to delete the bullet so we’ll modify the Alien_Damage_FN. Update: • Modify Alien_Damage_FN with the following bold face code changes

46. Alien_Damage_FN (CHANGES) Sprite* projectile = This->CollisionWithSpritePtr( "Bullet" ); Sprite* player = This->CollisionWithSpritePtr( "Player_Ship" ); if ( player || projectile ) { This->Speed(0); This->Animation(ALIEN_PROBE_EXPLODE); if ( projectile ) projectile->DeleteFlag(true); }

47. STEP 3: Save and Test • Save the Project: • Click on Project and Save. • Run the Project: • Click on the Build/Run button in the menu bar. • Results: • When the Alien ships are hit with the bullets the Alien should explode and the bullet should delete.

48. PART 6: The HUD and Text Objects Objective: • Create a HUD and display the player’s score and a timer on it. • Step 1 – The Head-Up-Display • Step 2 – Displaying Stats on the HUD • Step 3 – Create and Display a Timer • Step 4 – Save and Test

49. CONCEPT – HEAD-UP DISPLAYS • The HUD is used to display information to the player such as a timer or ammo counts. • It doesn't move with the viewport. • It should always have a higher z-order • The map that is uses is mostly transparent.

50. Step 1: The Head-Up-Display • Add a map to Level_1 named HUD_Map. • For the image file use Art Assets\Maps\HUD_Map.bmp • Be sure to change the zOrder to be the highest of all the objects and set the Ratios to 1.0