I developed the isometric engine for this[0] video game in the 90s. I remember trying to figure out the algorithm to determine where the cursor was (converting screen x/y to position on tile, taking into account height of tile stack and the fact the tiles could be transparent) was a monstrous headache for some reason.
The sort of thing you'd solve in 30 seconds with Google in 2024.
The 2D tiles were rendered out of 3D Studio Max, and the characters were meshes exported from Max.
> The sort of thing you'd solve in 30 seconds with Google in 2024.
This is unfortunately becoming increasingly untrue, as the forums where stuff like that was posted are rotting away, and Google’s advertisement optimized result ranking neglects the long tail.
And to the extent it is still true, it’s because pioneers like you figured it out and shared their results!
I've become a paranoid link hoarder because of this.
I'm Pretty Sure these things are true in comparison to the past:
- There is much more high quality content on the web than was ever before.
- The signal to noise ratio is _much_ smaller.
- Search results are getting cluttered by SEO spam, some of which is straight up copying from organic social media style sites (forums, SO, reddit, Github issues etc.)
It's extremely hard to find good content, even though _i know_ it is out there. Sometimes it's even hard to find sites I visited before, but I only remembered vague keywords.
And this is true especially for content that is of educational nature or interesting punditry. You know, the stuff that comes directly from people who have expertise and have earned a grounded opinion.
This is why I'm hoarding links to all sorts of interesting things. It's not an efficient way to do it and I don't know if there's a more general solution here. Very unfortunate.
To add to that, people (at least in my org) resort to ask "ChatGPT" for all sorts of questions. I don't share that sentiment, but oth, I never had trouble finding what I was looking for using Google. I agree though, it get's tougher with all that walled gardens.
I guess I'm becoming the old, grumpy "back in my days, we used Google!" type of guy.
I've been prototyping an isometric browser game, and the approach I took was to draw an explicit interactive grid of divs on top of the isometric tiles with CSS affine transforms to get each to fit its respective tile surface dimensions. OnHover, et. al. follow this transform perfectly.
It took me a while to get the transform figured out, but once you do you are basically done for an entire tile set. This is also robust to vertical/horizontal overflow of tile art. The browser gives you reasonable ways to get at the various coordinate systems. You can either take the screen space coords directly or inverse transform them to get the orthographic (i.e. purely top-down) tile coords.
Modern web browser tech is really something to behold. It's maybe the best game engine if you hold it right. There are some crazy things you can do in the browser in 5 minutes that are completely infeasible everywhere else. For example, what if some of the tiles are x264 video files and not just static PNGs? What if we also mix in tiles that are drawn using webgl/canvas at each frame update? We could have the client itself handle rendering of tiles using scene descriptions received from the server.
Even with Google, it's a difficult problem[1]. What if you have multiple items on the same tile? What if one of them is one pixel wide (e.g. a wall)? What if something in front of that tile is tall enough to block the view? What if you need pixel perfect collision?
My first solution (before the buildings in my game had multiple floors) was to take the ISO mouse position, grab a list of items within a cone spreading towards the screen, then:
1.) Loop through each item
2.) Create a sprite of the item (so I have direct access to RGBA info)
3.) Convert mouse coords to sprite coords
4.) Check if I'm hitting a pixel (i.e. alpha > 0)
5.) Keep track of this item
6.) Update if an item closer to the bottom of the screen (i.e. closer to camera) gets a hit
Once I added building height, this became impractical (too many items to loop through, sprite creation is CPU intensive).
New solution is to assign a 24 byte UUID to each item, convert that to RGB, draw it to the screen (invisible to the user), and then return a tiny texture every frame from the GPU at the mouse position. If the color in the texture is not black, then convert RGB back into the UUID.
PS: If you know how to draw so that alpha replaces existing alpha (instead of blending), please let me know so I can have 32 byte UUIDs!
Heh. I remember doing your first solution for an Eye of the Beholder-style FPV engine back on the Amiga circa 1994. This was using existing blitter mask bitplanes so there was no sprite creation, everything was very fast (assembly). Can't remember whether I did culling based on bounding boxes first.
I also remember being quite chuffed about coming up with a "novel" approach using dithered planar masks to offset colours into palette ranges for not-too-blocky lighting. Then Quake came out. You forget just how siloed we all were before the Internet took off; every wheel imaginable must have been reinvented so many times...
Hearing that other people struggled with this problem gives me solidarity. It took me an embarrassing amount of time to get "click and drag thing" working in isometric [0]. Rendering differently sized sprites was a whole other thing.
Figuring it out without google was immensely satisfying, though. Reminded me what I love about programming.
> The sort of thing you'd solve in 30 seconds with Google in 2024.
I’ve implemented this in my own games and I remember that the solution was basically raycasting. But it was NOT some 30 seconds thing. It was a major effort anyway.
(There are of course other options, like rendering a picture with a different color for each object, and sampling the color to figure out what you clicked on. And “color” may just be a 1-channel integer object ID.)
It was supposed to be a fully 2D game, and several months in we realized we'd run out of RAM for all the sprites with all their rotations. So somehow I managed to convert it into a 2D+3D game in two weeks.
I vaguely remember having played this game or a demo of it. I remember it being so difficult (or maybe I did not understand it) that I stopped playing after a while being frustrated. The dark and squishy atmosphere is great though!
I'll be honest - I'm spitballing here, as I havent made an isometric game yet. My instinct would be that the cursor, a visual UI element, only directly interacts in visual space - ie the screen tile is the screen tile, with no height information. When rendering though, you're projecting logical information to visual information. So when you render an object, you fill some struct that correlates screen tiles with last game objects' IDs that were drawn over it. The cursor logic just queries that structure.
edit: thats assuming you cant select anything that's been occluded. If you need to select things that've been occluded, lmao i dunno
It's sort of like a 4X version of a smaller tactics game like Advance Wars. Supply lines, region capture, unique units, etc.
It's isometric throughout, in part because I just love the aesthetics of pixel art isometric (having grown up on RTC, Age of Wonders, Simcity, Alpha Cen, Civ...).
We built a custom renderer for the game as well to support doing lots of crazy tile-layering steps that mix and match Z-depths based on various factors like specific units, terrain type, terrain decoration type, etc. Things like:
If a human soldier is on grass, the grass should be rendered on top of them, but if its a tank the grass "makes sense" to be under the tank, etc.
Art assets were based around 64x64 size tiles, and as someone else pointed out we were technically dimetric instead of isometric (as were most isometric games, dimetric feels too uniform).
Thank you! The project was a huge risk and I'm really thankful to the publisher (Modern Wolf) for believing in us enough to make it happen! At this point I just hope we're someone's favorite hidden gem :)
And credit where credit is due, the art wasn't me (I was the lead dev + creative director):
Character Art - Artyom Trakhanov
https://x.com/vor_bokor
There are other fun projections that you can use in games not mentioned in this article too. I personally have released a small puzzle game using cavalier projection. Here's a good diagram from wikipedia https://en.wikipedia.org/wiki/Oblique_projection#/media/File...
In hindsight actually I’d probably have put a little more of the computation side in the video. Based on comments I’ve received I think a good portion of the audience is just looking to get something working and doesn’t necessarily want to understand what a matrix is to get there. I think this article is a great resource for that.
Totally fair! I do think it leads people down a more interesting path though, transform matrices and processing big bitmaps lead folks to shaders! Though a DIY-with-a-scripting-language-and-iteration would definitely be a fun follow up video if you ever feel like it!
Most "isometric" games are in fact "dimetric", i.e. follow a projection where 2 horizontal pixels match 1 vertical pixel when tracing straight horizontal or vertical lines.
It's a relatively recent convention though. Isometric means "equal measurement". The measurement along each axis has nothing necissarily to do with angles.
The only difference is if you "stack" tiles vertically they slightly offset in 2d space from ones that are offset 1x+1y.
It's been widely used since the 80s or 90s - just kind of a clean way of doing it, as the other choices are not as pleasing, visually. Although, e.g. Ultima Online went with 1:1 military perspective, which looks pretty skewed in some ways.
My daughter (12) is interested in learning coding. I think making games might be a way to keep her interested. Do you think his courses would be too advanced for a teen?
Alternatively, get her an emulator of an old 8 or 16 bit system, I started coding at the age of 10 in these systems, with books that were oriented for kids.
If it was a few years later, I wouldn't be surprised if there were some courses for the recent Unreal Editor for Fornite that could ease a new programmer in as an interactive way to script, while learning a relevant industry tool (then again, it may also go the route of Roblox, so who knows?).
Honestly, I'd defer to either mods or games with level editors as a way to help gauge how much a child would potentially enjoy programming. Then they could try sme visual scripting like Scratch to try and make something outside of that environment.
My kid did a Minecraft coding group. It started with a mod that had a rollercoaster on it. They taught you how to to modify it in exercises. My kid tapped out pretty fast, I came to the conclusion they liked Minecraft, but the experience of coding it was a whole other matter.
Ironically, when I was a kid I used to read the code of computer games out of curiosity and that's exactly what got me into programming.
Hi. Author here! I'll try to be unbiased and say that if she's just starting out I'm afraid there are better beginner-oriented resources out there for teens. Frankly, what I do is very niche and it's not really utilitarian for those starting out.
I have a son and I asked the same question on how to start learning. I have decided to start with PICO-8 and then evolve to something else. Fingers crossed. :)
Pikuma is excellent! I have enjoyed going through the videos on the YouTube channel to help understand some 3d graphics rendering techniques. Everything that I have seen has been as easy to digest as this post. Highly recommend checking out the rest of the catalogue if this kind of content is interesting to you.
Readit News
The sort of thing you'd solve in 30 seconds with Google in 2024.
The 2D tiles were rendered out of 3D Studio Max, and the characters were meshes exported from Max.
[0] https://www.youtube.com/watch?v=9UOYps_3eM0
> The sort of thing you'd solve in 30 seconds with Google in 2024.
This is unfortunately becoming increasingly untrue, as the forums where stuff like that was posted are rotting away, and Google’s advertisement optimized result ranking neglects the long tail.
And to the extent it is still true, it’s because pioneers like you figured it out and shared their results!
I'm Pretty Sure these things are true in comparison to the past:
- There is much more high quality content on the web than was ever before.
- The signal to noise ratio is _much_ smaller.
- Search results are getting cluttered by SEO spam, some of which is straight up copying from organic social media style sites (forums, SO, reddit, Github issues etc.)
It's extremely hard to find good content, even though _i know_ it is out there. Sometimes it's even hard to find sites I visited before, but I only remembered vague keywords.
And this is true especially for content that is of educational nature or interesting punditry. You know, the stuff that comes directly from people who have expertise and have earned a grounded opinion.
This is why I'm hoarding links to all sorts of interesting things. It's not an efficient way to do it and I don't know if there's a more general solution here. Very unfortunate.
I guess I'm becoming the old, grumpy "back in my days, we used Google!" type of guy.
It took me a while to get the transform figured out, but once you do you are basically done for an entire tile set. This is also robust to vertical/horizontal overflow of tile art. The browser gives you reasonable ways to get at the various coordinate systems. You can either take the screen space coords directly or inverse transform them to get the orthographic (i.e. purely top-down) tile coords.
Modern web browser tech is really something to behold. It's maybe the best game engine if you hold it right. There are some crazy things you can do in the browser in 5 minutes that are completely infeasible everywhere else. For example, what if some of the tiles are x264 video files and not just static PNGs? What if we also mix in tiles that are drawn using webgl/canvas at each frame update? We could have the client itself handle rendering of tiles using scene descriptions received from the server.
I had a pet project for a while where I was extracting all the assets from Lineage 1 so I could try to recreate it.
My first solution (before the buildings in my game had multiple floors) was to take the ISO mouse position, grab a list of items within a cone spreading towards the screen, then:
1.) Loop through each item
2.) Create a sprite of the item (so I have direct access to RGBA info)
3.) Convert mouse coords to sprite coords
4.) Check if I'm hitting a pixel (i.e. alpha > 0)
5.) Keep track of this item
6.) Update if an item closer to the bottom of the screen (i.e. closer to camera) gets a hit
Once I added building height, this became impractical (too many items to loop through, sprite creation is CPU intensive).
New solution is to assign a 24 byte UUID to each item, convert that to RGB, draw it to the screen (invisible to the user), and then return a tiny texture every frame from the GPU at the mouse position. If the color in the texture is not black, then convert RGB back into the UUID.
PS: If you know how to draw so that alpha replaces existing alpha (instead of blending), please let me know so I can have 32 byte UUIDs!
[1] Source: I'm developing Metropolis 1998 https://store.steampowered.com/app/2287430/Metropolis_1998/
I also remember being quite chuffed about coming up with a "novel" approach using dithered planar masks to offset colours into palette ranges for not-too-blocky lighting. Then Quake came out. You forget just how siloed we all were before the Internet took off; every wheel imaginable must have been reinvented so many times...
Figuring it out without google was immensely satisfying, though. Reminded me what I love about programming.
[0] https://chriskiehl.com/article/home-theater-calculator
I’ve implemented this in my own games and I remember that the solution was basically raycasting. But it was NOT some 30 seconds thing. It was a major effort anyway.
(There are of course other options, like rendering a picture with a different color for each object, and sampling the color to figure out what you clicked on. And “color” may just be a 1-channel integer object ID.)
Absolutely loved it as a teen!
It was supposed to be a fully 2D game, and several months in we realized we'd run out of RAM for all the sprites with all their rotations. So somehow I managed to convert it into a 2D+3D game in two weeks.
edit: thats assuming you cant select anything that's been occluded. If you need to select things that've been occluded, lmao i dunno
I developed a large-scale, 2D isometric tactical strategy game called Cantata: https://store.steampowered.com/app/690370/Cantata/
It's sort of like a 4X version of a smaller tactics game like Advance Wars. Supply lines, region capture, unique units, etc.
It's isometric throughout, in part because I just love the aesthetics of pixel art isometric (having grown up on RTC, Age of Wonders, Simcity, Alpha Cen, Civ...).
This article was (and is) still the gold standard on describing isometric math: https://clintbellanger.net/articles/isometric_math/
We built a custom renderer for the game as well to support doing lots of crazy tile-layering steps that mix and match Z-depths based on various factors like specific units, terrain type, terrain decoration type, etc. Things like:
If a human soldier is on grass, the grass should be rendered on top of them, but if its a tank the grass "makes sense" to be under the tank, etc.
Art assets were based around 64x64 size tiles, and as someone else pointed out we were technically dimetric instead of isometric (as were most isometric games, dimetric feels too uniform).
And credit where credit is due, the art wasn't me (I was the lead dev + creative director): Character Art - Artyom Trakhanov https://x.com/vor_bokor
Unit Pixel Art - Cobralad https://cobralad.itch.io/
UI Art - Gustav Samuelson https://x.com/MechaBarbarian
https://youtu.be/04oQ2jOUjkU
It’s worth a watch! I personally prefer Jordan’s approach, which is more focused on the math than computation.
In hindsight actually I’d probably have put a little more of the computation side in the video. Based on comments I’ve received I think a good portion of the audience is just looking to get something working and doesn’t necessarily want to understand what a matrix is to get there. I think this article is a great resource for that.
The only difference is if you "stack" tiles vertically they slightly offset in 2d space from ones that are offset 1x+1y.
https://www.atariarchives.org/
http://redparsley.blogspot.com/2016/08/input-magazine-retros...
https://archive.org/details/input-hi-01
Or if you prefer something more up to date,
https://arcade.makecode.com/
[0]: https://pikuma.com/courses/ps1-programming-mips-assembly-lan...
If it was a few years later, I wouldn't be surprised if there were some courses for the recent Unreal Editor for Fornite that could ease a new programmer in as an interactive way to script, while learning a relevant industry tool (then again, it may also go the route of Roblox, so who knows?).
Honestly, I'd defer to either mods or games with level editors as a way to help gauge how much a child would potentially enjoy programming. Then they could try sme visual scripting like Scratch to try and make something outside of that environment.
Ironically, when I was a kid I used to read the code of computer games out of curiosity and that's exactly what got me into programming.
I have a son and I asked the same question on how to start learning. I have decided to start with PICO-8 and then evolve to something else. Fingers crossed. :)