Advanced
-
BFS — Breadth-First Search
Time to give your characters some serious brains! So far, your hero has been pretty… let’s say “directionally challenged.” Tell them to go left, they go left - even straight into a wall! But what if they could think for themselves and find clever paths around obstacles?
Welcome to the world of pathfinding - the AI magic behind every smart enemy in RTS games, every helpful companion in RPGs, and every tower defense unit that knows exactly how to reach their target. You’re about to implement the same algorithms that power characters in Starcraft, Age of Empires, and countless other games!
-
Mouse to Move
Put down the keyboard and click anywhere on the map. The hero walks there. Click-to-move is the movement style behind countless RPGs, strategy games, and point-and-click adventures. Let’s build it!
Loading editor…Notice the hero steps from tile center to tile center - no stopping halfway. That’s the key characteristic of tile-based movement: the hero is always perfectly aligned to the grid.
-
Dijkstra's — Terrain Costs
What if your hero doesn’t just want the shortest path — they want the cheapest one? A battlefield isn’t all flat floors. There’s mud that slows you down, roads that speed you up, rivers you’d rather not wade through. Breadth-First Search treats every tile the same. Dijkstra’s algorithm knows better.
Edsger Dijkstra published this algorithm in 1959 — originally to find the shortest driving route between two Dutch cities. Six decades later, it’s still powering pathfinding in games from Civilization to Dwarf Fortress to your next project.
-
Isometric View
Tilt your world 45 degrees and you get the iconic look behind Pokémon, Age of Empires, and Diablo. Isometric view makes a flat tile grid feel like a real 3D space. Best of all, it’s just two lines of math on top of everything you’ve already built:
Loading editor…Walk north of the pillar - it covers you. Walk south - you cover it. All game logic (movement, collision) runs in the flat world grid. Only the final render step converts to the diamond view.
-
Greedy Best-First
Ready to supercharge your AI? While breadth-first search guarantees the shortest path, it can be painfully slow on large maps - exploring EVERYWHERE before finding the target. What if your AI could be smarter and guess which direction to search first?
Enter Best-First Search - the algorithm that adds intuition to pathfinding! Instead of blindly searching in all directions, your AI will make educated guesses about where the target might be, dramatically speeding up path discovery.
-
Isometric Mouse
You know how to move in isometric. You know how to click-to-move. Now combine them. The tricky part isn’t the movement — it’s figuring out which diamond tile the mouse is actually over:
Loading editor…THE CHALLENGE 🤔
In the previous mouse tutorial, converting a click to a tile was simple division:
-
A*
This is the one. Every pathfinding tutorial builds toward this moment. A* (pronounced “A-star”) is the algorithm used in more shipped games than any other — from Age of Empires to Stardew Valley to AAA blockbusters. It’s optimal like Dijkstra’s and fast like Greedy Best-First, because it’s actually both of them fused together.
The insight is elegant: Dijkstra’s tracks the real cost from start to each tile (
g). Greedy Best-First estimates the remaining cost to the goal (h). A* simply adds them together:f = g + h. Prioritise byf, and you’re guaranteed to find the shortest (or cheapest) path while exploring far fewer tiles than either algorithm alone. -
Isometric Scroll
A 5×5 isometric map is a proof of concept. A real game needs room to breathe. Combine the World Container from the scrolling tutorials with the isometric transform and you get a large diamond world that follows the player:
Loading editor…Notice the diamond shape visible against the dark background at the edges. That’s the one catch with isometric scroll — the viewport is rectangular but the world is diamond-shaped.
-
Bringing it Together
Four algorithms. One demo. Time to put everything together into something that actually feels like a game.
You’re the intruder. You have a 5-second head start before the guard wakes up. The guard uses A* to track your last known position — not your current position, because fair is fair and omniscient guards aren’t fun. Break line of sight, hide in the shadows, and get to the exit before you get caught.
-
Rotate Hero
Ready to make your hero feel more alive? So far our character has been limited to walking in just four directions - up, down, left, and right. That’s fine for a retro RPG, but what if you want to create a top-down shooter, a racing game, or a spaceship adventure? Time to unlock the magic of 360-degree movement!
In this tutorial, you’ll learn how to rotate your hero and move in any direction using the power of trigonometry (don’t worry, it’s easier than it sounds!). By the end, your character will move like they do in games like Asteroids, Hotline Miami, or any twin-stick shooter.
-
Going Further
A* will take you a long way. Most shipped tile-based games use it and never need anything else. But pathfinding is a rich field, and knowing what’s beyond the horizon helps you recognise when you’ve outgrown your tools.
This chapter is a map of that territory — less code, more concepts, with enough implementation detail to get you started if you want to explore.
-
Rotate Background
Ready for some serious game magic? In the last tutorial, your hero learned to rotate and move in any direction. Now we’re taking it to the next level: the world itself will rotate around your hero!
This technique creates those mind-bending effects you see in space games like Asteroids, racing games with spinning tracks, or puzzle games where the entire level rotates. Your hero stays perfectly centered while the universe spins around them - it’s like being the center of your own personal tornado!
-
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:
-
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.
-
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.