Creating a basic platform game
Yea! Platform games are fun!
Today we're going to make a basic platform game! Some popular platform games include Donkey Kong, Super Mario Brothers, Sonic the Hedgehog, and many, many others.
The object of our game is for the player to move this guy: to this block: .
Rules/Structure:
- The player can move left, right, and jump.
- The player can safely touch these blocks: .
- The player will die if he touches these blocks: .
This tutorial is divided into steps, and each step has a list of instructions. When you complete an instruction, you can click on it to mark it as complete. This will help you keep your place.
You can use the arrows at the left and right to navigate through this tutorial. The first step starts on the next page!
Step 0 - Getting started
- Close every application you have open except this one.
- Find the UBGD_FileSync_v2.2.exe file on the desktop and double click it. If it's not there, you can download it here.
- We want to download the project, so type "1" and then [ENTER].
- Select "Student Files" by typing "1" and then [ENTER].
- Find your name in the list. Type the number which corresponds to your name and then [ENTER].
- Find the project called "MyBasicPlatformGame.gmx.zip". Type the corresponding number and then [ENTER].
- The Sync Tool will download your project, extract it, and launch it for you.
- When it's done, GameMaker Studio will be open.
Step 1 - Creating sprites
A "sprite" is the visual representation of a game object. Before we can create objects, we need sprites for them!
-
Click on this image, drag, and drop it onto GameMaker Studio.
(this is Q*bert, from the game Q*bert, created by Gottlieb!) - A dialogue will apear asking if this is a sprite or a background image. Click the "Sprite" button.
- Name this sprite "Qbert_sprite" (without quotes).
- Leave everything else alone.
- Click "OK".
-
Repeat these steps for the images below. Name each sprite as indicated:
- winBlock_sprite
- okBlock_sprite
- loseBlock_sprite
Step 2 - Creating objects
Now that we have our sprites, we can create our game objects!
- Right-click on the "Objects" folder, and select "Create Object".
- We'll start with our player. Name this object "Qbert"
- Beneath the name, open the dropdown menu to select the "Qbert_sprite" which we created earlier.
- Check the box labeled "Solid".
- Click "OK".
- Repeat these steps for all three blocks. Name them, "winBlock", "okBlock", and "loseBlock".
Step 3 - Creating a level
Levels can be implemented in GameMaker Studio by creating a "Room". We'll make one now!
- Right-click on the "Rooms" folder, and select "Create Room".
- Change the current object to the okBlock which you created earlier.
- Fill the entire border of the room with okBlocks by clicking in the room. You can re-arrange blocks by clicking and dragging them.
- Create platforms using okBlocks for the player to jump on.
- Change the current object to the winBlock which you created earlier.
- Add a single winBlock to your level. Don't make it too easy, but remember, this is just the first level.
- Change the current object to the loseBlock which you created earlier.
- Add a few loseBlocks to your level.
- Change the current object to Qbert which you created earlier.
- Add a single Qbert to the room. He should start far from the winBlock, on top of an okBlock.
- When you're done, click the at the top left of the room window.
- Here's an example room:
- Be sure to save your work so far by clicking the button!
Step 4 - Making stuff happen
Alright, we've created our first level... but it doesn't do anything yet! Let's give our player control over Qbert. We'll do this by adding keyboard events to the Qbert object.
- Double click the Qbert object under the Objects folder.
- Click the "Add Event" button at the bottom of this window.
- Click "Keyboard" and then <LEFT>.
- What do we want to happen when the player presses left? We want Qbert to move to the left!
- The right side of the window lists all the actions we can do. Find the "Jump to Position" action on the "Move" tab. It looks like this: .
- To add this action, you can either drag-and-drop it into the actions list, or simpley right-click on it.
-
We want Qbert to move to the LEFT from his CURRENT position, so we'll put:
- -4 in the X
- 0 in the Y
- Make sure "Relative" is checked.
- Now add another event for the Keyboard <RIGHT> key.
- This time, we want Qbert to move to the RIGHT from his CURRENT position. Add the "Jump to Position" action to this event.
- Use positive 4 in the X.
- Be sure to mark "Relative" again.
- Be sure to save your work so far by clicking the button!
- Once you're done, let's try out your game by pressing the button at the top left of GameMaker Studio.
Step 5 - Avoiding walls
Notice anything weird while playing the game? We told Qbert to move to the left and right, but we never told him he couldn't walk through walls!
- Double click the Qbert object under the Objects folder.
- Select the Keyboard <LEFT> event.
- Now we need to add a conditional statement. Go to the "Control" tab in the actions toolbar on the right side of the window.
- Add the "Check Empty" action to the top of the actions list. It looks like this: .
-
This action allows us to make sure our target destination is empty. Use the same values which we used in the "Jump to Position" action.
- -4 in the X
- 0 in the Y
- Make sure "Relative" is checked.
- Leave "Objects" as "Only solid".
- If your "Check Empty" action is not at the top of the list, drag it up so that it is.
- Now select the Keyboard <RIGHT> event, and add the "Check Empty" action as well.
- This time, be sure to use positive 4 in the X and mark it as "Relative".
- Be sure to save your work so far by clicking the button!
- Try out your game so far!
Step 6 - Jump, jump, JUMP!
This game isn't very much fun yet. Let's make Qbert jump!
- Double click the Qbert object under the Objects folder.
- Add a new event for Keyboard <UP>.
- Add the "Set Vertical Speed" action from the "Move" tab. It looks like this:
- You'll notice that the arrow points down - that's because the Y direction is inverted. If we want Qbert to move UP, we'll need to give it a negative value. Use -8, NOT relative.
- Be sure to save your work so far by clicking the button!
Step 7 - What goes up...
If you play your game now, you'll notice that Qbert goes straight into the air and never comes down - oh no! We need to add gravity to our world, but we only want this to affect Qbert if his feet are not on the ground.
To make this work, we'll check Qbert's feet on every frame. If he's in the air, we'll add gravity. If he's on the ground, we'll take gravity away to prevent him from sinking in.
- Double click the Qbert object under the Objects folder.
- Click "Add Event", select "Step" and then "Step" again. This will occur once per iteration of the game loop (or, once per frame).
- We want to check the space below Qbert's feet. Add the "Check Empty" action - the same one we used to prevent Qbert from walking through walls, and it looks like this: .
-
Because we want to check the area below Qbert, we'll use the following settings:
- X = 0
- Y = 1
- Only solid objects
- Make sure "Relative" is checked.
-
Now find and add the "Set Gravity" action in the "Move" tab. It looks like this:
- The direction field expects an angle in degrees, with 0 degrees pointing straight right. For straight down, we'll want a direction of 270.
- Set the value of gravity to 0.5
- Now find and add the "Else" action in the "Control" tab. It looks like this: . This tells GameMaker that we want to do something else if previous conditional is false.
- Lastly, find and add the "Set Gravity" action again. We'll use the same direction as before (270), but this time with a value of 0.
- Be sure to save your work so far by clicking the button!
- Let's try out your game now!
Step 8 - Stick the landing
Notice anything weird? Qbert goes straight through the top and bottom of blocks! Well that's not right! Let's fix it!
- Double click the Qbert object under the Objects folder.
- We want to perform actions when Qbert collides with an okBlock, so click "Add Event", select "Collision", and then "okBlock".
-
First, we need to ensure that Qbert is flat against the okBlock.
- Find and add the "Move to Contact" action from the "Move" tab. It looks like this: .
- In the "Direction" field, type the word "direction". This is a special value indicating the current direction Qbert is traveling.
- In the "Maximum" field, enter a value of 12.
- Leave the "Against" field as "Solid Objects" and press "OK".
-
Next we need to set his vertical speed to zero to stop his momentum.
- Find and add the "Set Vertical Speed" action in the "Move" tab (this is the same action we used to make Qbert jump).
- Enter a value of 0, NOT relative, and press "OK".
Step 9 - Winning the game
In order to win, Qbert must touch the winBlock (). We'll check for 2 possible scenarios: Qbert colliding with the winBlock, and Qbert standing over the winBlock.
- Double click the Qbert object under the Objects folder.
- Add a new event for a collision with the winBlock.
-
When this occurs, we should display a message.
- Find and add the "Display Message" action from the "Main2" tab. It looks like this: .
- Type whatever message you'd like the user to see when they complete this level.
- We should also advance to the next room. Find and add the "Go To Next Room" action from the "Main1" tab. It looks like this:
- Now we need to test if Qbert is standing over a winBlock. We'll want to check every frame. Open the "Step" event we created earlier for the Qbert object.
- Find and add the "Check Object" action from the "Control" tab. It looks like this:
- The object we're testing for is the winBlock, and we want to check 1 pixel in the Y direction, relative to Qbert's current position.
- The "Check Object" action is a conditional step. Conditional steps normally only process the very next action when true, but we need to perform two actions. For this to work, we'll need to put our two actions inside an action block.
- To create an action block, find and add the "Start Block" action from the "Control" tab. It looks like this:
- The two actions we want to add inside this block are the same from steps 3 and 4 above ("Display Message" and "Go To Next Room").
- Lastly, to end the action block, find and add the "End Block" action from the "Control" tab. It looks like this:
Step 10 - Losing the game
The player will lose the game by touching a loseBlock (). Just like the winBlock, we'll need to check for 2 possible scenarios: Qbert colliding with the loseBlock, and Qbert standing over the loseBlock.
- Double click the Qbert object under the Objects folder.
- Add a new event for a collision with the loseBlock.
- Find and add the "Restart Room" action from the "Main1" tab. It looks like this:
- Now we need to test if Qbert is standing over a loseBlock, similar to instructions 5-7 on the previous page. We'll want to check every frame. Open the "Step" event we created earlier for the Qbert object.
- Find and add the "Check Object" action from the "Control" tab. It looks like this:
- The object we're testing for is the loseBlock, and we want to check 1 pixel in the Y direction, relative to Qbert's current position.
- Add the "Restart Room" action (the same from instruction 3 above).
Step 11 - Preventing the double-jump
You may have noticed that Qbert can jump while he's already in the air. In fact, by holding the UP arrow, Qbert can fly jet-pack style. While this can be fun, you might decide that it makes the game less challenging. Here, we'll make sure he can only jump if his feet are on the ground.
- Double click the Qbert object under the Objects folder.
- Select the Keyboard <UP> event you created earlier.
- Find and add the "Check Empty" action from the "Control" tab. We used this previously to prevent Qbert from walking through walls (Step 5).
- Enter a Y value of 1 and mark it as relative. This will check the area directly below Qbert.
- Now, remember that we're using the "Check Empty" action, and what we have right now says "If the area below Qbert is EMPTY, then allow him to jump". That's not exactly what we want, is it? No. We only want to allow him to jump if the area below his feet is NOT empty. So, check the "NOT" box.
- Make sure that the "Check Empty" action is ABOVE the "Set Vertical Speed" action. That way, Qbert will only be given ups if there is a solid object below him.
Step 12 - Creating more levels
In Step 9, we allowed the player to progress to new levels by touching the winBlock, but we only have one level so far! Let's make some new ones.
- You can start from scratch if you'd like.
- To save time, you can right-click on your existing room and select "Duplicate".
- You can move blocks by dragging them around and remove them by right-clicking and selecting "Delete".
- Create as many rooms as you'd like!
Congratulations, you're (almost) finished!
At this point, you should have a functional platform game!
If you're using borrowed graphics (such as Qbert), be sure to give credit to the original creators!
Be sure to UPLOAD your work using the File Sync tool! I can't grade your work if you don't upload it!.
BONUS POINTS
If you have extra time, you can customize your game to earn extra credit!
Running out of levels
Your game will crash with an error message after the player beats the last level. You will collect bonus points if you can figure how to handle this properly. Some of your options include:
- Restarting from the first room
- Ending the game properly
- ???
Personalization
You will also receive bonus points for personalization. This includes graphics, sound, and whatever else you can figure out! Have fun!
Bugs!
This game is not perfect - there ARE bugs! For example, try walking into a loseBlock from beside it (not on top of it). You'll find that you don't lose. This should be fixed...