How Isometric Coordinates Work in 2D games

Isometric games often use hand-drawn 2D sprites to add depth to a game without having to deal with full 3D rendering.

In this video, I cover how it works, the math you need to render isometric sprites on the screen, and how to find the isometric tile from a screen coordinate.

0:00 Intro
0:21 Orthographic projection
1:16 Tiling a sprite
1:40 Transforming tile coordinate to screen
2:55 Accounting for sprite size
3:39 Correcting offsets
4:00 Transforming screen coordinate to tile
4:46 Adding depth
4:52 Outro

[JordanWest]

A few people have been asking for code and how to invert the matrix. Here's some (untested) code I've put together in TypeScript, although it should be similar in other languages. Hopefully this gives an idea of how the math translates to code.

[isonzo]

This is an incredible and polished explanation, going through the steps, the problems you face, and then how to solve it. It helps the viewer to reslly understand how we got to the final solution.

[woodlandcritterpunch]

This is the best type of tutorial. No fluff, no information that's potentially unnecessary, reference to where to find more information if it *is* necessary. I'd been trying to do this on my own with no help for two days (pride's a troublesome thing) and I'm glad to see it's not something super obvious that I was missing, but not daunting either. Thanks for the video

[yan-amar]

This is such a great, high quality video, hitting just the right spot between learning and reference.

[uhitsethan]

Wow, I already knew all this, but this video is EXTREMELY polished. I especially like how you went through some potential problems people might run into while doing this, such as the offset. Well done!

[dragonfire]

I can't believe that this video only has 574 views with this amazing content.

[wojtekpolska]

I love how game developers create amazing things, when dealing with hardware limitations.

isometric view was developed out of limitation, but turned out so appealing that its still used in indie games to this day

PS: great video, its very well explained, i think the possible "errors" one might encounter when creating such view did the best job at explaining things to me. Too few people show possible errors you might encounter, and just say "you type this here, or it wont work"

[fabricionascimento]

That’s the most concise and easy to understand video that I found on YouTube about isometric grids!

[MonochromeWench]

Helped develop an isometric engine about 20 years ago. The 3d nature of isometric games can be surprising. It gets real fun trying to sort non tile aligned Arbitrary sized objects for display. Ordering can get real complex real fast especially if you get cyclic dependencies between objects.

[djmouton]

You just decided to drop an amazing tutorial out of nowhere ?
I love how there's no code involved so it's applicable in any environnement we want, isometry rocks !

[gasiedu]

that wavy isometric had me hypnotised, great vid!

[Jomity]

I'm glad to see my linear algebra class is paying off now... haha

But, this is an amazing video!! (almost even a tutorial it's so thorough)

[miniasriel]

I've been out of typical schooling for a while, and honestly this made me remember how much I enjoyed math and liked being able to see how numbers work when previously not being able to work it out. Lovely video - very informative in more ways than its original purpose, overall edited and make concisely, along with a nice calming voice leading you through aptly.
An enjoyable experience - cheers.

[mrtaufner]

I don't know why I was suggested this, but it is certainly a great explanation.

Reminded me of why I hated matrixes so much, but still, it was pretty simple to understand

[SaladDongs]

I'm going to go ahead and call this the "perfect" illustrative video. Sentences spaced out perfectly, tone of voice is clear and just right, visuals are top-notch, language is simple enough to be understood by a layman but not dumbed down. No awkward pauses, background music not intrusive, the visualization of the problems one might face is really, really smart. The video is quite short but concentrated. I can't find a single flaw. I'm definitely going to study this next time I try to explain something whether in class or otherwise. Have a great day!

[zmbp]

Wow, I vaguely knew the translation before, but never understood why. This so perfectly illustrates the problem and solution!

[VoidFame]

This is a great video. Just showing the process of trial and error very quickly with no fluff you were able to get through the topic very quickly and instructively.

The only slight error is the term: 1/(ad-bc) is not the determinant, but the reciprocal of the determinant. It might seem a bit nitpicky, but it would be like calling 1/2 the number "2"

[jyke]

I'm currently working as a teaching at a summer camp as Teaching Assistant and love how simply you explained isometric coordinates with linear algebra. I would love to teach it to my kids, but the camp is only three weeks long, and we just introduced objects recently, but maybe if time permits, I can at least give them the formula and show them how it works in the final week.

[seenPunktSee]

I just love that this video perfectly matches my youtube search and with such quality content. thanks man

[nanopi]

I saw it done a different way before. Take a 2D grid, but every odd number of Y is shifted to the left half a space. When you want to move a particular direction, you'd want to check if the current Y position is odd or even and then decide whether or not to change the X value as well as decide whether to increment or decrement the Y value.