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. gist.github.com/jordwest/8a12196436ebcf8df98a2745251915b5
Thanks, the inversion was tricky to implement from the formula. The one thing I added was rounding the results from to_grid_coordinate(), but besides that it worked like a charm. Thanks for the interesting video. EDIT: spoke too soon, for some weird reason the Y from to_grid_coordinate() is off by 1, and I don't know why. I can hard code the fix, but it's ugly. Also, the multipliers on the code are all 0.5 and in the video some were 0.25. It works but the mismatch is disconcerting. I tried to change the numbers to match the video and the results are crazy.
@@rafaelrosafu If something's stored as an int somewhere and it's being divided, it will be rounded which could explain the error consistently being off by 1
@@rafaelrosafu Hmm not sure about the Y being off by one, but the 0.25 is after halving the iy and jy (to account for sprite size: 0.5 * 0.5 = 0.25). In the code above I left it unsimplified for clarity, but I suppose in doing that made it more confusing haha.
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.
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
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!
@@marianmotorina chillax dude I said "i knew all this" to emphasize that I still got something from the video, even if the concepts were familiar. this is a compliment
@@UndeadAlv f-four hours ago??? Is that a /j as in u came across it and it had 37k views as it did for me (and abt 1/10th as many likes)? Or did it seriously explode in _four hours??_
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"
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.
That sounds fascinating, I wonder at what point is it easier to just go to 3D? I guess there's always a tradeoff, especially if you want hand drawn sprites instead of rendering triangles.
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 !
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!
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"
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.
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.
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
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.
This is great timing! I was just thinking of making an isometric adventure game of my own. Praising the RUclips algorithm aside, your scripting and editing is great and I feel like you gave the perfect amount of information. Instant subscribe :)
Holy shit, I've been trying to find the name of Mystic Towers for years, knowing that I played a game like it as a child. I couldn't remember the name or even exactly what it looked like and here you are just casually showing a clip from it with its name and release year! The search is finally over, thank you!
I've always personally hated isometric games mostly just due to how the cardinal directions are locked to diagonals (I'm an up, down, left, right kinda guy what can I say) but I've still always appreciated what they set out to achieve, especially after coming to learn software and game development. This was a really nice explanation and very well put together video! :D
3:35 how are the occlusions being handled here? Like when 2 sprites partially overlap how do you determine which one is drawn in front when they don't have z coordinates?
Excellent video! I love isometric view too! it's definitely not the best choice for all genres, but some genres do benefit greatly by using this view like tactics, strategy (RTS and TBS), RPG and farming, even some racing games like Rock n' Roll Racing have done amazing things using this view.
Sorry to mess up the 420 comments but I thought this was like a 3B1B video or something in how it was so well done. Absolutely phenomenal video and I can guarantee that this channel will grow! Wow that was phenomenal!
@@JordanWest Usually people mean turning it into code. Sometimes its easy to follow a concept but applying it can be difficult. A small tutorial example of turning this into a script and how each part works would be good
Dear kind Sir. I am nowhere near understanding the math your are suggesting here, as i have any sort of math knowledge myself. But through the whole video, i got the feeling that i could understand it if i learn a bit more. You explained it super super well. I am at the point of being curious to math
It's relatively easy to apply a perspective transformation when rendering each sprite to also get a perspective correct view rather than having to rely on isometric projection. This is actually very easy to do using modern graphics cards as all the perspective scaling on each sprite instance can be done on the card with little to no impact on overall performance. That said, this is a pretty solid explanation on how to do isometric tiling and very well presented.
"easy to do using modern graphics cards as all the perspective scaling" This technique was invented more than 40 years ago, when the developers fought for every cycle of the CPU. There was no CPU time for perspective transformation of the sprites and of course there were no hardware accelerators for that.
@@tcfs Indeed but the technique can now be used to produce a fully perspective correct projection. All you need to do is add perspective transformation when calculating the points and the graphics card will do the rest. I am well aware of the issues with perspective calculations back in the day I was in the game industry back in the 8 bit days. Even today you wouldn't want to do perspective calculations per pixel on the CPU.
honestly this is really good content. even though the aim is supposed to be informative, this is really entertaining. excellent script writing and visuals! would expect this type of content from a 1million subscriber youtuber. now its time to get you there.
Beautiful visualization and clear explanation! I am so happy to see an application of the math that I just learned in the linear algebra course at my university. Really cool!
Good stuff; but how do we create the animation you made in the video? What did you make it in? I get the math but now talk about how to quickly and easily generate relevant graphics for RUclips videos based on said math.
In this video I used JavaScript and webgl, plus Blender for the grid lines. You could pick up any game engine, graphics library, 3blue1brown’s math vis tool, or motion graphics app. I can’t say it was quick and easy, though.
There is also the consideration of draw order. You don't want to simply iterate through x, y, and z in nested loops, or tiles will overlap incorrectly. You'll have tiles drawn in front of other tiles that won't make sense. You first need to draw the tile at (0, 0, 0), and then you want to draw all three tiles that are in front of that. Then all six in front of that, and so on. Imagine a visual plane starting at the bottom corner of the (0, 0, 0) tile, and moving toward your eyes. It will intersect triangular sets of tiles of increasing size. Notice that the tiles in each set share the same SUM of their coordinates. The three tiles in front of (0, 0, 0) are (0, 0, 1), (0, 1, 0), and (1, 0, 0). We can use this to our advantage. First, add the dimensions of the map together, so if you have an X that can range from 0 to 8, a y that goes from 0 to 6, and a z that goes from 0 to 10, the sum is 24. Now we'll use a pilot value to iterate through the positions of the plane as it goes from far to near. Next, iterate through the z coordinate. Then the y coordinate, but cap it using the already existing z iteration. Then produce a resulting x coordinate using what we know about the sum property. It should look like this: for plane = 0 to x_max + y_max + z_max for z = 0 to z_max for y = 0 to plane - z // y can't produce a sum greater than the plane value x = (plane - z) - y // x is now determined easily by z and y, since we know the sum if x > x_max or y > y_max then continue // don't go outside the map There you go. The resulting loops will iterate through the map in correct draw order, and never draw something over top of what it should be behind.
I love the video, and I've watched it a few times already. One criticism I have is about the section where you describe how to go from screen coordinates to isometric. It took me a while to wrap my head around how it works (and I had to watch 3b1b's video as well). It would have been great to have a more detailed explanation or breakdown of how the transformation matrix works. Oh, and I love the simple art style and how you showed the waves at the end.
I actually recently went about and made my first little isometric thing, and the ratios needed I figured out by simply realizing that what you're drawing is not a cube or square, but looking at it flatly, what you do is you draw a hexagon, with 3 separate colors on different sections.
Wow, great video! I wish I found this a year ago instead of spending ages working all of this out (admittedly in a less elegant way) by myself. A question though, how do you calculate world-space coordinates from screen-space coordinates when the tiles have a nonzero z (height)? After a lot of frustration I've resorted to looping through every tile, calculating the screen-space coordinates, and seeing if the mouse intersects them, however this is inefficient.
Something completely unrelated: I had played and loved a game as a kid. But I couldn't remember what it was called. I've searched for days to no avail. Then I gave up and almost forgot about it. Until ... months later, I stumble across this video and the game is right there in the intro. Thank you! It was Mystic Towers :-)
Haha awesome! You know it took me ages to find the name of that game too, I have some really visceral memories of playing as a kid that with my best friend.
@@JordanWest Yeah, same with me. I played it with my cousin on my very first computer or maybe my father's computer, I don't exactly remember. Being ages ago didn't exactly help in rediscovering. How did you find it?
THANK YOU! I remembered playing Mystic Tower on my aunt's computer when I was small. I did not know how it was called back then and I've been struggling to know what game it was for years at this point. Now I know so I can try the game as an adult.
Wipeout 2048 on the Playstation Vita also does this on the main menu with some really beautiful trickery to make it look like a true 3d infinite grid of triangles. It is one of the most clean, minimalistic and lovely interfaces I've ever seen in a game.
Yeah, never realized that 3d techniques can apply right off the bat. I remember building some isometric based grids (with a cursor) for some school project, but i found the formula by simple trial and error (and observation). It did work. But the inverse 3d transform is so much more elegant.
It's 10am, I haven't had enough coffee to understand this, but I think this was very informative! When I'm more awake I'll have to rewatch to understand that math.
I’ve made isometric games before, but I had to click on this video, interested to what you had to say about coordinates. I know I must have come up with some system, but it was probably how I laid them out in the first place: diagonally, instead of straight left to right rows. That way, I would never need a function for fancy translations. It’s still fascinating to see your approach though, and I don’t see it as any less superior to mine. Awesome video.
It was on my suggestion list of RUclips but it turned out amazing I really love it and it got an idea to try with different things, thank you. Plus I like and subscribed.
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.
gist.github.com/jordwest/8a12196436ebcf8df98a2745251915b5
Thanks, the inversion was tricky to implement from the formula. The one thing I added was rounding the results from to_grid_coordinate(), but besides that it worked like a charm. Thanks for the interesting video.
EDIT: spoke too soon, for some weird reason the Y from to_grid_coordinate() is off by 1, and I don't know why. I can hard code the fix, but it's ugly. Also, the multipliers on the code are all 0.5 and in the video some were 0.25. It works but the mismatch is disconcerting. I tried to change the numbers to match the video and the results are crazy.
@@rafaelrosafu If something's stored as an int somewhere and it's being divided, it will be rounded which could explain the error consistently being off by 1
@@metallsnubben good point, I'll double check. thanks.
It now has 101K views
@@rafaelrosafu Hmm not sure about the Y being off by one, but the 0.25 is after halving the iy and jy (to account for sprite size: 0.5 * 0.5 = 0.25). In the code above I left it unsimplified for clarity, but I suppose in doing that made it more confusing haha.
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.
Well said!
I agree!
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
That's awesome, so glad it helped :)
I especially value such vibeos!
This is such a great, high quality video, hitting just the right spot between learning and reference.
While remaining entergaging (/hj) as well!
(the /hj is the ironic use of the term, but the genuine meaning behind it)
(tho yk. ik that effective educational content is also entertaining haha. it's also very pretty~)
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!
@@marianmotorina chillax dude
I said "i knew all this" to emphasize that I still got something from the video, even if the concepts were familiar. this is a compliment
@@marianmotorina ratio bozo
@@kingbroseph9773 lol he really did go for it after a literal year
I can't believe that this video only has 574 views with this amazing content.
Thanks, and here I am amazed it's even getting a hundred views :)
@@JordanWest you deserve much more than that
I’m still amazed
I’m sure it will blow up at some point
@@UndeadAlv f-four hours ago??? Is that a /j as in u came across it and it had 37k views as it did for me (and abt 1/10th as many likes)? Or did it seriously explode in _four hours??_
@@something-from-elsewhere well, we are all here right now
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"
That’s the most concise and easy to understand video that I found on RUclips about isometric grids!
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.
That sounds fascinating, I wonder at what point is it easier to just go to 3D? I guess there's always a tradeoff, especially if you want hand drawn sprites instead of rendering triangles.
this just makes me think of what a nightmare chris sawyer must've had with rollercoaster tycoon
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 !
that wavy isometric had me hypnotised, great vid!
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)
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!
You just tricked 35 thousand people into learning change of basis good job
Got 'em
Almost 800 thousand now
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"
Ah good catch, thanks
you're the type of guy to correct Albert Einstein, and be right
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.
I just love that this video perfectly matches my youtube search and with such quality content. thanks man
I love that your search perfectly matches my video :) glad it helped!
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.
I like how you show the problems you could face before getting to the completed code, that gives a lot of insight on this sort of thing
Wow, I vaguely knew the translation before, but never understood why. This so perfectly illustrates the problem and solution!
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
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.
This video is exactly what I needed! I’m working on an isometric project and was having trouble with the tile picking formula. Can’t thank you enough!
RUclips needs more videos like this and you deserve way more views.
Thanks!!!
That was a gorgeous piece of education you just put together. Bravo!
This is great timing! I was just thinking of making an isometric adventure game of my own.
Praising the RUclips algorithm aside, your scripting and editing is great and I feel like you gave the perfect amount of information.
Instant subscribe :)
I loved this video! It's a simple and quick explanation on how it works and leaves me satisfied. Great work!
Holy shit, I've been trying to find the name of Mystic Towers for years, knowing that I played a game like it as a child. I couldn't remember the name or even exactly what it looked like and here you are just casually showing a clip from it with its name and release year! The search is finally over, thank you!
Bro i need more from you, the quality is top notch. Keep up the absolute amazing work
Really underrated video, it tells you enough to understand whats going on but not so much that you feel overwhelmed.
I only understood about half of this video but it's already answered a lot of questions I had about 2.5D games.
This is wonderful, thank you for the clean explanation and resources.
This is an amazing resource for me! thank you for making such well a explained video, i'm in your debt!
Thanks for the kind words, glad you found it helpful!
I've always personally hated isometric games mostly just due to how the cardinal directions are locked to diagonals (I'm an up, down, left, right kinda guy what can I say) but I've still always appreciated what they set out to achieve, especially after coming to learn software and game development. This was a really nice explanation and very well put together video! :D
I've been struggling the whole week and only found this video now. Thank you !
I’ve tried making isometric stuff before, but this explains its EXTREMELY WELL. Thank you!
what an elegant explanation and visuals. great job Jordan!
this one of my favorite videos of all time. It combines everything I love into one video. Applauds to you jordan! 👏 👏
Thank you.
Completely over my head but I still found it fascinating. Now I know why I never got into gaming design.
3:35 how are the occlusions being handled here? Like when 2 sprites partially overlap how do you determine which one is drawn in front when they don't have z coordinates?
In this animation the sprites are simply rendered from back to front, left to right. Often you can get away with sorting by the screen y coordinate
@@JordanWest oh *nice*
Excellent video! I love isometric view too! it's definitely not the best choice for all genres, but some genres do benefit greatly by using this view like tactics, strategy (RTS and TBS), RPG and farming, even some racing games like Rock n' Roll Racing have done amazing things using this view.
This is really good edutainment. I hope your channel soars Jordan. This is the kind of content modern RUclips needs more of.
Thank you so much! I was hoping to find a good way to explain how isometric projection works for making a tactical rpg fangame
Oh GOD that video is so good! Thank you a lot, Jordan! Always wondered how to do this effectively
absolute godly tutorial, very detailed and dynamically useful
This is a fantastic video! I am working through this to render an isometric field step by step. Incredibly lucid description. Thank you!
Sorry to mess up the 420 comments but I thought this was like a 3B1B video or something in how it was so well done. Absolutely phenomenal video and I can guarantee that this channel will grow! Wow that was phenomenal!
this is extremely high quality and straightforward. I am amazed.
This is such a great video, your channel deserves a lot more attention!
in 2 minutes, this makin me feel inspired to make a new iso-game. this is the ideal youtube video :) a quick dose of motivation
I would love to see this applied in a programmatical sense in developing a map in-game! Thanks so much this is really awesome.
Thank Matt, do you mean converting the math into code? Or going deeper into the process of building a map from isometric coordinates?
@@JordanWest Usually people mean turning it into code. Sometimes its easy to follow a concept but applying it can be difficult. A small tutorial example of turning this into a script and how each part works would be good
Holy cow that was so cool explained. Even with such easy task, each step error explanation with showcase! Wow
Dear kind Sir.
I am nowhere near understanding the math your are suggesting here, as i have any sort of math knowledge myself. But through the whole video, i got the feeling that i could understand it if i learn a bit more. You explained it super super well.
I am at the point of being curious to math
It's relatively easy to apply a perspective transformation when rendering each sprite to also get a perspective correct view rather than having to rely on isometric projection. This is actually very easy to do using modern graphics cards as all the perspective scaling on each sprite instance can be done on the card with little to no impact on overall performance. That said, this is a pretty solid explanation on how to do isometric tiling and very well presented.
"easy to do using modern graphics cards as all the perspective scaling"
This technique was invented more than 40 years ago, when the developers fought for every cycle of the CPU. There was no CPU time for perspective transformation of the sprites and of course there were no hardware accelerators for that.
@@tcfs Indeed but the technique can now be used to produce a fully perspective correct projection. All you need to do is add perspective transformation when calculating the points and the graphics card will do the rest.
I am well aware of the issues with perspective calculations back in the day I was in the game industry back in the 8 bit days. Even today you wouldn't want to do perspective calculations per pixel on the CPU.
This channel looks like it's gonna blow up soon, and I'm all here for it :)
Awesome tutorial, and I love the presentation style.
Immediate like for this channel. You are explaining like a boss!
Incredible, i love content that shows how maths apply in the context of programing.
Amazing content :) can’t wait for your channel to blow up. Thanks for the good work
honestly this is really good content. even though the aim is supposed to be informative, this is really entertaining. excellent script writing and visuals! would expect this type of content from a 1million subscriber youtuber. now its time to get you there.
This is the single most useful isometric tutorial I've ever seen. I will definitely be referencing this a lot.
This is an amazing video, great job! Love the visualization and maths explained.
I hope you get more subscribers. you seem like a good indie dev
I'm so happy the RUclips algorithm recommended your video to me. I've liked and subscribed!
Beautiful visualization and clear explanation!
I am so happy to see an application of the math that I just learned in the linear algebra course at my university. Really cool!
Awsome content!!! Keep it up! :D Really well explained, love the fact you showed how it would look like in each step! Kudos!
Amazing video. And I always being amazed how linear algebra has so many uses in video games and multimedia in general
I got lost a bit at the selecting a cube part, but this is the first time I’ve actually understood coding!
U mean math.
Coding is writing codes and it is often used in programming which is composed of DS & Algorithm, CS constructs and coding.
@@rup7591 No wonder I understood it! I love math, my mistake
I will definitely need this when I start programming soon
Thank you so much
i love the explanation, I'm a CS student and your video helped me finally understanding reversed matrixes!
Good stuff; but how do we create the animation you made in the video? What did you make it in? I get the math but now talk about how to quickly and easily generate relevant graphics for RUclips videos based on said math.
In this video I used JavaScript and webgl, plus Blender for the grid lines. You could pick up any game engine, graphics library, 3blue1brown’s math vis tool, or motion graphics app. I can’t say it was quick and easy, though.
This was a great rundown on isometric games setups ...
What a great and clear explanation. One excellent example of how math DO help in programming (for those who claim the opposite)
There is also the consideration of draw order. You don't want to simply iterate through x, y, and z in nested loops, or tiles will overlap incorrectly. You'll have tiles drawn in front of other tiles that won't make sense.
You first need to draw the tile at (0, 0, 0), and then you want to draw all three tiles that are in front of that. Then all six in front of that, and so on. Imagine a visual plane starting at the bottom corner of the (0, 0, 0) tile, and moving toward your eyes. It will intersect triangular sets of tiles of increasing size.
Notice that the tiles in each set share the same SUM of their coordinates. The three tiles in front of (0, 0, 0) are (0, 0, 1), (0, 1, 0), and (1, 0, 0). We can use this to our advantage. First, add the dimensions of the map together, so if you have an X that can range from 0 to 8, a y that goes from 0 to 6, and a z that goes from 0 to 10, the sum is 24.
Now we'll use a pilot value to iterate through the positions of the plane as it goes from far to near. Next, iterate through the z coordinate. Then the y coordinate, but cap it using the already existing z iteration. Then produce a resulting x coordinate using what we know about the sum property. It should look like this:
for plane = 0 to x_max + y_max + z_max
for z = 0 to z_max
for y = 0 to plane - z // y can't produce a sum greater than the plane value
x = (plane - z) - y // x is now determined easily by z and y, since we know the sum
if x > x_max or y > y_max then continue // don't go outside the map
There you go. The resulting loops will iterate through the map in correct draw order, and never draw something over top of what it should be behind.
I love the video, and I've watched it a few times already. One criticism I have is about the section where you describe how to go from screen coordinates to isometric. It took me a while to wrap my head around how it works (and I had to watch 3b1b's video as well). It would have been great to have a more detailed explanation or breakdown of how the transformation matrix works. Oh, and I love the simple art style and how you showed the waves at the end.
TLDW: sprite_depth = -y;
Thanks for coming to my TED talk.
This is superb, I would love to know more about this! Great job man
The cube wave looks so satisfying
oh my god i just graduated college and i'm currently being blown away by your math
I actually recently went about and made my first little isometric thing, and the ratios needed I figured out by simply realizing that what you're drawing is not a cube or square, but looking at it flatly, what you do is you draw a hexagon, with 3 separate colors on different sections.
Awesome explanation! This is a great introduction to matrices
Wow, great video! I wish I found this a year ago instead of spending ages working all of this out (admittedly in a less elegant way) by myself.
A question though, how do you calculate world-space coordinates from screen-space coordinates when the tiles have a nonzero z (height)? After a lot of frustration I've resorted to looping through every tile, calculating the screen-space coordinates, and seeing if the mouse intersects them, however this is inefficient.
you can probably use regular collision optimisation techniques, like quad tree optimisation
@@Temulgeh that is true, not sure if it's worth the effort for my use case but I'll keep it in mind
Something completely unrelated: I had played and loved a game as a kid. But I couldn't remember what it was called. I've searched for days to no avail. Then I gave up and almost forgot about it. Until ... months later, I stumble across this video and the game is right there in the intro. Thank you! It was Mystic Towers :-)
Haha awesome! You know it took me ages to find the name of that game too, I have some really visceral memories of playing as a kid that with my best friend.
@@JordanWest Yeah, same with me. I played it with my cousin on my very first computer or maybe my father's computer, I don't exactly remember. Being ages ago didn't exactly help in rediscovering. How did you find it?
@@FumblkruschLP I vaguely remember searching something like "bizarre isometric dungeon game from the 90s". Nice to revisit those memories.
@@JordanWest 😀
well well well seems youtube has recommendes me a great channel this time! the explanation was great! thank you!
Definitely one of the best videos on the subject.
THANK YOU! I remembered playing Mystic Tower on my aunt's computer when I was small. I did not know how it was called back then and I've been struggling to know what game it was for years at this point. Now I know so I can try the game as an adult.
Wipeout 2048 on the Playstation Vita also does this on the main menu with some really beautiful trickery to make it look like a true 3d infinite grid of triangles. It is one of the most clean, minimalistic and lovely interfaces I've ever seen in a game.
I'm glad you used the old NetBeans icon ;)
Great video!
This is just fantastic. Thank you Jordan.
yo this shit gud, damn, like fr this is some genuine 10/10 quality informative content, gud stuff
This is an incredible and polished explanation
That was a really great explanation of a problem I didnt realize existed but makes a ton of sense!
This video has inspired me to learn linear algebra
I love your editing style, such a great tutorial!
Yeah, never realized that 3d techniques can apply right off the bat. I remember building some isometric based grids (with a cursor) for some school project, but i found the formula by simple trial and error (and observation). It did work. But the inverse 3d transform is so much more elegant.
This is a really good explanation. I have been building something like this for the past month or so and just came across this video.
amazing ! I really like aubjects like this, math , geometry , logic , visuals
It's 10am, I haven't had enough coffee to understand this, but I think this was very informative! When I'm more awake I'll have to rewatch to understand that math.
great vid
definately deserves way more attention
I’ve made isometric games before, but I had to click on this video, interested to what you had to say about coordinates. I know I must have come up with some system, but it was probably how I laid them out in the first place: diagonally, instead of straight left to right rows. That way, I would never need a function for fancy translations. It’s still fascinating to see your approach though, and I don’t see it as any less superior to mine. Awesome video.
It was on my suggestion list of RUclips but it turned out amazing I really love it and it got an idea to try with different things, thank you.
Plus I like and subscribed.