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)
-
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!
-
Bringing it Together
-
Going Further