A Side-Scrolling World
Platformer mechanics built on top of the World One foundation. Jumping, gravity, ladders, moving platforms, enemies, combat, and slopes — everything needed for a side-scrolling action game.
Assumes familiarity with the basics from World One.
Posts
- Jumping
- Clouds
- Ladders
- Moving Tiles
- Enemy on Platform
- Shoot Him
- Depth
- Slopes
- Scrolling
- More Scrolling
- Bringing it Together
- Going Further
-
Jumping
This tutorial switches from top-down to side-scrolling view. The hero moves left and right with arrow keys and jumps with spacebar. The jump mechanic is built on two properties: an initial upward velocity and a per-frame gravity that pulls the hero back down.
Loading editor…Jump Physics: Making It Feel Right
In this coordinate system, moving up means decreasing Y. Pressing spacebar sets
velocityYto a negative value like-15pixels per frame. Each frame after that, gravity incrementsvelocityYback toward positive (downward): -
Clouds
Cloud platforms are one-way surfaces: the player can jump through them from below, pass through them from the sides, but lands on top when falling. This tutorial adds that behaviour to the jumping system from the previous tutorial.
Loading editor…How Cloud Platforms Work
A solid tile blocks movement from every direction. A cloud tile applies collision only when the player is falling downward: the player can jump through from below, pass through from the sides, but lands on top when descending.
-
Ladders
Ladders let the player climb vertically through the level using the up and down arrow keys. While climbing, gravity is disabled and the player snaps to the ladder’s centre column. This tutorial adds that system on top of the jumping mechanics from the previous tutorials.
Loading editor…Ladder Types
There are four common ladder variants, and the choice affects level design possibilities:
-
Moving Tiles
Moving platforms appear in most platformers — the swinging platforms in Donkey Kong Country, the cloud lifts in Mario, the crumbling bridges in Crash Bandicoot. They transform a flat level into a dynamic obstacle that rewards timing. Here’s how to build them.
Loading editor…Before we start coding, let’s agree on the rules. Moving platforms in this tutorial work like cloud tiles - the hero can only land on them from above. Here’s what we need to handle:
-
Enemy on Platform
A basic wall-bouncing enemy will walk off platform edges and fall. A platform-aware enemy checks for ground ahead before stepping forward and turns back if there is none. This tutorial adds that edge-detection logic to enemy movement.
Loading editor…Random Direction Changes
A
turnChancepercentage applied each frame creates variation between enemy types without adding new AI logic: -
Shoot Him
Projectiles are a common interaction mechanic — the player fires in the direction they last moved, and bullets that reach an enemy remove it from the level. This tutorial adds a bullet system to the side-scrolling platformer from previous tutorials.
Loading editor…Bullet Data Structure
A bullet is a plain object with a position, a velocity, a size, and a sprite. The size matters because collision is AABB (axis-aligned bounding box), not circular distance — two rectangles overlap when neither axis is separated:
-
Depth
Walk below a pillar and you’re in front of it. Walk above and the pillar covers you. That’s depth - a 2D trick that makes your top-down world feel solid and three-dimensional. Try it:
Loading editor…THE ILLUSION
Top-down games use a simple rule: things lower on the screen are closer to the viewer. Imagine looking down at a scene from above. A character further north (higher up on screen) is physically further away, so objects in the south overlap them.
-
Slopes
Slopes replace the hard tile edges with diagonal surfaces the player slides up and down. The visual is a triangle tile; the physics are a surface height that changes linearly across the tile’s width.
Loading editor…Slope Tile Types
Only two diagonal variants are needed to build any terrain shape:
-
Bringing it Together
Each tutorial in this series introduced one mechanic in isolation. Here they run together: gravity, cloud platforms, moving tiles, enemies with edge detection, projectiles, and a scrolling camera. The goal is not a polished game — it’s a working skeleton that demonstrates how the systems compose without fighting each other.
Loading editor…Controls: arrow keys to move, Space or Up to jump, Shift to shoot.
-
Scrolling
Your world is bigger than one screen. The camera follows the hero, and the whole world slides past — that’s the technique behind every side-scroller from the original Super Mario Bros to Hollow Knight.
Loading editor…Notice that the hero stays near the center of the screen while the world slides around them. That’s the illusion of scrolling - the hero isn’t really moving on screen, the world is.
-
Going Further
The combined game from the previous tutorial is functional but raw. This page covers the extensions that separate a working prototype from a game that feels good to play. Each section is self-contained — add the ones that fit your design.
Variable Jump Height
Fixed-height jumping feels mechanical. In most platformers, releasing the jump button early cuts the jump short. This gives players fine control over arc height and makes jumping feel responsive rather than automatic.
-
More Scrolling
The camera from the previous tutorial has one flaw: walk to the edge of the map and the camera keeps going, revealing the empty void beyond. Every great platformer stops scrolling at the map boundary so the world feels solid and complete. Let’s fix it!
Loading editor…Walk to a corner of the map - the camera stops cleanly at the edge and the hero keeps moving. That’s the
clamp. Two lines added toupdateCamera()and the void disappears.