Lesson 10

Platform Games

Objectives:

  • Students will program action qualifiers
  • Students will program player movement by testing the proximity of solid objects relative to the player
  • Students will program platforms & simulate gravity in a virtual world
  • Students will program gravity simulation
  • Students will manipulate jumping in a virtual world
  • Students will program & refine climbing in a virtual world
  • Students will program intuitive movement keys for ergonomic gameplay
  • Students will program sprite images to match object movement
  • Students will synthesize obstacles & objectives to make a game appropriate for the target market
  • Students will create game refinements
  • Students will demonstrate knowledge of imbedded marketing & advertising in games
  • Students will use industry-standard documents to plan & build an original game

Situation

The Rainforest Laser Tag Company wants a simple platform game. The audience for the game is boys, age 9 to 12. For that reason, the controls should be very user friendly & the actions not complex. Before completing the final game build, you must complete a proof of concept build. Proof of concept is a basic game build to demonstrate that a design is possible before more time & money are invested.

How to Begin

The position of objects in this build & the images used are only for the proof of concept testing. Final design & animations will be updated in alpha & beta versions of the game build.

  1. Open Game Maker
  2. Save the game as LastName_Platform in your video game design folder.
  3. Create the following sprites & objects. The objects should be both visible & solid.

Sprite Name / Image File / Object Name
SPR_Platform / Platform.png / OBJ_Platform
SPR_Pineapple / Pineapple.png / OBJ_Avatar
  1. Create a new room & name it Level 1. Also enter Rainforest Laser Tag Platform Game as the caption.
  2. Place a row of platform objects at the bottom of the room & a few floating platforms above the ground level.
  3. Place a pineapple object on the top platform. This will serve as the basic avatar.

Position Testing

This lesson focuses on using position testing to create smooth movement. In position testing, the computer checks where the player’s avatar is before allowing it to move into that spot. This is an important part of a platform game where the gravity settings need to change based on whether or not the player is in the air or on a platform. To demonstrate this, you will program the avatar (pineapple object) for basic movement using position testing.

  1. Open the Object Properties dialog box for the OBJ_Pineapple.
  2. Add a keyboard event for the player pressing the left arrow key.
  3. Drag & drop Check Empty (Control) into the Actions: column.
  4. In the Check Empty dialog box enter the following:
  5. Click Self, Enter x: -4, y: 0, Object: Only Solid, Check Relative, & OK.

This actions check to see if the space 4 pixels to the left of the avatar is empty. If this is true & the player is pressing the left arrow key, then the avatar should jump to that position. You will now add this programming. It is a good habit to offset the actions related to a qualifier in a block of code. This helps to visually separate the qualifiers & actions & makes it easy to add a series of action for each qualifier as needed during programming.

  1. Drag & Drop a Start Block (Control) into the actions: column below the qualifier you just added.
  2. Drag & drop Jump to Position (Move) into the actions: column.
  3. In the dialog box enter the following:
  4. Click Self, Enter x: -4, y: 0, Check Relative, & OK.
  5. Drag & drop an End Block (Control) into the Actions: column.
  6. Repeat similar steps to move the avatar 4pixels to the right.
  7. Test play the game. Notice that the avatar moves fine, but will not fall when it moves off of a platform. Gravity needs to be programmed to make the avatar fall.
  8. Save your work.

Gravity of the Situation

In the virtual world, gravity is not automatic. The game engine must be programmed to make the avatar fall when it is not on a platform. Programming gravity in Game Maker so the game engine pushes objects toward the bottom of the screen makes objects fall like they would in real life.

  1. Click Add Event. Click the Step Event & select Step.
  2. Drag & drop Check Empty (Control) into the actions: column.
  3. In the dialog box enter the following:
  4. Click Self, x: 0, y: 1, Object: Only Solid, Relative, click OK.
  5. This will check the space one pixel below the object. If the space is empty, then the avatar is not standing on a solid object & should fall.
  6. Drag &drop a Start Block (Control) into the actions: column.
  7. Drag & drop Set Gravity (Move) into the actions: column.
  8. In the dialog box enter the following:
  9. Click Self, Direction: 270, Gravity: 0.3 (This sets how strong of a pull gravity has on the object), Click OK.
  10. Drag & drop End Block (Control) into the actions: column.
  11. Test play the game. If the avatar will not move, you will fix this in the next section. If the avatar freefalls after moving from the first platform, you will fix this later.
  12. Save you work.

