Coding Quickie: Isometric Tiles

Isometric Tile Map Rendering adds a lovely sense of depth to what is a static 2D construction. IN this video I show how to render and select cells in an isometric world.
Source: github.com/OneLoneCoder/Javid...
Patreon: / javidx9
KZbin: / javidx9
/ javidx9extra
Discord: / discord
Twitter: / javidx9
Twitch: / javidx9
GitHub: www.github.com/onelonecoder
Homepage: www.onelonecoder.com

[@javidx9]

Hello! My apologies for the out of schedule video - I've had some IRL things going on. I would also like to know what your opinions are about shorter, more concise targeted videos such as this one, perhaps increasing in regularity next year.

[@BlueJayBonsai]

David, any video from you is greatly appreciated. If you produce short videos, in order to tide us over while waiting for the longer series videos, then that is just a bonus! 👍🕹⌨️

[@PabloGaraguso]

Your channel is pure awesomeness. Short, long, they are all prime stuff. Thank you so much for sharing your know-how in such a professional manner. Whatever works for you, it's great.

[@simon.voggeneder]

David, I'll watch every video, regardless of length, as long as the quality stays where it's at. This is one of my favorite channels at the moment, I love every video and wait eagerly for every upload. Thank you for your great work!

[@lucs0091]

Love it

[@jddk795]

All video lengths welcome, Javidx9 - they all have a place. A few examples: watch a 5min video at work during a smoke break. A video of 30sec to 2min may be covered while waiting at a traffic light. A video of 1 to 10sec is just the right length for those who are taking cover during a paintball match. Even shorter videos are useful.. If you are a tennis player, why not watch a 50ms to 100ms video JUST after serving the ball...? They're all useful, imo.

[@nonamer2744]

I'm begginer in c/cpp languages and I'm getting impressed when I see how easily you do things and you speak with a so calm voice and it's seems to be very easy! I want be like you

[@javidx9]

lol, thank you No Namer, but I would suggest aim a bit higher! XD

[@nonamer2744]

@@javidx9 Sure, but I'll go step by step. My first step is to get familiar with c++ as you!

[@jayant9151]

@@nonamer2744 dont let yourself be in a constant syntax learning loop mate,... Start with straight diving into

[@nonamer2744]

@@jayant9151 I'm trying. I tried to rewrite a text editor, a Compiler and even a operating system. I managed to make something cool only woth text Editor project. Other projects particularly failed

[@Ownage4lif31]

Yea I agree with jayjay. I've found everything hard, unless going straight into projects. Best way to learn is to try and make something.

[@eformance]

I really liked the colored tile hack, that is a clever visual way to solve a somewhat complex problem.

[@hqqns]

Clever idea, and a novel and weird way to do a look up table :) Could be optimised by using a couple of look up tables but it'll do for this simple tut.

[@ZomB1986]

Could be optimized by using formulas: x±2y ≷ constant

[@Mycon]

It used to be a quite common way to get pixel perfect mouse select. Games like original UFO draw all tiles and actors to a hidden buffer in solid colours, then check which entity that colour corresponds to. I've used it a lot, just note that not all methods/engines fetch that single pixel from a big buffer as quickly as you'd hope.

[@ZomB1986]

Ironic that this implementation of the 'cheat' is not pixel-perfect: tiles in the center of the cell have more hot-spot pixels than off-cell tiles.

[@Mycon]

@@ZomB1986 I'm not sure what you mean. the 'off-cell' tiles in this colour fetching sense are composed of 4 corners of the surrounding tiles, all pixels should in fact return the proper tile coordinate.

[@astronime]

One of the most valuable things on the internet is your channel.

[@kamran_aghlami]

Your videos are so simply explained and elegant, You never fail to put a smile on my face. 😊👍

[@RozzmanLists]

A joy to watch, @javidx9 What I particularly enjoy about your videos is that you favour "I help you understand it" over "I show you how to do it". And the method you describe this time is a fine example of lateral thinking.

[@SourceCodeDeleted]

This is quite possible the best presentation of this content that I have ever seen. Fantastic work!

[@speedyc88]

Another great video javidx9, short but sweet and to the point. But I do enjoy your longer videos too. Keep up the great work as always, all the best from Speedy C

