Video Game Programming Level One – Side Scroller

1. Video Game ProgrammingLevel One – Side Scroller INSTRUCTOR: Kevin Carey TEACHING ASSISTANT: Chad Bramwell

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

3. STEP 1: Set up the Project • Open the project Sidescroller.fun. • Make sure that all of the Game Properties are set. • Compiler: Microsoft Visual C++ 2003 • Color Bit Mode: True Color (32-bit) • Screen Dimensions: 640x480

4. 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.

5. STEP 2: Level_1 and the Master Map • Set up Level_1 • Add a Map to Level_1. • Type 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.

6. 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: • The level should display with the Master Map for the background.

7. 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 – Set up the Player Sprite • Step 3 – Viewport Movement • Step 4 – Save and Test

8. Step 1: The Player Ship Actor • Add a new Actor and name it PLAYER • Add the first Animation Set • Type DEFAULT for the name. • For the animation frame use Assets\Actors\fighter1.bmp • Set the collision Data • A single circle would work well.

9. CONCEPT – Viewport • Some levels in ProjectFUN are bigger than the screen. This makes it impossible to see what’s ahead on the level, such as enemies or a pitfall. • ProjectFUN allows you to create a “Viewport” which defines a box around your player that ProjectFUN will use to make the screen follow them.

10. CONCEPT – Viewport (cont...) • When the player moves up against the edge of this box, the screen will scroll over to reveal more of the map. • Viewport Inflation is how much the Viewport will scroll over when there is no more map to show. For example, if the Viewport is at the end of the level, it will “inflate” to reach the end of the map.

11. CONCEPT – Viewport (cont...) • Viewports are defined on a per-level basis. • You can find the options for the Viewport under the ViewPort tab in Level->Properties.

12. CONCEPT – Main Character • In ProjectFUN the Main Character is the sprite that the Viewport will follow. • There can only be one Main Character in a level. • That means, the player sprite should be made the Main Character.

13. CONCEPT – Main Character (cont...) • You will find the Main Character option under the General tab in Sprite->Properties. • Note: If you don’t have a Main Character, your level will not scroll, so make sure you set it.

14. STEP 2: Set up the Player Sprite • Add a sprite to Level_1 and name it Player_Ship. • Use the PLAYER actor. • Set this sprite to be the Main Character by checking the box in the General tab. • Under the Collision tab, check Precise Collision, Activate Sprite Collision, Check With Sprites, Check Collision With Map, and both Ghost Collision boxes.

15. STEP 3: Viewport movement • Right click on the Level_1 level and select Properties. • Go to the ViewPort tab. • Under the Scrolling Bounding Box section, enter the numbers on the following slide.

16. Viewport Properties • Set the Viewport properties:

17. 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 show with the player ship sprite inside the viewport. • Note: The player ship will not move at this point. We haven’t written code for that yet.

18. PART 3 – Moving the Player Objective: -Get the Player moving -Add in Wrapping Maps to the game • Step 1 – Write the PlayerMoveFN • Step 2 – Edit Player Sprite • Step 3 – Add a Wrapping Map • Step 4 – Save and Test

19. 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.

20. STEP 1: PlayerMoveFN Use: This Object Function will be used to take input from the arrow keys and move the Player Ship sprite based what keys the player presses. Create the Function: • Create an Object function called PlayerMoveFN and set Used By to Sprites. • Enter the following code for the function body.

21. 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);

22. STEP 2: Edit the Player Sprite • Right click on the Player Sprite and select Properties. • Select the Behavior tab. • Click the plus button next to PlayerMoveFN. • Press the Ok at the bottom of the window.

23. CONCEPT – WRAPPING MAPS • Wrapping maps “wrap” around when the edges is reached. • Can be scrolled constantly or relative to the viewport. • These serve as a “background” map. They can be smaller than the main map, as they “wrap” to constantly tile across the background.

24. STEP 3: Wrapping Maps • Add a map named Wrapping_Map • Use the file wrappingMap.bmp • Check the box in the General tab that says Wrap.

25. STEP 3: Wrapping Maps Set these properties under the Scrolling tab:

26. 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 Player Ship should move around by pressing the arrow keys • The stars should scroll in the background • The level should scroll when you move the player ship around

27. PART 4 – 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 Actor • Step 3 – Alien Sprite • Step 2 – Alien Behaviours • Step 4 – Save and Test