Gravity Bug

In Game Maker, gravity does not turn off unless you tell it to. Since the gravity is pushing the avatar down, it cannot move left or right. An ELSE qualifier needs to be added to the step event to address whenever the test for a space 1 pixel below the avatar empty of solid objects is FALSE.

  1. Drag & drop ELSE (Control) into the Actions: column.
  2. Drag a Start Block (Control) into the actions: column under the ELSE action.
  3. Drag & drop Set Gravity (Move) into the actions: column.
  4. In the dialog box enter the following:
  5. Click Self, Direction: 0, Gravity: 0, & click OK.
  6. Drag End Block (Control) into the actins: column.


  1. Test playSave your work.

Freefalling Bug

Right now, the avatar sometimes falls through the platforms, gets stuck inside of a platform, or floats one pixel above a platform. You need to fix these problems before the proof concept can be considered complete.

  1. Add and event for a collision between the pineapple & platform.
  2. Create an action to change the vertical speed to zero when the avatar collides with the platform. Make sure you do not use the relative setting.
  3. Drag & drop Move to Contact (Move) into the actions: column.
  4. In the dialog box enter the following:
  5. Click Self, Direction: 270, Maximum: 1, Against: Solid objects, Click OK.
  6. Test play the game.
  7. Debug the movement & gravity so the avatar will fall from the platforms to reach that bottom.
  8. Save your work.

Jumping

If the gravity setting is high the avatar may not be able to jump up from the platform because gravity is too strong. Most games require a gravity setting of 0.3 – 0.5. The power of the jump is controlled by the balance between the vertical speed & gravity settings.

As part of its platform-style game, the Rainforest Laser Tag company wants the player to be able to jump over obstacles & climb ladders. Follow the directions below to practice programming a jump move in Game Maker.

  1. Open the object properties for the pineapple.
  2. Add an event for pressing the space bar.
  3. Drag & drop Speed Vertical (Move) into the actions: column.
  4. In the dialog box enter the following: Vertical speed: -5.
  5. Test play the game. Everything seems to work, but try pressing the space bar before the pineapple touches a platform. The jump occurs even if the avatar is not standing on the ground, but in midair. You will fix this glitch in the next section.
  6. Save your work.

Platform Jump

To fix the glitch that allows that player to jump wile in midair,you need to add programming to detect when the avatar is touching a solid object beneath it. Since this is a qualifier for the action you just programmed, first set that action in a block of code.

  1. Drag & drop Start Block (Control) at the top of the Actions: column.
  2. Drag & drop End Block (Control) at the bottom of the actions: column. The jumping action (negative vertical speed) should be in a block of code.
  3. Drag & drop Check Collision (Control) to the top of the actions: column above the block of code.
  4. In the dialog box enter the following:
  5. Click Self, x: 0, y: 1, check relative, click OK.

High Drop Bug

Before testing the new programming, you should also address the possibility of another bug. The jump strength was programmed as a negative vertical speed. The gravity setting will push the avatar down. The avatar will land at a vertical speed equal to the jump speed, but only if it landed on the same platform. If the avatar falls to a lower platform, the avatar will have accelerated to a greater speed because of gravity. This becomes a problem if the vertical speed is great enough for the avatar to pass through a platform before the step event can check for the collision. The downward vertical speed needs to be limited so this will not occur.

  1. Select the step event to show the associated actions.
  2. Drag & dropTest Variable (Control) into the actions column below the last block of code.
  3. In the dialog box enter the following:
  4. Click Self, Variable: vspeed (make sure it is spelled right), Value: 12, Operation: Largerthan, & Click OK.
  5. Program a block of codebelow the test-variable action to set the vertical speed to 12.


  1. Test play the game
  2. Debug any movement or jump function if needed.
  3. Save your work.