[@howardjohnprice]

Your videos are great. I wish they were around when I was learning to code. You are responsible for adding a lot of items to my gamedev bucket list!

[@Erwiinstein]

Wow. I just stumbled on this channel and the quality of the tutorial amazes me. I have now something I would binge watch. And wow, saw one of your later video "Essential Mathematics for Aspiring Game Developers" in the recommendation which *I will definitely watch* You're amazing! Thank you for sharing this with us!

[@Kaltinril]

As always, Love the simplicity and explanations!

[@Woodythehobo]

Perfect timing! Following a nostalgia trip for Rollercoaster Tycoon, I've been delving into the wonderful world of isometric myself over the past couple weeks. Using Unity's isometric functionality and the 3D application Blender 2.8 to design my tiles and render out to 2D, which allows me to avoid drawing tiles as i'm a poor pixel artist lol. The video is much appreciated mate, i'll definitely need the theory later on. Thanks!

[@Woodythehobo]

@@fancyhatsoftware6025 Yes and if you don't need screen/map rotation for your game you can just render 1 camera angle for tiles. A lot of older isometric and 2.5 D games were rendered in a 3D application too. Probably for similar workflow reasons. Imagine manually changing a shirt on an animated character in 8 directions! P.S. Some cool videos from the RCT artist himself: watch?v=5UKKaTGwIqc and watch?v=p6Fci7NWYUo

[@victornaut]

This man is an education genius. Thank you so very much for the flawless explanation!

[@tekoreypy]

Great video. It get me motivated to try to do something similar, I specially liked the cheating part where using colors you know where in the square is the mouse. Very clever. Thank you very much

[@wchen2340]

man i wish there were resources like you provide when i was 15 messing my way through all this stuff. over 20 years ago. thanks for sharing.

[@roykimor]

Hey, really appreciate everything on your channel, you're hands down the best instructor there's in what you decide to teach no doubt. I was wondering if you can maybe do an OpenGL series sometime because every resource on the internet is either explained by people who can't really explain well or is either cut really short to the basics and not going in-depth like abilities industry standard game engine have. I have hope you can really make learning and understanding graphics APIs easy if you decide to teach it :)

[@Hadi-gd7ul]

I just want to say i watched this 20 times or more already due it's being so amazing !

[@petersuvara]

Hey there. Great work and Thankyou for contributing to the development community. :)

[@javidx9]

My pleasure Peter!

[@jsflood]

Awesome in both length and content :-)

[@Garioch70]

I wrote a couple of isometric editors back in the day, they both used keys to navigate lol - glad they never asked for mouse interaction!

[@64MbUsbStick]

Very nice man, fianlly a tutorial wich explains the basiic maths behind this. btw I realy like the "Quickes's".Keep them up!

[@bubuche1987]

Nice video. A little add: as shown in the video, it's possible to add some "height" to a tile (the tree). But it also works for snow an grass. With just some pixels you can give the impression of a thick layer of snow, or of grass. It is maybe obvious but it's worth mentionning it: path finding algorithms used in classic 2D grid will work with an isometric game. Even if the impression given by the isometric view is stunning, it's only a difference in the view, not in the logic.

[@ItsHyomoto]

When you said you were going to cheat, I laughed. When you said you were going to brute force it, I went hmm. When you showed your cheat, I laughed again. These videos are always worth watching, you do a great job explaining what you are accomplishing and why. I think the shorter, more concise format does allow you to be more directive about the topic. It's like, you don't have enough time to go off on a tangent, so you can really laser in on what you are trying to demonstrate and since coding is often a series of little tasks, it also makes it easy to reference the video later on and find precisely the topic or idea you demonstrated.

[@javidx9]

Thanks Hyomoto for your feedback. Noted!

[@Cleeuwen05]

Thanks to the transformation I was finally able to make an isometric grid! Took me another 3 hours to figure out the linear formulas instead of using get(), but it all works nicely now!

[@theHaPK]

That reminds me Diablo retrospective talk where they also had a problem with this back-to-front rendering. I noticed that in this video when you hover over a tile with a tree, a selection highlight is drawn OVER a tree (while it should be UNDER a tree). I think it makes sense to let tiles have background and foreground images (e.g. green tile for background and a tree on transparent background for foreground), so you can do proper composition

