Optimization
-
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.
-
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.
-
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:
-
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.
-
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.
-
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.