Platformer Game (Part 1)

This series of tutorials describes the creation of a platform game for the MakeCode Arcade development environment. This tutorial is based on the Jumpy Platformer game listed under the development environment.

In the first tutorial we describe what features to include for the initial level, how to create the player character and code movement, and how to create the initial level based on the design. This task is suitable for beginner coders, however it is recommended that students work through the Beginner Skillmaps first.

Step 1: Level Design

Initial platformer level design drawn on paper
Initial platformer design on paper

Design your first level on paper satisfying the following requirements

  • 32x8 blocks
  • Ground layer
  • Start position
  • End position
  • Walls and platforms
  • Collectables (e.g. coins)
  • Enemies

Step 2: Player character

  1. Create and set the sprite for the player.

    MakeCode Arcade blocks used to set the player sprite
    Set player sprite

  2. Set the movement controls for the player. The player will move left and right.

    MakeCode Arcade block used to set the player movement controls
    Set the movement controls.

  3. Set up the A button so that the player will jump when A is pressed. Velocity should be a negative number. Try -100 to start then experiment with the values once you have set up the level map.

    MakeCode Arcade blocks that make the player jump when the A button is pressed
    Jump when A button pressed

  4. Set the acceleration for the player. Try 100 to start for the acceleration and experiment when the level map is set up.

    MakeCode Arcade block used to set vertical acceleration for gravity
    Setting the vertical acceleration to represent gravity.

This block is available in Sprites under Physics. It will show as

MakeCode Arcade physics block for setting a sprite property
Set block to set physics attributes of a sprite, including velocity and acceleration.

Change x to ay.

Your “on start” code should look like the following.

Completed MakeCode Arcade blocks for setting up the player sprite and movement
Code for setting up player sprite and movement

Step 3: Building your first level

Add a “set tilemap” block at the end of the “on start” block.

MakeCode Arcade set tilemap block
Set tilemap block

Click on the tilemap to enter the tilemap editor. Change the size of the tilemap to 32x8.

MakeCode Arcade tilemap editor set to 32 by 8 tiles
Setting the tilemap size

Next, create tiles to represent the following

MakeCode Arcade tilemap editor controls for creating new tiles
Creating new tiles
  • Ground
  • Platforms
  • Start position
  • Finish position
  • Enemies
  • Coins/collectables

Create the layout of the level, adding the ground, platforms, start position, etc in the appropriate location following your on-paper design.

Initial platformer level created in the MakeCode Arcade tilemap editor
Creating the initial level

Click on the add walls button and set the ground and platforms to walls.

MakeCode Arcade tilemap editor control for making the floor and platforms solid
Making the floor and platforms solid

After closing the tilemap and returning to your code place the player on top of the start tile. The second block is necessary to get rid of the player location tile. This code should be added at the end of the “on start” block.

MakeCode Arcade blocks that set the player's starting location
Setting the starting location for the player.

Next, set a background for the level. I have selected one of the built-in backgrounds - however you could design your own.

MakeCode Arcade block used to set the level background
Setting the background

Finally, set the camera to follow the player.

MakeCode Arcade block used to make the camera follow the player
Adding a camera.