Тёмный

How Isometric Coordinates Work in 2D games 

Jordan West
Подписаться 10 тыс.
Просмотров 792 тыс.
50% 1

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
Music: Snake Hips - Lucas Pittman (via epidemicsound.com)

Наука

Опубликовано:

 

2 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 671   
@JordanWest
@JordanWest 2 года назад
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
@rafaelrosafu
@rafaelrosafu 2 года назад
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.
@metallsnubben
@metallsnubben 2 года назад
@@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
@rafaelrosafu 2 года назад
@@metallsnubben good point, I'll double check. thanks.
@huutuantran4411
@huutuantran4411 2 года назад
It now has 101K views
@JordanWest
@JordanWest 2 года назад
@@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.
@isonzo686
@isonzo686 2 года назад
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.
@TimSzabo
@TimSzabo 2 года назад
Well said!
@AshishXMC
@AshishXMC Год назад
I agree!
@woodlandcritterpunch
@woodlandcritterpunch 2 года назад
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
@JordanWest
@JordanWest 2 года назад
That's awesome, so glad it helped :)
@pucciraskolnikov7266
@pucciraskolnikov7266 2 года назад
I especially value such vibeos!
@yan-amar
@yan-amar 2 года назад
This is such a great, high quality video, hitting just the right spot between learning and reference.
@foul-fortune-feline
@foul-fortune-feline 2 года назад
While remaining entergaging (/hj) as well!
@foul-fortune-feline
@foul-fortune-feline 2 года назад
(the /hj is the ironic use of the term, but the genuine meaning behind it)
@foul-fortune-feline
@foul-fortune-feline 2 года назад
(tho yk. ik that effective educational content is also entertaining haha. it's also very pretty~)
@uhitsethan
@uhitsethan 3 года назад
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!
@uhitsethan
@uhitsethan 2 года назад
​@@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
@kingbroseph9773
@kingbroseph9773 2 года назад
@@marianmotorina ratio bozo
@uhitsethan
@uhitsethan 2 года назад
@@kingbroseph9773 lol he really did go for it after a literal year
@dragonfire23141
@dragonfire23141 3 года назад
I can't believe that this video only has 574 views with this amazing content.
@JordanWest
@JordanWest 3 года назад
Thanks, and here I am amazed it's even getting a hundred views :)
@recker7017
@recker7017 2 года назад
@@JordanWest you deserve much more than that
@UndeadAlv
@UndeadAlv 2 года назад
I’m still amazed I’m sure it will blow up at some point
@foul-fortune-feline
@foul-fortune-feline 2 года назад
@@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??_
@michaelthornes
@michaelthornes 2 года назад
@@foul-fortune-feline well, we are all here right now
@wojtekpolska1013
@wojtekpolska1013 2 года назад
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"
@MonochromeWench
@MonochromeWench 2 года назад
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.
@JordanWest
@JordanWest 2 года назад
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.
@Electrk
@Electrk 2 года назад
this just makes me think of what a nightmare chris sawyer must've had with rollercoaster tycoon
@fabricionascimento2056
@fabricionascimento2056 3 года назад
That’s the most concise and easy to understand video that I found on RU-vid about isometric grids!
@djmouton251
@djmouton251 2 года назад
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 !
@CoolExcite
@CoolExcite 2 года назад
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?
@JordanWest
@JordanWest 2 года назад
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
@Allen-R
@Allen-R 2 года назад
@@JordanWest oh *nice*
@Jomity
@Jomity 2 года назад
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)
@dablackg
@dablackg 3 года назад
that wavy isometric had me hypnotised, great vid!
@seiuwatches
@seiuwatches 2 года назад
This is an amazing video, great job! Love the visualization and maths explained.
@mrxpcookie
@mrxpcookie 3 года назад
This is wonderful, thank you for the clean explanation and resources.
@Niker107
@Niker107 2 года назад
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.
@miniasriel9951
@miniasriel9951 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.
@noahthompson95
@noahthompson95 2 года назад
I loved this video! It's a simple and quick explanation on how it works and leaves me satisfied. Great work!
@lukass7156
@lukass7156 2 года назад
what an elegant explanation and visuals. great job Jordan!
@nanopi
@nanopi 2 года назад
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.
@ai_is_a_great_place
@ai_is_a_great_place 2 года назад
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!
@prathamjohari8301
@prathamjohari8301 2 года назад
Bro i need more from you, the quality is top notch. Keep up the absolute amazing work
@aijc
@aijc 2 года назад
This is such a great video, your channel deserves a lot more attention!
@mazio_os
@mazio_os 2 года назад
This is great timing! I was just thinking of making an isometric adventure game of my own. Praising the RU-vid algorithm aside, your scripting and editing is great and I feel like you gave the perfect amount of information. Instant subscribe :)
@LoStFoReVeRiNtImE
@LoStFoReVeRiNtImE Месяц назад
this one of my favorite videos of all time. It combines everything I love into one video. Applauds to you jordan! 👏 👏
@balorprice
@balorprice 3 года назад
That was a gorgeous piece of education you just put together. Bravo!
@franciscocardoso5819
@franciscocardoso5819 3 года назад
Awsome content!!! Keep it up! :D Really well explained, love the fact you showed how it would look like in each step! Kudos!
@afs824
@afs824 2 года назад
This is a fantastic video! I am working through this to render an isometric field step by step. Incredibly lucid description. Thank you!
@juliangabrielalvarez7642
@juliangabrielalvarez7642 3 года назад
This is superb, I would love to know more about this! Great job man
@boris.karavasilev
@boris.karavasilev 2 года назад
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!
@sanderbos4243
@sanderbos4243 2 года назад
Awesome explanation! This is a great introduction to matrices
@1xCorr
@1xCorr 2 года назад
I love your editing style, such a great tutorial!
@nikitosha1000
@nikitosha1000 2 года назад
Oh GOD that video is so good! Thank you a lot, Jordan! Always wondered how to do this effectively
@retrx4236
@retrx4236 2 года назад
this is extremely high quality and straightforward. I am amazed.
@taytheprodigy4388
@taytheprodigy4388 2 года назад
absolute godly tutorial, very detailed and dynamically useful
@SaladDongs
@SaladDongs 2 года назад
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!
@Gallowtown
@Gallowtown 2 года назад
really relaxing and informative, amazing content
@reitokenvideogamecreation7655
@reitokenvideogamecreation7655 10 месяцев назад
really good vidéo :D fun to see each result !!!
@ihateevilbill
@ihateevilbill 2 года назад
Thank you! One of my favourite games when I was a kid was called Utopia (on the amiga) and as a developer I always wondered how they programmed the layout. I decided never to try it as I had no idea where to start (other than google). But this video gave me enough information that I can now imagine the solution in my head. Thats very much appreciated.
@anirudhchandrashekhar8938
@anirudhchandrashekhar8938 2 года назад
Amazing content :) can’t wait for your channel to blow up. Thanks for the good work
@zmbp
@zmbp 2 года назад
Wow, I vaguely knew the translation before, but never understood why. This so perfectly illustrates the problem and solution!
@rostkgb
@rostkgb 2 года назад
pure simple. well done explaining, thanks
@antonionotbanderas9775
@antonionotbanderas9775 2 месяца назад
I only understood about half of this video but it's already answered a lot of questions I had about 2.5D games.
@Johxzu
@Johxzu 3 года назад
Well-made and informative video, thanks!
@justbodewes
@justbodewes Год назад
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!
@PedroSilva-rc6ns
@PedroSilva-rc6ns 2 года назад
This is just fantastic. Thank you Jordan.
@ipaqmaster
@ipaqmaster 2 года назад
This is really good edutainment. I hope your channel soars Jordan. This is the kind of content modern RU-vid needs more of.
@zzzergling1079
@zzzergling1079 2 года назад
Holy cow that was so cool explained. Even with such easy task, each step error explanation with showcase! Wow
@McStebb
@McStebb 2 года назад
This is the single most useful isometric tutorial I've ever seen. I will definitely be referencing this a lot.
@litlclutch
@litlclutch 2 года назад
This was a great rundown on isometric games setups ...
@furcob
@furcob 2 года назад
This is an incredible and polished explanation
@MrGr33n_
@MrGr33n_ 2 года назад
Well made video, easy to understand. Please make more video like that.
@alessandromangiapia7082
@alessandromangiapia7082 2 года назад
Immediate like for this channel. You are explaining like a boss!
@ProQuigley
@ProQuigley 2 года назад
Wonderful animations and math application
@jyke321
@jyke321 2 года назад
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.
@theillegaltaco6
@theillegaltaco6 2 года назад
Really underrated video, it tells you enough to understand whats going on but not so much that you feel overwhelmed.
@cadeleighty6595
@cadeleighty6595 2 года назад
This is an amazing resource for me! thank you for making such well a explained video, i'm in your debt!
@JordanWest
@JordanWest 2 года назад
Thanks for the kind words, glad you found it helpful!
@m.a8335
@m.a8335 2 года назад
RU-vid needs more videos like this and you deserve way more views. Thanks!!!
@CYON4D
@CYON4D 2 года назад
Definitely one of the best videos on the subject.
@NowKnownMAWO
@NowKnownMAWO 2 года назад
Very well done video! With such high quality content you deserve more subs :)
@blitzkreg335
@blitzkreg335 Год назад
I've been struggling the whole week and only found this video now. Thank you !
@pilotharibo5410
@pilotharibo5410 2 года назад
great vid definately deserves way more attention
@Mephil
@Mephil 2 года назад
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!
@N3V3L
@N3V3L 2 года назад
Very nice explanation , thanks a lot! :)
@seenPunktSee
@seenPunktSee 2 года назад
I just love that this video perfectly matches my youtube search and with such quality content. thanks man
@JordanWest
@JordanWest 2 года назад
I love that your search perfectly matches my video :) glad it helped!
@mgames3209
@mgames3209 2 года назад
This is a very good video and extremely polished
@mrtaufner
@mrtaufner 2 года назад
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
@metgaming9545
@metgaming9545 2 года назад
I’ve tried making isometric stuff before, but this explains its EXTREMELY WELL. Thank you!
@MrOnlineCoder
@MrOnlineCoder Год назад
Amazing video. And I always being amazed how linear algebra has so many uses in video games and multimedia in general
@erz3030
@erz3030 2 года назад
Cool quick little tuto, thanks for sharing m8!
@Kingtut101
@Kingtut101 2 года назад
This video was great. I helped me a lot!
@ITSJTG58
@ITSJTG58 2 года назад
Amazingly well done!
@LowtechLLC
@LowtechLLC 2 года назад
Thank you! This was a great explanation
@Akari_202
@Akari_202 2 года назад
That was a really great explanation of a problem I didnt realize existed but makes a ton of sense!
@cartler
@cartler 2 года назад
This is a simple, great explanation!
@hamakawa9453
@hamakawa9453 2 года назад
It was on my suggestion list of RU-vid 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.
@VoidFame
@VoidFame 2 года назад
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"
@JordanWest
@JordanWest 2 года назад
Ah good catch, thanks
@TheBlissfulVoid
@TheBlissfulVoid 2 года назад
you're the type of guy to correct Albert Einstein, and be right
@Blue-Maned_Hawk
@Blue-Maned_Hawk 2 года назад
Wonderful! Thanks for this.
@omaryahia
@omaryahia 2 года назад
amazing ! I really like aubjects like this, math , geometry , logic , visuals
@Lenny76
@Lenny76 2 года назад
Very nice explanation !
@folkusonme
@folkusonme 2 года назад
this is so informative ! love
@Maraus92
@Maraus92 Год назад
Exactly what I needed to build my engine, thanks!
@CaptainKraft
@CaptainKraft 2 года назад
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.
@DCaseyTucker
@DCaseyTucker 2 года назад
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.
@friendlyfripptit2228
@friendlyfripptit2228 2 года назад
this was so good I have to watch it again
@ccgarciab
@ccgarciab 2 года назад
Concise, clear and nice looking
@Zanytiger6
@Zanytiger6 2 года назад
Crazy how simple it seems!
@notveryobservant1056
@notveryobservant1056 2 года назад
This is really helpful, thank you!
@FlyingButterHorse
@FlyingButterHorse 2 года назад
Very well put.
@acewarrior9773
@acewarrior9773 2 года назад
This video is so well done
@willft520
@willft520 2 года назад
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.
@armagedonthe1gamer
@armagedonthe1gamer 2 года назад
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.
@motbus3
@motbus3 2 года назад
well well well seems youtube has recommendes me a great channel this time! the explanation was great! thank you!
@samieb4712
@samieb4712 2 года назад
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
@Metacious
@Metacious 3 года назад
Insane value. Subbed.
@mattm3601
@mattm3601 2 года назад
I would love to see this applied in a programmatical sense in developing a map in-game! Thanks so much this is really awesome.
@JordanWest
@JordanWest 2 года назад
Thank Matt, do you mean converting the math into code? Or going deeper into the process of building a map from isometric coordinates?
@charg1nmalaz0r51
@charg1nmalaz0r51 2 года назад
@@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
@DaydreamStudios_Official
@DaydreamStudios_Official 2 года назад
This Is A Great Tutorial/Entertaining-Video :D
@sprinkleman8103
@sprinkleman8103 2 года назад
You deserve like 100,000 subs, even more because of this amazing content. You get right into it and don’t waste time
@gorandev
@gorandev 2 года назад
Great content, thanks, you've got yourself a new subscriber
@ShunyValdez
@ShunyValdez 2 года назад
I'm so happy the RU-vid algorithm recommended your video to me. I've liked and subscribed!
Далее
Pixel Art Class - Isometric Tile Basics!
25:55
Просмотров 334 тыс.
Modular Isometric Pixel Art | Tutorial
6:58
Просмотров 203 тыс.
Why Isometric? | Art, Code and Matrix Maths | A Devlog
13:33
Giving Personality to Procedural Animations using Math
15:30
Designing (Procedural) Monsters
4:31
Просмотров 915 тыс.
Coding Quickie: Isometric Tiles
22:13
Просмотров 113 тыс.
Procedurally Generated 3D Dungeons
9:42
Просмотров 273 тыс.
I Wrote Minecraft for a Calculator
14:43
Просмотров 1,3 млн
An introduction to Shader Art Coding
22:40
Просмотров 906 тыс.
Technique for Creating Beautiful Level Design
11:48
Просмотров 806 тыс.
Isometric Game Tutorial - Pros and Cons, Art, Movement
11:16
Плохие и хорошие видеокарты
1:00
SAMSUNG S23 ULTRA🔥
0:47
Просмотров 146 тыс.
SAMSUNG S23 ULTRA🔥
0:47
Просмотров 146 тыс.