Lab 3: Build a Tiny World

Make Your Own Game · Step 3 of 5 · Tiles and collision

Our hero can move and jump, but an empty screen does not push back. A game begins to feel like a world when some places let the hero pass, some places make the hero stop, and some places can hold the hero up.

From a pixel to a world

Drawing every background pixel separately would take a long time. Games often reuse a small drawing called a tile. In this lab, one tile is exactly 8×8 POOM pixels. The 128×64 screen therefore holds 16 tiles across and 8 tiles down.

8×8 PIXELS → ONE TILE → 16×8 TILE MAP → A WORLD

A picture and a rule

The tile drawing tells POOM what that part of the world looks like. The tile rule tells the game what it means. We only need two rules for our first room:

A solid tile can become a floor when it is below the hero, a wall when it is beside the hero, or a platform when it is underneath the hero in the air. It is the same tile rule seen from a different direction.

Try it: build and test the room

Select Solid or Empty, then click or drag across the 16×8 screen. Use Left and Right to walk, press A to jump, and press B to return the hero to the starting point. The same hero you customized in the earlier labs appears here automatically.

What is collision?

Collision is the question the game asks before accepting a movement: “Would the hero’s next position overlap a solid tile?” If the answer is no, the movement happens. If the answer is yes, the hero stays at the last safe position.

TRY THE NEXT POSITION → EMPTY? MOVE → SOLID? STOP

int16_t nextX = heroX + direction;

if (!heroTouchesSolid(nextX, heroY)) {
  heroX = nextX;
}

How the hero lands

The jump from Lab 2 still changes y over time. Now, before moving downward, the game checks the tiles beneath the hero. Touching the top of a solid tile changes falling into standing.

Put your world on POOM

Send the room to Web Studio when you are ready. The generated program includes your saved walking and jumping sprites, all 128 tile choices, gravity, and the collision check.

Your world challenge

1. Place one new solid tile and erase another tile.
2. Walk into the tall wall and explain why x stops changing.
3. Jump onto the floating platform and watch falling become standing.
4. Change the platform shape and test the same jump again.
5. Send your map to Web Studio and find the 16×8 kWorld tile map.

This lesson keeps the 128×64 POOM screen, the Poom Arduino drawing and button APIs, and the customized hero from the first two labs. Its beginner-friendly collision loop is intentionally smaller than Mystic Balloon’s complete tile and camera system.