Now we'll add collision blocks so our player can stand on platforms and walk on the ground.

What Are Collision Blocks?

Collision blocks are invisible rectangles that define where the player can and cannot move. We'll draw them on our map to create:

• Ground surfaces — The floor the player walks on

• Platforms — Surfaces the player can jump onto

• Walls — Boundaries that block horizontal movement

Using Tiled Map Editor

Instead of manually coding block positions, we'll use Tiled — a free map editor that exports collision data as JSON:

1. Create a new map — Match your background dimensions (divided by tile size)

2. Add an object layer — Name it "collisions"

3. Draw rectangles — Place collision blocks where platforms exist in your background

4. Export as JSON — This gives you coordinates for every collision block

Tiled saves hours of manual positioning and makes it easy to update your level design.

Importing Collision Data

Parse the exported JSON and create collision block instances for each rectangle. Scale the positions to match your canvas scale factor.

Collision Detection

For each frame, check if the player's next position would overlap with any collision block. If so, stop movement and position the player at the block's edge.

With collision blocks in place, your player can now run and jump across your level design.