Game Arcade Inventor Project
Normal
60 mins
485 points
What you need:
  • Computer/laptop

First Platformer

Create your first platform game in Arcade!

This message will be visible to everyone. Send

    This code along has finished! ⌚

    You can watch it back by playing the video!

    The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!

    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.


    2 - Create a new Arcade project

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

    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)
    

    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)
    


    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)

    6 - Draw the map

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

    1. Tiles that our sprite can walk on. These will be set as walls.
    2. Tiles that will kill our sprite if we touch them.
    3. 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.



    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`)
    



    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.


    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`)
    

    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)
    })
    


    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)
    })
    


    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!


    Join our club 😃

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

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more