[@javidx9]

I completely agree Maxim, I'd even want to specify the sides of the "cubes" independently too, when rendering different heights

[@jamesmillerjo]

Color coding makes me to remember building isometric 'height map renderer valley tile chooser'. Some things got easier when moved to 3d render world:)

[@herbin45]

You're a huge inspiration javid :)

[@javidx9]

Thanks herbin, I'm just trying to demonstrate ideas that people can use in their own projects, so Im pleased youre finding some of it useful!

[@rickjames3034]

I dont know anything about coding other than basic 'Hello World" but i still thoroughly enjoy watching even though this is way more advanced than my level :) and you call it simple :P

[@MokriyDoshch]

I like this amazing work. ❤

[@NikkiMcMistie]

I am intermediate in programming but very lazy with how much I code. Since I discovered your channel you inspired me to code each and every day most of the day... Even right now, in school breaks :)

[@javidx9]

lol, thanks NDA XD

[@paxan158]

A few years ago , I started a game project. 2d. And it looks similar. I also think the same 3d effect. This video and your explanation are very good. I appreciate to you for the video.

[@alex-dn9to]

loved coding this

[@tarikeljabiri]

Your videos are insanely good I like you. ❤️❤️

[@javidx9]

lol thanks Tarik!

[@miltrift]

i've just started thinking of how to create an isometric game and got stucked with this tile selecting problem. what a magic with that cheating tile! this solution is so simple and genius! thank you!

[@2thinkcritically]

I don't think I've made an isometric role engine in about 20 years or so. This really brings back memories 😌

[@stwe88]

Absolutely fantastic. This is a quickie like "I need it". Will there be more episodes about isometric tiles?

[@javidx9]

Thanks stwe! Very possibly, this one was unexpectedly quite popular.

[@gummansgubbe6225]

What an Columbi egg this video was. I was expecting some sin/cos math and all that was needed were some looking at colours.

[@GregoryTheGr8ster]

Did you ever see the game X-Com? It was based on isometric tiles, and it is so fun! You could blast holes in walls, and you could even set buildings on fire to cook the evil aliens if the buildings were infested with aliens. My virtual world will include features like this for sure.

[@TheRandomSpectator]

How have I not subbed yet? I've been watching closely since you started the NES Emulator series.

[@javidx9]

Thanks Random Spectator!

[@andrewa471]

Hello javid. I really enjoy your coding videos and I was wondering how would you go about making GUI from scratch. Think you can manage ?

[@Alex-yq2uy]

very nice, love it

[@javidx9]

Cheers Alex!

[@SnareX]

What I did years ago was create a offset origin vector to modify the offset of everythings placement. Then grab the dot product of the mouse position and use the simple cell selection code

[@lucgagnon7169]

Wow thanks you si mu much for your great work !

[@valtsuhw]

I'm amazed at how do you get everything to load so fast, my engine currently loads a 32x32 sprite in roughly 100ms, or a 64x64 in over a second. Given SSD as drive, HDD times were multiple times slower, and painting the sprites is another thing, FPS drops at around 500 - 1000 sprites drawn. Great work!

[@absalomdraconis]

I recommend barycentric coordinates for conversion between cartesian & isometric. I'll try to remember to upload the formulas tommorow.

[@absalomdraconis]