Climbing

Another major gameplay component of platform games is climbing. You will place ladders between platforms to allow the player to move up in the game frame.

  1. Create a new sprite called SPR_Ladder.
  2. In the sprite properties dialog box, click Edit Sprite to begin making a custom sprite of a ladder.
  3. Double Click on Image0 for open the Image Editor.
  4. Click Transform > Resize Canvas in the Menu Bar & set the Width: 32 & Height: 64.
  5. Zoom in so the canvas is displayed larger.
  6. Left-click on a dark grey color swatch to change the Left: color setting.
  7. Click the Draw a Line button. Select the 4th line thickness down.
  8. Make sure to keep the sides of the ladder inside the canvas, draw the sides of the ladder & then 3 steps on the ladder equally spaced. Start at the bottom & leave the top open. Follow the sample below.


  1. Create a new object named OBJ_Ladder, assign the SPR_Ladder sprite, & set the object to be visible, but not solid.
  1. Open the Room Properties for Level 1.
  2. On the Objects tab, uncheck the Delete underlying check box. This will allow the ladder to overlap the platform & each other.
  3. Add an instance of the OBJ_Ladder object to the bottom platform so the bottom of the ladder is overlapping the platform.
  4. Add other instances of the ladder to connect the bottom platform to one above it. If you evenly spaced the rungs on the ladder sprite, the ladder objects will stack nicely.


  1. Open the OBJ_Pineapple object properties.
  2. Enter -1 for Depth: which is under visible & solid. This moves the avatar 1 unit in front of the other layers (If this setting does not work, enter a higher negative value.)

  1. Test play the game & save your work.

Climbing Up & Down

The avatar must be programmed to allow up & down movement along the ladder. First, however, you must add programming to check if the avatar is standing on a ladder.

  1. Open the Pineapple object properties.
  2. Add a keyboard event for pressing the up arrow key.
  3. Drag & drop Check Object (Control) into the actions: column.
  4. In the dialog box enter the following:
  5. Click Self, Object: Ladder, x: 0, y: 0, Check Relative, & click OK.
  6. This will check to see that the pineapple is on a ladder.
  7. Start a block of code.
  8. Add an action to the block of code to check if the location 4 pixels above the pineapple is free of all solid objects.
  9. Add an action to the block of code so the pineapple jumps to the position 4 pixels above it.
  10. Close the block of code.
  11. Using similar steps, program the down arrow key to move the pineapple down the ladder.
  12. Test play the game.
  13. In the object properties for the Pineapple, select the step event.
  14. Drag & drop Check Object (Control) into the Actions: column.
  15. In the Check Object dialog box, click Self, Object: ladder, x: 0, y: 0, check relative.
  16. Start a block of code.
  17. Add an action to set gravity to 0 in downward direction.
  18. Add an action to set the verticalspeed to 0.
  19. Close the block of code.
  20. Test play the game. Try moving up & down ladders & moving over to platforms that are next to the ladder. The avatar should be able to move off the ladder to the left or right.
  21. Save your work.

Background

You have finished the testing needed to prove the concept. Before releasing the game for the alpha build, you should create an attractive background to give the game a bit of a finished feel.

  1. Click the Create a Background button.
  2. Enter BCK_Clouds in the Name: box.
  3. Load the Clouds.png image from my web site. Click OK to close Background Properties.
  4. Open Room properties for Level 1.
  5. In the backgrounds tab, select the clouds background.
  6. Make sure the Foreground image check box is unchecked. If checked, the clouds will appear in front of all other objects.
  7. Click the Color: swatch & change the color to a dark blue.
  8. Click the Tile Horz.Tile Vert. check boxes so the clouds will be repeated to fill the screen. This is called tiling.
  9. Test play the game.
  10. Debug any errors.
  11. Save your work.

