Part 2 — Platforms, a bigger world and a camera

Turn one bar of ground into a level that scrolls, with platforms to climb.

12 min read

Part 1 left you with a character on a single strip of ground. Now make it a place.

Make the world bigger than the screen

The canvas is how big the game is on screen. The world is how big the level is, and it can be much larger.

  1. Click empty canvas to select the scene, or pick it in the Scenes list.
  2. Set World width to 3840 — three screens.
  3. Leave World height at 720.

The stage now shows a wider area with the visible screen marked inside it.

Follow the player

  1. With the scene still selected, find Camera.
  2. Set Follow to Player.
  3. Set Lerp to 0.1.

Lerp is how quickly the camera catches up. 1 is rigid and makes people queasy; 0.1 feels natural; below 0.05 feels like the camera is half asleep.

Extend the ground

The ground is 1280 wide and the world is now 3840. Rather than stretching one bar, place three:

  1. Select Ground.
  2. Press Ctrl/Cmd + D to duplicate it.
  3. Set the copy's X to 1920.
  4. Duplicate again and set X to 3200.

Leave gaps between them if you want somewhere to fall — that is what makes a jump matter.

Add platforms

Generate a smaller bar for platforms so they read differently from the ground:

  1. Press , generator roundedBar, name platform.
  2. Options: { "width": 220, "height": 28, "color": "#818cf8", "bevel": true }.
  3. Add it, then double-click the tile to place one.
  4. Give it static physics, exactly like the ground.
  5. Duplicate it around the level. Vary the heights — 560, 460, 380 — so there is a climb rather than a staircase.

How far can the player actually jump?

This is worth measuring rather than guessing, because a gap one pixel too wide makes a level impossible and it is not obvious why.

  1. Press Play and jump straight up. Note roughly how high the character gets.
  2. Jump while running. That is your maximum gap.
  3. Make your widest gap about three quarters of it.

If the jump feels wrong, change jumpVelocity on the behaviour rather than moving every platform — one number instead of twenty.

A backdrop

  1. Press , generator gradientSky, name sky.
  2. Options: { "top": "#1b2a44", "bottom": "#6a5a8c", "width": 1280, "height": 720 }.
  3. Add it and place it in the scene.
  4. Set its Layer to Background.
  5. Set its Scroll factor to 0.3.

A scroll factor below 1 makes the backdrop drift more slowly than the world, which reads as distance. That is parallax.

Play it

You should be able to run right, watch the camera follow, climb the platforms and fall down the gaps. Next: give the player a reason to.