Later than intended, but here we go: to compute a coordinate from barycentrics, 3 vectors, and a reference: loc.part = ref.part + vec1.part * bary1 + vec2.part * bary2 + vec3.part * bary3 _Except,_ that you can do this: loc.part = ref.part + vec1.part * bary1 + vec2.part * bary2 + vec3.part * ( 1.0 - ( bary1 + bary2 )) This is because barycentric coordinates (at least for 2d stuff, and within the limitations of your representation) always follow this rule: bary1 + bary2 + bary3 = 1 _Computing_ barycentrics usually involves some precomputations. Formulas: x3 = p.x - vec3.x x13 = vec1.x - vec3.x x32 = vec3.x - vec2.x You might have noticed a naming convention: precalculate y3, y23, and y31 using the same pattern, then precompute this: idet = 1 /( y23 * x13 + x32 * ( vec1.y - vec3.y ) ) idet stands for something, but I don't remember if it was identity or something-determinate. That done, the barycentrics are computed as follows: bary1 = ( y23 * x3 + x32 * y3 ) * idet bary2 = ( y31 * x3 + x13 * y3 ) * idet As you may have noticed, it's not that big of a leap to just precompute most of this, only the portions that require x3 or y3 have to wait for the actual point to be made available. On modern architectures this probably won't save you anything, _but it might,_ so it's worth considering. On non-cached architectures I'd expect it to absolutely be worthwhile. Regretfully, I've forgotten where I put the piece of paper where I wrote down the formulas for 3d barycentrics, but their formulas were in line with the 2d versions, but with 4 vectors to describe a tetrahedron. In case anyone winds up doing some geometry that needs it, yes, a truncated tetrahedron can be subdivided into true tetrahedrons: just take a triangular face, swap one point with an adjacent vertex that's not on that face, and slice the shape in two: keep doing this for each non-tetrahedron until you only have tetrahedrons (you'll do 2 slices at most): you can then do whatever collision detections or whatever that you were wanting. Or use dot( point_vector, axis_vector ) / dot( axis_vector, axis_vector ) for another coordinate space conversion approach (I don't remember anymore, is this what was used in the video?).

[@petersuvara]

Interesting to see some classic C++ code. Are you using OpenGL or DirectX with your engine?

[@javidx9]

The PixelGameEngine uses OpenGL as a backend, so it works across many platforms.

[@antoniomartini8495]

U ar a genius my dude

[@alessandrodegregori4525]

Great, as Always

[@MaurizioSparta300]

Fantastic!❤

[@attilavs2]

Hey, very cool video. I actually figured out another way to do the map coordinates, by assigning coordinates like in a square-tiled 2d game, incrementing by two between tiles that touches edges (Like the old Civs if you don't see), but i didn't really go much further than a simple python proof of principle, since i went on to do a raycaster (and in C). (It also didn't work well for a bit, so that's why i watched the video) And a kind of smarter way to do the "tree tiles" would be using a "floor" sprite and another sprite for the tree drawn over. Probably is slower, but would allow for more flexibility, and using linked IDs for the different objects and sprites ect... Thinking while i am typing at this point, so i am going to stop now. Anyways, thank you !

[@Kanic12341]

Hey javidx! New sub here. I got a couple of questions if you don't mind. 1) Do you have any suggestion for some course to start learning C++ before joining your videos? I come from python / ML background 2) What do you think about udacity's C++ nanodegree, is it worth it? 3) How do you go about learning something new in CS, whether that is a programming language/framework or field ( I'm mostly interested in building hardware emulators and studying OS through C/C++)?

[@Mozartenhimer]

Why didn't you do the mouse clicky stuff with an affine transform? Seems like a great candidate for it.

[@jamesking2439]

You could also invert the world to screen function and snap to grid in world space. I'm not sure if that would give pixel perfect tile selection though.

[@tmsprxw]

Great video, straightforward and easy to understand. What software did you create the tiles in? The icon looks so familiar but I just can't place it.

[@EbbDrop]

I think he is using Affinity photo

[@tmsprxw]

@@EbbDrop That's the one - thanks.

[@jayant9151]

Love your Voice,.... You can do great work as a audiobook narrator :)

[@imranmalak9509]

Excellent 😊

[@javidx9]

Thanks Imran!

[@watsonwrote]

This makes a lot of sense and was easy to follow along. I'm interested in what other solutions exist for selecting tiles that don't fit in a screen cell besides the sprite-based solution. Thanks for the video!

[@nathanrcoe1132]

I was thinking of normalizing the mouse offset within the cell, and doing simple checks for the boundaries. I do like how simple the sprite solution is.

[@F-Andre]

wonderful video :)

[@basboerboom9328]