The Rainforest Laser Tag Company has approved the proof of concept. It wants to use the same character from the maze game created in the lesson to keep with the exploration theme. Keep up the good work.

Avatar

  1. Change the pineapple avatar to the explorer with an appropriate pose needed for each movement, as shown in the chart below.

Movement / Sprite
Climbing Up & Down / Explorer_climb_strip8.png
Moving Left / Explorer_left from Maze folder on my web site
Moving Right / Explorer_right from Maze folder on my web site
Stopped / Frame 0 from the animation (Explorer down)
Floating Ghost / Ghost_floating_strip8.png
Lava or Water Trap / Water_strip12.png or lava_strip12.png
  1. After downloading the explorer climbing up & down strips from my web site, follow the instructions in the video that is linked “Video Tutorials” the Video Game Programming tab. It is titled “Animating Sprites with Photoshop.”
  2. Create Sprites for each of the animated images.
  3. Save your work.

Obstacles

  1. Create obstacles that the player must jump over, such as pits, water, or gaps in the platform.
  2. Create enemy obstacles that move & the player must avoid or destroy.
  3. Make the game challenging enough for the target market to win after a few tries.
  4. Create a wall along the sides of the room to prevent the player from leaving the edge of the screen.
  5. Duplicate the platform sprite & rename SPR_wall.
  6. Go into edit sprite & resize the canvas to 48 x48 pixels (don’t change the percentage).
  7. Go to transformRotate 90 degrees counter clockwise.
  8. Program lives. Subtract a life when the player touches an enemy.
  9. Test play the game.
  10. Debug as needed. Then save you progress.

Objectives

  1. Create scoring objects & objectives for the player.
  2. Program scoring. Increase the score when the player collects scoring objects. The reward should reflect the risk taken to receive it.
  3. Test play the game & debug as needed. Save you work

Graphics

One way to make a game look better is to use graphic overlays. A graphic overlay is simply an image added over another object. This image does not have any associated programming, it is simply decoration.

Graphic overlays are typically stored as a title set. A tile set is a panel of sprites laid out in a grid or tile format. The main reason for using an overlay is to save on programming & the size of the game file. For example, building a game with a basic platform object saves on programming because you do not have to program each new image as a new object.

In the game you are building, you will use a tile set to make the platforms & other objects look better. Tile sets can be found on my teacher website under Resources > Tile Sets. You can also find others by searching Game Maker tile sets on the Internet. You will use the platform tile set.png for the 1st level & then you are free to use your own for the other levels.

  1. To begin using a tile set, select the Create a Background button. The Background Properties dialog box is displayed.
  2. Enter BCK_Tile1 in the Name: box.
  3. Click Load Background & select the platform tile set.png file downloaded from my teacher website.
  4. Check Use as tile set check box. Once you check the box, the Tile Properties area is displayed in the Background Properties dialog box.
  5. Modify the tile properties so the grid aligns with the tiles in the image file. In this case, the tiles in the image file are based on a 32 x 32 grid, so enter 32 in the Tile width:Tile height: text boxes.
  6. The Horizontal offset:Vertical offset: text boxes are used to shift the entire tile set by a few pixels to get the grids to properly align. In this case, you do not need to modify the offset, so enter 0 in each of these text boxes.
  7. The Horizontal sep: (separation) & Vertical sep: text boxes are used to specify a border between tiles. If there are lines separating the tiles, you need to tell Game Maker how many pixels wide the lines are. In this case, the tiles have no separation, so enter 0 in these text boxes.
  8. Click OK to save the Tile set.
  9. Open the Room Properties dialog box for the Level 1 room.
  10. Click the Tiles tab.
  11. Click the selection button below the preview image & select BCK_Tile1 as the tile set.
  12. In the preview image, click on a grass tile. See below. To select more than 1 tile, hold the [Shift]key & drag to the end of what you want to select.