Platform Game Programming with AI
Senior 3 · ICT
Platform Game Programming with AI
4 lessons
Lesson 2 of 4
Building the Game World and Player Movement
60 min
Making a character feel heavy
In S2 your sprites moved by a fixed number of steps when a key was pressed. Try that in a platform game and the character floats: it goes up while the key is held and hangs in the air when it is released. Real objects fall faster and faster, land, and jump in a curve. This lesson gives your player gravity, a jump, and collisions with platforms and walls, using one variable and about twenty blocks.
Definition
Gravity (in a game): a rule that pulls a sprite down by changing its vertical speed a little every frame.
Velocity: speed in a particular direction. Here the variable y speed holds the vertical velocity: positive means moving up, negative means falling.
Collision detection: checking whether two things on the screen overlap, such as the player and a platform. In Scratch: touching [sprite]? or touching color [ ]?
Hitbox: the shape used for collision checks. A simple, plain costume makes a reliable hitbox.
Step 1: the game world
- Start a new project at scratch.mit.edu (Create) or in the Scratch app. Delete the cat, or keep it as your player.
- Background: click the Stage, open Backdrops, and paint a sky or choose one from the library. Backdrops are only scenery: the player will not collide with them.
- Platforms: create a new sprite by painting (Paint from the sprite menu) and name it Level. In Vector Mode, draw the ground and the platforms with the rectangle tool, all in the same colour, using your sketch from Lesson 1. Leave at least one gap.
- Position the Level sprite with go to x: (0) y: (0) so the drawing fills the stage exactly. Each later level can be a new costume of this sprite.
- Hazards: in the Level costume, colour spikes or lava pure red. You will test for this colour in the next lesson.
- Player: choose or draw a small sprite (about 30 × 40 pixels), name it Player, and keep its costume simple.
- Variable: with Player selected, Variables → Make a Variable, name it y speed, and choose For this sprite only.
The stage is 480 pixels wide and 360 high: x runs from −240 (left) to 240 (right), y from −180 (bottom) to 180 (top).
Step 2: the player script
Build this script on the Player sprite. The comments on the right are notes for you, not blocks.
Script drawn by Ganzaa in Scratch 3 block colours: yellow Events, blue Motion, orange Control, dark orange Variables.
| Part | Blocks | What happens each frame |
|---|---|---|
| ① Gravity | change [y speed] by (−1) | The vertical speed drops by 1 every frame, so a falling player gets faster and faster. |
| ② Move | change y by (y speed) | The player moves up or down by its current speed. |
| ③ Land | if touching [Level] → change y back, set y speed to 0 | If the move put the player inside a platform, it steps back out and stops. The player now rests on the platform. |
| ④ Jump | if key up arrow pressed → set y speed to 12 | Only checked when the player has just touched a platform, so it can jump from the ground but not in mid-air. |
| ⑤⑥ Walk | change x by (±4), then undo it if touching the Level | The player walks, but a wall stops it instead of letting it walk into the rock. |
Worked example 1: how high is a jump?
The jump sets y speed to 12. On the next frames, gravity first lowers the speed, then the player moves by it:
| Frame | 1 | 2 | 3 | … | 11 | 12 | 13 |
|---|---|---|---|---|---|---|---|
| y speed | 11 | 10 | 9 | … | 1 | 0 | −1 |
| Height gained | 11 | 21 | 30 | … | 66 | 66 | 65 |
The player rises pixels, reaching the top after about 12 frames, s at 30 frames per second, then falls back along the same curve. A platform 70 pixels above the ground is just out of reach; to reach it, raise the jump speed to 13, giving pixels.
Worked example 2: falling through the floor
The player falls from a high platform. After 20 frames of falling, y speed is −20, so it moves 20 pixels in one frame. A platform only 10 pixels thick can be skipped completely: one frame the player is above it, the next it is below it, and the touching check never sees an overlap. This is called tunnelling.
Two fixes: make platforms thicker than the fastest fall, or limit the speed. Add inside the forever loop, after the gravity block:
if <(y speed) < (-12)> then set [y speed] to (-12)
Real games call this a terminal velocity. With it, the player never moves more than 12 pixels a frame, so a 15-pixel platform always catches it.
Step 3: falling into a gap
If the player drops through a gap, it falls off the bottom of the stage. Add this second script to the Player; in the next lesson it will also cost a life.
Warning
Common bugs and their causes
- The player sinks into the ground or shakes: the costume's centre is far from the middle, or the costume has a thin, uneven outline. Centre the costume and keep its shape simple.
- The player sticks to walls: the up-arrow test passes while touching a wall, so the player can “climb”. Better games check that the player touched the platform while moving down (y speed below 0) before allowing a jump.
- The player cannot move at all: it starts inside the Level. Choose a start position above the ground.
- Different speed on different computers: Scratch aims for 30 frames per second, but a slow computer may drop frames. Test on the computers you will use.
griffpatch: Code a Platformer Game, part 1, The Basics. A well-known Scratch creator builds gravity, jumping and wall collisions step by step. His method is more advanced than this lesson's, but the ideas are the same.
✦
Hands-on: build and test the movement
- Build the game world from your Lesson 1 sketch: backdrop, Level sprite, Player sprite and the y speed variable.
- Build the player script and the falling script exactly as shown. Click the green flag and test: does the player fall, land, walk, stop at walls and jump?
- Measure: tick the y speed checkbox to show its monitor, then jump. What is the highest number it shows, and the lowest while falling from the highest platform?
- Add the terminal-velocity block from Worked example 2. Test a fall from the top of the stage.
- Change the jump speed to 10, then 14. Can the player still reach every platform? Choose the value that makes your level fair but not too easy.
- Make the player face the way it walks: add point in direction (90) in the right-arrow branch and point in direction (-90) in the left-arrow branch, and set the rotation style to left-right.
- Save the project as Platformer_YourName.
Practice
- Define gravity (in a game), velocity and collision detection.
- Why is the Level drawn as a sprite and not as part of the backdrop?
- Explain why the jump check is placed inside the “if touching Level” block.
- With a jump speed of 10 and gravity of −1 per frame, how high does the player rise, and after how many frames does it reach the top?
- A platform is 90 pixels above the ground. What is the smallest whole-number jump speed that reaches it?
- What happens to the player if the block change [y speed] by (-1) is removed? Explain.
- A pupil's player sometimes falls straight through a thin ledge after a long drop. Analyse the cause and give two fixes.
- Evaluate this suggestion: “Make gravity −3 and the jump speed 30 so the game feels faster.” Consider jump height, tunnelling and fairness.
Show answersHide answers
- Gravity: a rule that lowers a sprite's vertical speed a little every frame. Velocity: speed in a given direction (here, y speed). Collision detection: checking whether two things overlap, for example touching [Level]?
- Backdrops cannot be tested with touching [sprite]?; a Level sprite can. Its costumes can also hold the different levels.
- Touching the Level means the player has just landed (is on a surface). Checking the up arrow only then stops the player jumping again in mid-air.
- Rise pixels; top after 10 frames (speeds 9 down to 0).
- A jump speed of n rises pixels. n = 14 gives 91 pixels (n = 13 gives only 78), so 14.
- The y speed never changes. After a jump it stays at 12, so the player flies up off the top of the stage; without a jump it never falls, so it hangs in the air.
- Tunnelling: after a long drop the y speed is so large (for example −20) that the player moves past the thin ledge in one frame without ever touching it. Fixes: limit the falling speed (terminal velocity, for example −12), and make platforms thicker than the largest speed.
- Gravity −3 and jump 30 give a rise of pixels in 10 frames: a very fast, very high jump that may skip platforms or hit the top of the stage. Falls reach high speeds quickly, so tunnelling is likely unless a terminal velocity is added. The game would be harder to control, so less fair. Better to change values a little at a time and test.
Sources and credits
- Simulating Gravity and Platformer, Scratch Wiki contributors, Scratch Wiki, licensed under CC BY-SA 4.0. Adapted by Ganzaa.
- Scratch is a project of the Scratch Foundation, in collaboration with the Lifelong Kindergarten Group at the MIT Media Lab; it is available free at scratch.mit.edu. The block names and colours follow Scratch 3.
- Video: Code a Platformer Game, 1. The Basics, griffpatch, embedded from YouTube.
- The block diagrams, tables, worked examples, hands-on task and practice items were written by Ganzaa.
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.