You can also detect the diamondshape with simple algebra: 1. Get relative mouse positions( of X and Y) to the center of the tile. 2. Create 4 virtual lines: (0.5 is ratio height width of the tile) -.5 * relativeMouseX + tileheight/2 0.5 * relativeMouseX + tileheight/2 -.5 * relativeMouseX - tileheight/2 0.5 * relativeMouseX - tileheight/2 3. if(relativeMouseY < q1 && rMY < q2 && rMY > q3 && rMY > q4 You'Il never have overlapping tile detection. This is for worldspace btw

[@ymig3]

nice ! and... i'm still waiting new or fixed version of "8-Bits of C++ Code You Should Know "

[@itscalamity1976]

What did you use to make the tile sprites? Very cool btw!

[@javidx9]

Affinity photo. Thanks!

[@rogerwinright2290]

Revisiting this a few years later - If you need a cool idea for a video - if you could show how to do pathfinding (A* or otherwise) on an isometric map would be awesome!

[@javidx9]

It's no different to pathfinding on a non-isometric map. I've two videos about path finding on regular grids, but the grid is just a shape. Such algorithms work from nodes and graphs, and you construct those however you need to.

[@rogerwinright2290]

Aye, never thought of it that way! I'm definitely going to give a shot at learning a bit more about adopting A* to an isometric grid! Thank you again for this awesome video! Always looking forward to more in the future!

[@zobook]

A long time ago i made a game that uses a hexagonal board made of hexagonal cells. I couldn't make to work the math to translate mouse position to cell index, so, because it was a fixed board inside a 300x200 screen resolution, i also "cheat" (in my opinion). I made a 320x200 raw bitmap, where i draw the board and each piece in a different consecutive color, the borders and background where special ones. So, i capture mouse position, get the color at that position in the bitmap an that give me the cell index...there must be more memory efficient and more elegant solutions, for sure.

[@TheUltimateLizard]

This video should've been here before! The next step is to do isometric terrain

[@NeilRoy]

One subject which I have not seen any video or online website tutorial cover at all, is dealing with isometric tile selecting when you have things like hills, so you would have a higher layer of tiles. Selecting on a flat plane is super simple, but it gets more complicated when you add in layers for things like hills and such. Look at Age of Empires 2 for example, which has higher hills etc. You can't use the same algorithm that you use for a flat plane. I have a few ideas on how to deal with it, but I would like to see how others do it and NOBODY talks about it. Seriously, do a search... you would be one of the very few to cover it.

[@javidx9]

You're right Neil, I was going to add height to this but it would have doubled the length. Selecting the top of a tile at height would be interesting to implement. I think I'll have a go!

[@NeilRoy]

@@javidx9 I can't wait! I have come up with a couple solutions, but it is a very interesting topic which is simply NOT covered by anyone out there. All the tutorials I watched only cover flat isometric. I noticed that even the game Diablo 2 only uses flat isometrics, there's just so much detail you don't notice.

[@Mycon]

Many games fake the height even though the world is flat. Very common in RTS genre, games like Command&Conquer and the first StarCraft did that, there's high ground plateaus with ramps, but if you look closer you realise it's just the graphics that give the impression. www.eliteownage.com/helmskeepdleftside001.png

[@NeilRoy]

@@Mycon All isometrics "fake the height", but they still have to offset the higher tile positions, that is, the top most flat portion of that hill. Now if you click on a tile, which one are you clicking on, a higher hill at an offset position, or a lower layer? You can't use the same math, you need to account for the offset. My solution, which I have yet to test, would be to check the top most layer first (record the highest layer for that level) and see if there is a tile at that position, then go down a layer and repeat until you find one that exists. I also thought about "walking up the level", that is, start at a lower tile and slowly checking up tile by tile until you get to one that is at the mouse position. It's hard to explain. Flat Isometric levels like that in Diablo are easy. But when you get hills, you have more problems. I am curious how others solved this problem. In my own level editor I can do it, I use the simple flat terrain method, but if you point at the edge of certain tiles near on on a hill, it will select the wrong tile due to the offset of the hill. of course the problem gets worse as you add more layers and hills, like that in SimCity2000 for example which can have very high hills. Selecting the topmost hill means you either selected a tile at the top of a hill, which would have X-Y coordinates completely different that a tile at the base around the same location on screen. Remember, the position on screen is NOT the same as the tile's map co-ordinates.

[@Mycon]

@@NeilRoy But in the examples I gave, Starcraft and early Command&Conquer series didn't use any offsets, they achieved the illusion of height purely with tiles that look like ramps and cliffs. It becomes very obvious once you run a unit up the 'ramp'. Also more obvious in the earlier C&C games than my other example. xgm.guru/files/335/53665/untitled.jpg One simple way to solve this issue is to draw each tile in solid colour to a hidden render target, you can even embed the tile coordinate, including height in the colour value (RGB becomes XYZ). Then of course sample the colour from cursor coordinates. This is actually first time I see a method of drawing a specific multi-coloured tile for determining the coordinate. When I used the similar method in the past, I would just use the mask/opacity sheet and drawn solid colours in the hidden target discarding my diffuse texture in those draw calls.

[@BasavarajMHubli]

Hello Javidx9, I was wondering why no videos from you recently! But here we are! You once mentioned about an ambitious project of yours. May I know when do I expect?

[@javidx9]

Hi Basavaraj, Ive released a video every two weeks this year!! XD Nevermind, the ambitious project can be watched via this playlist: kzbin.info/www/bejne/pIfMi5pmZ66Ah9E

[@BasavarajMHubli]

Oh! Very sorry! I didn't get notifications of that video, inspite of clicking at Bell icon! Anyway! I got link from you! Thank you!

[@jakobsailer]

Something I have a question about: If Tile (0,0) is at the very top of the screen and in the middle (if its a square world) why would you offset the Y coordinate down in ScreenSpace? On-screen it only moved along the X. I used this video for a Uni-project of mine and in there I have the Y offset to be 0. The result is that the most upper tile has a y-coordinate of 0 and the most left tile has a x coordinate of 0. If you offset the y aswell the whole world shifts down the bigger the y- component is resulting in big y-coordinates. Am I missing something? is this so the world works for negative coordinates?

[@beron_the_colossus]

A nice surprise!

[@javidx9]

lol thanks Beron!

[@monkey1371]

Hi javidx9, I was wondering where the "8-Bits of Code You should know" video is. This was very helpful to me and now I want to show the video a friend who is learning C++ now, but I can't find it. Can you reupload the video? Thank you.

[@sabriath]

Just fiddling around... Given 2 vectors U and V, each containing X and Y to denote mapping into those coordinates. A point P as the origin (since O looks too similar to 0 on paper), and a noted point N with 4 components (u, v, x, and y)....gives the following transformation: Nx = Px + Nu * Ux + Nv * Vx Ny = Py + Nu * Uy + Nv * Vy This way you can choose any vectors in your isometric mapping, or even rotate them and scale them. I then reversed the formula if you know (Nx,Ny) and need the "cell" or (Nu,Nv) location: Nu = (Nx - Px - (Ny - Py) * Vx / Vy) / (Ux - (Uy * Vx) / Vy) Nv = (Ny - Py - Nu * Uy) / Vy *note: Nu must be solved first in order to be used to find Nv.....it's because you are dividing a coordinate by a line. No line-intersection formula required for a 2d-to-2d mapping. I haven't tested it, was just doing it by hand in a notebook from boredom. I used to do iso stuff back in the day, but I also had a z-coordinate for height, which changes EVERYTHING....you pretty much have to raytrace, which is a little more complicated.

[@SimonClarkstone]

You can use the "cheat" for determining the clicked tile with heights too, with a hidden buffer that has a different colour for each (visible) position in world space.

[@sabriath]

@@SimonClarkstone .... keeping track of visible tiles in the graphics engine slows down the engine, best to just use a raytrace formula as it only requires a single line, which is very fast in comparison.

[@notSoAnonyymus]

Does this location also work for circle line collision?

[@Lubisek]

@javidx9: What if I wanted to shift the map half a tile to the side, ie. vOrigin = { 5.5, 1 }. How would one do that? I fiddled around and could not get it to work. Thanks for help.

[@Ryutsashi]

Look at the comment I just left (sort by newest). I also mention where to include your offset origin in the process. Hope it helps

[@maxpricefield7586]

hello, im new to the channel, but could you tell me which video of yours specifically talks about the box-grid-and-mouse-position concepts thingies??

[@javidx9]

In 3d, I looked at ray picking in top down city based car crime game, in regular 2d, panning and zooming, polymorphism, and anything that looks like a grid in the thumbnail.

[@maxpricefield7586]

@@javidx9 wow thanks, that was fast!

[@rexinferi]

Could you do video on making a line chart? with a live feed would be cool

[@mbbagpackers7124]

On which file or application u are coding

[@pixrogue8928]

How to render in correct order with multi tiled buildings or structures?

[@josefortyfive214]

What software are you using for making your tiles?

[@javidx9]

Hi Jose, I use Affinity Photo.

[@Carlos-kh5qu]

helpful.

[@noahbeauchamp6496]

how would you implement scrolling I tried to do it my self but I can not figure it out

[@noahbeauchamp6496]

Never mind you just add a camera speed to the origin

[@coolmind2476]

Great video and very smart tricks. I also would be interested in a more general function that translates mouse coordinates into world coordinates (for other types of tiles). I am just thinking aloud , in this specific example, would it be possible to store for each pixel to which tile it belongs while drawing the tiles and then looking up this information later to translate the mouse coordinates? Anyway, it's another way of cheating...

[@javidx9]

Thanks, the legitimate way to do this is just to use an affine transformation matrix, but I wanted to avoid introducing matrices (again) for a change :D

[@coolmind2476]

@@javidx9 If I remember my maths from 20 years ago correctly it's just about transforming one base into another base of a vector space, and in this case it should involve lots of sines and cosines because there are several rotations around x, y, z involved. But it's good to know other ways so thanks a lot for making this kind of video. You are extremely clever.

[@igormorgado]

I'm wondering, how to make a isometric game with height. In a 2d isometric game, you can easily define a map as a matrix. In 3d case, using a 3d data structure would take too much memory. What are your ideas @javidx9? Also about projective view? Can you do a video about that?

[@javidx9]

Hi Igor, rendering height is trivially easy, for each tile in the matrix, store a height value, then when rendering the tile, simply offset the y value with by the height * by your chosen height step, you can even fill in the sides as you go like this imgur.com/i8mrfrD. Selection in height requires a little more thought but is not too difficult either - maybe for a future video ;)

