Tile Based Worlds
The systems behind tile worlds —
explained by building them.
A structured tutorial series for developers who want to understand 2D game rendering properly — not just copy it. Each world builds on the last, taking you from a grid and a character through pathfinding, procedural generation, lighting, and physics. Live, editable demos throughout.
Inspired by the Tonypa tile-based game tutorials — the most influential game dev writing on the early web — and rebuilt from scratch for modern JavaScript and PixiJS. The same depth, none of the Flash.
Why TypeScript and PixiJS
PixiJS sits between the raw HTML Canvas API and a full game engine. It handles asset loading, sprite batching, and the render loop without making decisions about how your game is structured. That balance is intentional: enough abstraction to stay focused on concepts, not enough to obscure them.
A game engine is a reasonable choice for shipping a game. For learning how games work, it solves the problems before you understand them. The systems in these tutorials — tilemaps, collision, pathfinding, lighting — are implemented directly, so the mechanism is visible at every step. Once you understand a concept, you can carry it into Python, Rust, or any environment you work in. The ideas transfer. The code doesn’t need to.
What you'll actually learn
Rendering fundamentals
Grid systems, camera, layers, depth sorting, isometric projection.
Movement and physics
Collision, gravity, slopes, platforms, and character controllers.
Pathfinding algorithms
BFS, Dijkstra, A*, Flow Fields, JPS — with animated step-throughs.
Procedural generation
BSP, cellular automata, noise functions, biome generation.
The worlds
World 01
World One
Grid, movement, collision, interaction, and enemies. The foundation everything else builds on.
World 04
A Thinking World
Pathfinding foundations — BFS, Dijkstra’s, Greedy Best-First, and A* with visual step-throughs.
World 05
A Smarter World
Advanced pathfinding — Flow Fields, JPS, Bidirectional A*, D* Lite, HPA*.
World 06
A Random World
Procedural generation — room placement, BSP, cellular automata, noise, biomes.
World 07
A Darker World
Lighting — raycasting, FOV, shadow casting, fog of war, day/night cycles.
World 08
A Living World
Physics simulation — gravity, water flow, falling sand, destructible tiles.