1 - Introduction

Platform games (often simplified as platformer or jump 'n' run games) are a video game genre of action games in which the goal is to move the player character between points in an environment. Platformers use in jumping and climbing to navigate the player's environment and reach their goal. Levels and environments feature uneven terrain and suspended platforms of varying height that requires use of the player character's abilities in order to traverse them.

Mark your steps as done as you complete them.

done 10 points + Winter Series

2 - Create a new Arcade project

Go to the arcade.makecode.com website and create a new project.

Show: Create a new Arcade project

Create a new Arcade project using the makecode.com website.

done 5 points + Autumn Series

3 - Create your sprite

In this game you will control a sprite and move it from the start of the map, to the goal at the end.

Add the following code to your project to create your sprite and use the sprite editor to design your character.

let mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)

Show: How to create a sprite in Arcade

Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.

done 15 points + Outdoors Series

4 - Move left and right

In the game we will use the left and right buttons to move our sprite.

Add the following new block and click the + to set the vx value to 100 and the vy value to 0. We set the vy value to 0 so that up and down buttons do not move the sprite.

let mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 0)

done 15 points + Writing Series

5 - Add gravity

In a platformer game our there needs to be gravity so that the character can move and jump around the platforms.

Add the following code to make your sprite constantly fall down just like gravity.

forever(function () {
    mySprite.vy = 50
})

let mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 0)

done 15 points + Christmas Series

6 - Draw the map

Next we will draw the map that our sprite needs to go through. Our map needs the following elements:

Tiles that our sprite can walk on. These will be set as walls.
Tiles that will kill our sprite if we touch them.
A goal tile at the end that our sprite needs to reach.

Add the following 2 new blocks to your code.

let mySprite: Sprite = null
mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 0)
scene.cameraFollowSprite(mySprite)
tiles.setTilemap(tilemap`level2`)

In the map editor, set the dimensions of your map to be width 32 and height 8. Then draw your map making sure that you include the 3 elements.

done 40 points + Christmas Series

7 - Jump

Now let's program the up button to make our sprite jump.

At the moment we are forever setting the velocity y to 50 which is acting like gravity and making our sprite fall down until it touches the ground. To make our sprite jump we will set the velocity y to -50 for a short amount of time to make our sprite go up before the gravity kicks in again and pulls it back down.

Create a variable called jump and then add the following code to set it true for 750 milliseconds before setting it back to false when you press the up button.

let jump = false
controller.up.onEvent(ControllerButtonEvent.Pressed, function () {
    jump = true
    pause(750)
    jump = false
})

Then change the code in the forever block to check if we are jumping or not and to set the velocity y value.

let jump = false
forever(function () {
    if (jump == true) {
        mySprite.vy = -50
    } else {
        mySprite.vy = 50
    }
})

let mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 0)
scene.cameraFollowSprite(mySprite)
tiles.setTilemap(tilemap`level2`)

Show: How to create a variable in Arcade

In the Variables toolbox, create a new variable by clicking the 'Make a Variable' button.

Once you click this button a box will appear asking what you want to call your variable. Give it a name that reminds you what you will be using it for. For example, if you wanted to keep track of your score in a game, you would create a variable called 'score'.

done 50 points + Outdoors Series

8 - Move through the map

Now that you can move and jump, try out your map and go all the way to the end.

If you need to make any changes or corrections to your map then do them now.

done 10 points + Vehicles Series

9 - Only jump when touching ground

You may have noticed that you can keep pressing the up button and jump over and over again, even when you are in the air!

You should only be able to jump when you are touching the ground so change the on [up] button [pressed] code to the following.

controller.up.onEvent(ControllerButtonEvent.Pressed, function () {
    if (mySprite.isHittingTile(CollisionDirection.Bottom)) {
        jump = true
        pause(750)
        jump = false
    }
})

let mySprite: Sprite = null
mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 0)
scene.cameraFollowSprite(mySprite)
tiles.setTilemap(tilemap`level2`)

done 15 points + Writing Series

10 - Danger tiles

When your sprite touches the 'danger' tiles that you put in your map (for example lava tiles) your sprite will die and it will be game over.

Add the following code to detect when your sprite touches one of these and end the game.

scene.onOverlapTile(SpriteKind.Player, sprites.dungeon.hazardLava0, function (sprite, location) {
    game.over(false, effects.splatter)
})

done 20 points + Summer Series

11 - Goal

And finally let's add some code to detect when your sprite reaches the goal at the end.

Add the following code.

scene.onOverlapTile(SpriteKind.Player, sprites.dungeon.collectibleRedCrystal, function (sprite, location) {
    game.over(true, effects.smiles)
})

done 20 points + Outdoors Series

12 - Send the code to your handheld

That's it you've created your first platformer game in Arcade, have fun playing it and try adding something new into the game.

If you do have an Arcade handheld computer download the code onto it so you can play it on the go!

Show: How to send code to your Arcade game console

Give your project a name and send it to your Arcade game console (i.e. BrainPad Arcade) by following these steps:

Type "your project name" into the Project Name box.
Connect your game console to your computer using the USB cable.
Click the 'Download' button (a file called 'arcade-project-name.uf2' will be downloaded to your computer).
Open the folder on your computer where the file downloaded to.
Right click on the file.
Click Send To.
Click Arcade (or whatever your game console is listed as).

done 20 points + Emoji Series

Join our club 😃

Create your profile, earn points & badges and learn how to code!

Create Account Schools

First Platformer

This code along has finished! ⌚