[@igormorgado]

@@javidx9 but that is just cheating. If you need intricate maps where height makes difference, for example if you have a upper and an lower level in a cave (or a house), how it would work? and also how game physics would work?

[@igormorgado]

@@javidx9 anyway I would love to see this implementation.

[@ducky8075]

Igor Morgado you’d probably use a different tile map for different layers

[@robertboran6234]

Very useful stuff. Shorter videos with a specific aim is more easy to follow. I also want to mention that many people with programming skill have more patience and their focus in time is larger. So as an example : How to make a ruguelike game. From Ascii to hardcore gameplay. In a series like that you can have shorter videos and an interesting content. Also maybe have other videos like how to build a sokoban game on a TI-84 pocket calculator. Another very interesting side project that is different would be how to build a touchscreen status manager for a factory in Minecraft (Lua programming on a computer inside Minecraft).

[@SteampunkSammy]

Would be good to understand height in isometric space, I.e if you were to place 2 things ontop of each other in the world

[@iProgramInCpp]

nice

[@javidx9]

Thanks IPICPP!

[@iProgramInCpp]

@@javidx9 You should call me iProgram instead of IPICPP, it just doesn't feel right to be called this.

[@brianmac8260]

Got up at 6:30 this morning, no javidx9! noooooooooo :-) Still waiting for the next Console episode - as promised cough cough!!