28. CONCEPT – PEG REGISTERING • Peg Registering tells ProjectFUN where the center of your actor is. • Normally, ProjectFUN will assume that the upper-left of the actor is the “center”, so when you move the sprite, it’s really moving the upper-left corner to the (X,Y) position.

29. CONCEPT – PEG REGISTERING • Peg Registering tells ProjectFUN to use a point that you choose, as the “center” of the actor. • This means, ProjectFUN will move the actor to (X,Y) with the center that you chose.

30. 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

31. Alien Probe Actor CONTINUED • 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.

32. STEP 2: Create the Alien Sprite • Create a sprite named Alien_Probe. • Use the ALIEN_PROBE actor. • Set probe to bounce around the map • Set up collision to check for both sprites and the map • Under the Effects tab, check the Reflection box. • Be sure to use a different Display List than the player’s.

33. STEP 3: Alien Behavior AlienDamageFN 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 AlienDamageFN. • Enter the following code for the function body.

34. AlienDamageFN 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); }

35. Edit the Alien Sprite • Go to the Alien Probe’s Properties. • Add the AlienDamageFN to the Behavior.

36. 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: • You should see an Alien Probe on your screen, along with your player ship. • When you run into it, it should explode.

37. PART 5: 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 – Create the Master Bullet • Step 3 – Updating the Hotspot • Step 4 – Firing the Bullets • Step 5 – Edit the Player Sprite • Step 6 – Save and Test

38. CONCEPT – DYNAMIC SPRITE CREATION • In games, we sometimes need to create sprites while the game is running. For instance, if you’re firing a machine gun we need to create the bullets during the game. • ProjectFUN allows us to do that, by “copying” a Sprite that we’ve already made.

39. CONCEPT – DYNAMIC SPRITE CREATION (cont..) • In ProjectFUN we use what is known as a “master sprite” to make all of our copies. • Think of it as a blueprint, and we create a real sprite off of that when we need to.

40. CONCEPT – DYNAMIC SPRITE CREATION (cont..) • There are a lot of things that you want to set after you’ve made a copy, such as where the copy should be on the screen, or how fast it’s going. • We’re going to make a function called SpriteCopy to do this for us. (More on this in a few slides.)

41. CONCEPT – DEBUGGING DYNAMICS • Because debugging sprites created at game-time is difficult, here are a few tips: • Make sure you use a different name for the copy sprite. • Make sure that you check collision with this new name, instead of the master sprite’s name.

42. SpriteCopy • Add a new My Function • Name it SpriteCopy • Under Declaration, write the following line (all on one line): • Add the code on the next slide Sprite* SpriteCopy(char* masterName, char* copyName, float posX, float posY, float angle, float speed)

43. SpriteCopy Sprite* master = Sprite::Search(masterName); Sprite* copy = master->CreateSprite(); if(copy) { copy->Name(copyName); copy->Unused(false); copy->WorldPosition(posX, posY); copy->VectorAngle(angle); copy->Speed(speed); } return copy;

44. 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.

45. STEP 2: 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 player ship’s display list

46. CONCEPT – HOTSPOTS • Hotspots are points on a Sprite that ProjectFUN will track for you. For instance, if you have a spot where a bullet should fire out of a ship, a Hotspot will automatically keep track of where that is on the Sprite.

47. CONCEPT – HOTSPOTS • Hotspots are useful for when you have different points on a Sprite that need to interact with other things, such as our previous example of a space ship. • ProjectFUN only lets you have 5 Hotspots on a given frame of animation.

48. STEP 3: Updating the HotSpot • Open up the PLAYER Actor and click the dots button that is next to Hotspot 0. • Select where you want the bullets to fire out of the ship and then save and click the ‘X’ button in the upper right.

49. STEP 4: Firing the BulletsPlayerFireFN Use: PlayerFireFN calls the SpriteCopy function to create a new bullet that will “fire” from the ship. Create The Function: • Add a new Object Function named PlayerFireFN. • 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

50. PlayerFireFN if ( pKeyboard->IsTriggered(DIK_SPACE) ) { SpriteCopy( "Bullet_Master", "Bullet", This->WorldPositionX() + This->HotSpotX(0), This->WorldPositionY() + This->HotSpotY(0), 0, 10 ); }