Tutorials
In-depth tutorial series on building tile-based games with JavaScript and PixiJS. Each series builds toward a complete, playable game.
The World Series
Start with World One. Everything else is self-directed — pick the world that excites you.
World One
The foundational series. Top-down tile world: grid, movement, collision, interaction, and enemies. Start here.
A Side-Scrolling World
Platformer mechanics — jumping, gravity, ladders, moving platforms, enemies, combat, and slopes.
A Tilted World
Isometric rendering, depth sorting, mouse-driven movement, and camera rotation.
A Thinking World
Pathfinding foundations — BFS, Dijkstra’s, Greedy Best-First, and A*.
A Smarter World (coming soon)
Advanced pathfinding — Flow Fields, JPS, Bidirectional A*, D* Lite, and HPA*.
A Random World (coming soon)
Procedural generation — room placement, BSP, cellular automata, noise, and biomes.
A Darker World (coming soon)
Lighting and atmosphere — raycasting, FOV, shadow casting, fog of war, and day/night.
A Living World (coming soon)
Physics and simulation — gravity, water flow, falling sand, destructible tiles, and explosions.
A Deeper World (coming soon)
2.5D perspective — stacked sprites, wall extrusion, height maps, and oblique projection.
A Talking World (coming soon)
RPG systems — inventory, crafting, stats, turn-based combat, dialogue, quests, and levelling.
A Shared World (coming soon)
Multiplayer and networking — WebSockets, authoritative server, prediction, and lag compensation.
Craft Series
Reference material that makes any game better. Grab these when you need them.
Rich Media (coming soon)
Sprites, spritesheets, sound, and the static asset pipeline.
Game State (coming soon)
Menus, title screen, pause, game-over, HUD, preferences, save/load, and map select.
Map Editor (coming soon)
In-browser level building — paint/fill, undo/redo, autotiling, Tiled import, and share via URL.
Performance (coming soon)
Dirty rects, spatial hashing, chunked worlds, object pooling, ECS, and GPU instancing.
-
World One
The foundational series. Build a top-down tile world from scratch — grid, movement, collision, interaction, and enemies.
No prior game development experience needed — just some familiarity with JavaScript.
The Foundation
- Why Tiles? - Introduction to tile-based games
- Map Format - How to store tile maps
- More Maps - Working with different map types
- Rendering a Map - Drawing your world
- The Hero - Adding a player character
- Keys to Move - Player movement
- Hit the Wall - Collision detection
Making a Game
- Getting Items - Collectibles and pickups
- Open the Door - Multi-room worlds
- Locked Doors - Keys and locked doors
- Pushing Tiles - Tile puzzles
- Stupid Enemy - Basic AI
- Bringing it together - Series showcase
- Going further - Optional extras
Originally inspired by Tonypa’s tile-based tutorials, modernized for JavaScript and Pixi.js.
-
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
-
A Tilted World
Isometric rendering from the ground up. Mouse-driven movement, depth sorting, camera rotation, and the maths behind projecting a 3D-feeling world onto a flat screen.
Assumes familiarity with the basics from World One.
Posts
- Mouse to Move
- Isometric View
- Isometric Mouse
- Isometric Scroll
- Rotate Hero
- Rotate Background
- Bringing it Together (coming soon)
- Going Further (coming soon)
-
A Thinking World
Pathfinding foundations — from simple flood-fill search through to A*.
Demo: A guard/intruder stealth game where each algorithm visibly changes guard behaviour.
Posts
- BFS — Breadth-First Search
- Dijkstra’s — Terrain Costs
- Greedy Best-First
- A*
- Bringing it Together
- Going Further