[@victormigueldemoraiscosta9276]

Did the NES tutorial series finish?

[@javidx9]

Nope, at the end of the last video I described how a few other videos will be made before taking on the APU, as not all my audience want NES all the time XD, and I have some obligations to community showcases etc before the end of the year. Though APU is done as demonstrated in #1, and will be shown before the end of the year.

[@philtoa334]

Thx

[@SeikonStreetLaw]

It seems that isometric tiles is like apply a transform matrix shear und rotation

[@davelordy]

Here'a another approach: Rotate your camera by 45° Stretch your camera's vertical FOV (so visually squashing down the vertical FOV seen) = Isometric with standard square grid coordinates.

[@SVVV97]

Wouldn't it have been easier to transform mousecoordinates to worldspace coordinates by multiplying a small shear-transformation matrix to them or doing a projection onto your world x/y unit-vectors? Probably not as performant as your solution, but I think it wouldn't be prohibitively bad either and the logic would be very straightforward

[@KosteonLink]

Yeah, he had a perfectly good invertible affine transformation to go from world->screen earlier. I was expecting him to go screen->world by just inverting that transformation, you could find the inverse by hand once and then just hardcode that

[@javidx9]

You're quite right, the "proper" way is just to use an affine transform to do the whole thing, but Ive already done a video about those :D Also, Im aware that a large proportion of my audience have not yet encountered matrices at high school, so this gives them the option of trying something that might ordinarily be quite alien.

[@prideneverdies1001]

hey I don't get it, is there any step back I should go to?

[@Ryutsashi]

Another approach (I didn't factor in the screen offset, but you can easily add or subtract it): INDEX TO COORDINATES (add offset to result): resultingX = (x - y) * tileWidth * 0.5 resultingY = (x + y) * tileHeight * 0.5 COORDINATES TO INDEX (subtract offset prior to any other calculations): a = x / tileWidth b = y / tileHeight c = b - a resultingX = floor(2 * a + c) resultingY = floor(c) All in all, it's just derived from the equations in the video. The formulas for COORDINATES TO INDEX are equations with two unknown variables with repeating code factored out into a,b and c.

[@Ryutsashi]

If you know what I'm talking about (I think even primary school math classes cover it), and you understood the index to coordinates process described in the video, you can use that to get the coordinates to index equations, no matter where your grid's (0,0) coordinates are (aka. no matter how your x and y axes are aligned)

[@Lubisek]

Very inaccurate. I might have something wrong, but I dont think so. Any way to get in contact and discuss?

[@scullyy]

I think I'll stick to oblique projection!

[@tommytomtomtomestini3894]

I told my wife that a quickie is 20 minutes nowadays ... She laughed at me :(

[@immortalntrsovereign4145]

ok?

[@Potato-pq5ez]

@@immortalntrsovereign4145 it's a joke referring to the length of the video

[@xiphaliadanlianthol6715]

Did you by chance make a version that uses complicated geometry to solve the problem instead of a cheater tile?

[@kirill_bykov]

Maybe better to have a sum and dif of mouse coords to determine which tile mouse is in.

[@Aenemenate]

classic

[@spexbeanfarmer]

vimto product placement big bucks i see

[@NoodleFlame]

You can avoid the get pixel hack and just calculate the correct cell coordinates with the following: olc::vi2d vMouse = { GetMouseX() - (vOrigin.x * vTileSize.x), GetMouseY() - (vOrigin.y * vTileSize.y) }; olc::vi2d vSelected = { (vMouse.x + 2 * vMouse.y - ( vTileSize.x / 2 )) / TileSize.x, ( -vMouse.x + 2 * vMouse.y + ( vTileSize.x / 2 )) / vTileSize.x }; olc::vi2d vSelectedWorld = ToScreen( vSelected.x, vSelected. y );

[@Lubisek]

Holy ... ! It works! Thanks. There is a small glitch around the top edge though - it selects the tile even if you point at the tile's corner (outside the map). Is there a way to contact you (if you have time) to discuss this a little? -I am trying to understand the mathematics of this.

[@deadbeef16]

Wouldn't it be easier to apply a sin/cos transformation when drawing?

[@javidx9]

Actually Hannes I disagree, I have covered that already in my Affine transform video, but this approach requires no mathematics other than basic integer operations, there isnt even any complicated division - so its very fast. Also pixel level sprites dont tend to arbitrarily rotate very nicely unless you apply filtering to them, which again is costly. I agree though that if you wanted arbitrary camera positioning then you would need a sophisticated rendering solution.

[@deadbeef16]

@@javidx9 All true. You traded developmental efford for higher memory usage and higher computational efford since you are drawing the screen almost twice per frame. Other than that I really love your vids and can't wait for the next NES vid. :)