Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Isometric Projection in Game Development (pikuma.com)
370 points by ibobev on Aug 12, 2024 | hide | past | favorite | 93 comments


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.

[0] https://www.youtube.com/watch?v=9UOYps_3eM0


That’s awesome.

> 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.


Maybe it would be neat if there was a place online people could hoard, archive, and share their link troves. I know I’d be interested in that. A lot of this type of content becomes unmaintained and rots badly.


I like the idea of collaborative curation of quality web sources. I think it's a fundamentally hard problem, but my hunch is that many people do this anyway in some form or another.


You could argue that the web is exactly that - each page curates links to other pages - that's why pagerank worked so well in the early days for search.

The problem is keeping the SEO bots out.

So the challenge becomes how to scale a collaborative platform while keeping out the bad actors.


Are.na is an attempt at this, and I think has built up a decent community around it. Basically link/file storage + ability to navigate to other people’s lists storing the same link.

I don’t think it supports auto-archiving, though you could probably use it in conjunction with pinboard for that.


Pinboard is a bit like this, but with little emphasis on the social aspect, and no maintenance.


Literally Reddit - the original version


I agree with your observations. The time is just right for a Google search killer. There might be some AI in it, but the fundamental goal should be a massive increase of the SNR of search results.


For me, this has been perplexity.ai. Give it a query, it expands that into multiple queries (possibly chained depending on results) and synthesizes the results into an answer with citations.


Kagi's done that for me. Most is prefiltered and setting some domains to never appear again sorts out remaining spam. No generative AI, would recommend. The SNR is amazing compared to google.

On the other hand like the sibling comment mentions, perplexity is great at digging out obscure stuff sometimes. Provide enough details and use the pro type search and you may be surprised.


Hopefully RSS will made a comeback from this.

QR codes got a second lease on life. Although they remained common in industrial use, they fell out of popular use almost a decade ago. Their resurgence is one of the few persistent, positive social changes to come out of the pandemic.


I've become the same. I quickly realized that when I find a good article, I can almost never find it again later, even in my Chrome/Google history, so I've taken to immediately bookmarking everything I need later.


Chrome history search has always been very bad compared to Firefox. I don't know why, it's just text search over titles, but on Chrome you can never find squat. I always suspected it is on purpose, they want users to just use Google all the time.


My paranoia has grown from link hoarding to storing PDF dumps of sites that are really important to me. There've been so many times over the years that amazing resources just blip out of existence.


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.


Back in my days, Google worked. Now it is a waste of time. Someone that wants to hold himself to the notion that Google was/is good really looks like someone having issues getting old


Google still works for me, but you have to generously apply “tricks” like verbatim mode, double quotes, time ranges, domain filters, exclude terms (minus sign), include search terms that bias it towards forum results, and so on.


Google works very well as an alternative to knowing the exact link to something you already know exists and know how it's named.

But it has become very bad at _discovering_ valuable information.


Any alternative to Google?


Bing is pretty much the next best engine, but also has targeted ads (albiet less intrusive) and IMO less relevant results without fine tuning. DuckDuckGo uses Bing's backend without targeted ads (but still uses ads). Kagi uses google backend but without Google's ad-optimized algorithms. But that's a subscription solution.

sadly your best "free" alteratives is going back to the days of smaller, specific communities, and searching through there. If the forum has a bad search, you go back to google but can then use Site:[website.com] as a filter to fine tune your results. .


Yes, lots of them, but they are all just a matter of not giving all your search data to same company, non I know work better in this regard, in finding good forum posts or logs to answer questions you have.


weirdly enough, when asking for documentation/problem solving types of questions - chatGPT actually is a good alternative. you still have to double-check since you can't trust it... but you shouldn't trust random google results either, so that's not a big change.

it's kinda weird how the web has increasingly become optimized for bots - and filled with content created by bots... to the point where as a human you now need a bot to cut through all the bloated SEO bullshit and filter out what you actually want to know...


Kagi (I'm a customer) works much the same way google did in 2010 or so.


As a customer of Kagi, it's better than the current Google but it's still not the Google of 2010. Google sponsoring irrelevant results is one thing, but the bigger issue remains: in 2024, creating a trove of worthless "articles" and optimizing the crap out of search result performance is a viable business model. Even if the SEO is done with mostly Google in mind, Kagi still picks up enough of this junk to be a nuisance. No doubt the same is true for all alternative search engines.


> Even if the SEO is done with mostly Google in mind, Kagi still picks up enough of this junk to be a nuisance

It seems to be responsive to which sites you want ranked higher/lower. For instance I have wikipedia pinned which resolves a longstanding issue google has had where seo is prioritized over relevancy.


I looked up Kagi and their sources include "AI" - do you know if one can turn this off?


Yes there’s a toggle to turn it off in settings. It’s a little AI summary box they sometimes show at the top of search results.


Yeah, I keep that off - although the one time I looked at it, the text it generated was full of footnote citations, which linked to actual search results which supported what it was saying.

I still don't use it - I can't trust it not to misrepresent what its citations say, and if I have to check the cited pages I might as well just use regular search.


Yea trivially


Kagi is solid


Bing is ok for results, but tries to push too much crap on you - do you want to link to your microsoft account? We've got rewards for you, are you sure you don't want to link to your microsoft account? Have you tried our copilot AI? Do you want to switch to Edge as your default browser? Did you know you can link Edge to your microsoft account? Here's some news from a scummy right-wing tabloid paper on the home page that you might be interested in.

I think in the default windows setup, your bing searches are "integrated" with your user account in some way.

Look, I don't mind the top 2 search results being ads (if you make them visually distinct from the rest), but I don't want all the other crap.

Bing's engine through duckduckgo is better. The ads don't get in your way once you've learned to start reading at the third entry on the page.


Claude Sonnet 3.5


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.


Theres so many abandonware isometric games from the 90s and 00s that I’d love to see ported into browser based games.

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.


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!

[1] Source: I'm developing Metropolis 1998 https://store.steampowered.com/app/2287430/Metropolis_1998/


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.

[0] https://chriskiehl.com/article/home-theater-calculator


> 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.)


Oh man, I completely forgot about that game.

Absolutely loved it as a teen!


Haha, thanks.

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!


Really cool music on the "character screen" (~6:33). Takes me back.


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


Shooting my shot here:

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).


Beautiful game, incredible attention to detail. Sorry it hasn't sold 10x more copies but at least you got to make great art!


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

Unit Pixel Art - Cobralad https://cobralad.itch.io/

UI Art - Gustav Samuelson https://x.com/MechaBarbarian


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...


The animation by Jordan West referenced near the end of the article is included in a really good video by him too!

https://youtu.be/04oQ2jOUjkU

It’s worth a watch! I personally prefer Jordan’s approach, which is more focused on the math than computation.


That’s me, thanks for the mention!

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.


Which... is also in the article.


You're correct, I was hasty and didn't read it thoroughly enough before posting.


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.


i would say calling this projection isometric is 'a relatively recent error'

in an isometric projection all the edges of an axis-aligned cube are the same length. in the axonometric projection discussed here, which is dimetric rather than isometric, the vertical edges are of length 1 while the horizontal edges are of length √(1 + ½²) ≈ 1.118

is the fact that this projection is not isometric the reason zaxxon was called zaxxon and not zisom?


The horizontal edges are clearly measurable. The vertical (z) axis you are making a requirement that it has to show directly on top of a tile 1X and 1Y offset. That's on you.


?


i have no idea what you intended to say here


+1, that was essentially motivated because that allowed you to have power of 2s for your tiles, e.g. 64x32


That is a really clever hack. Who first used it?


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.


since 01981 i think

> The use of isometric graphics in video games began with Data East's DECO Cassette System arcade game Treasure Island,[6] released in Japan in September 1981,[7] but it was not released internationally until June 1982.[8] The first isometric game to be released internationally was Sega's Zaxxon, which was significantly more popular and influential;[9][10] it was released in Japan in December 1981[11] and internationally in April 1982.[8] Zaxxon is an isometric shooter where the player flies a space plane through scrolling levels. It is also one of the first video games to display shadows.[9]

(...)

> In 1983, isometric games were no longer exclusive to the arcade market and also entered home computers, with the release of Blue Max for the Atari 8-bit computers and Ant Attack for the ZX Spectrum. In Ant Attack, the player can move forward in any direction of the scrolling game, offering complete free movement rather than fixed to one axis as with Zaxxon.


Somewhere in storage I have a Colecovision and a copy of Zaxxon for it. The graphics in that game feel absolutely mind blowing for the era.


It’s not really a hack, it’s more the obvious implementation when you’re doing any pixel art.


AFAIK https://en.m.wikipedia.org/wiki/Knight_Lore was among the first isometric 3D games, and it used this ratio.


Gustavo is one of the best math and programming teachers out there imo. I am currently taking the Playstation course and it's so much fun.


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.

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/


I haven't taken it, but looking at the curriculum [0], the concepts covered are easily college level. This is very low level programming.

[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.


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. :)


Hello, Gustavo here (author). Thanks for sharing the article and for all tye feedback.


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.


Ironically, any isometric game nowadays would still use the 3D graphics capabilities under the hood so in a way you’re faking 3D by faking 2D. (Although I suppose you could argue that you’re not really faking 2D since you’re just using two out of three dimensions.)


What irritates me are the games that claim to be isometric but use perspective projection instead of orthographic projection.


Add a few more to the list. We usually render to a 2d screen so we usually fake 3d in 2d.


The third iteration of the PC strategy game, Grand Prix Manager, was meant to be in isometric. Instead of clicking on the "Designer" button, and going to a graphical database indicating how you'd proportional the designers work, you'd click on an isometric map of the office, and watch your PC walk there and discuss the new game plan.

The iso engine worked at 60fps, in 1024x748, back in 1997. But it was pulled. It was the right tech, but for the wrong game. When released GPM3 became GP World, it reverted to the traditional spreadsheet views of GPM1 & 2. (At least it looks like they kept most of my "3D" race code intact.)


Let me express my deep nostalgic feeling seeing Donkey Kong Country from 1994 being mentioned!

I was a huge fan of this game. When I was playing this game, I was always wondering how they were able to achieve such stunning 3D visuals where almost all of the other games in the SNES console couldn't. It turned out they are pre-rendered, as per the article.


Me too. It happens that I kept my Super Nintendo and play the game with my kid regularly. We have tons of fun. I still have the booklet where they say that they prerendered the graphics on "Silicon Graphics" computer, same that were used for Terminator. I also remember as a kid saying to myself "wow, it's 3D, it's so realistic"

Booklet: https://imgur.com/a/6mUVpXm


What I don't like about TFA is the inconsistent, sloppy use of coordinates. Initially x,y,z are relative to the viewer with z going from the eye to the object. Some paragraphs later x,y are the horizontal plane with z going up. Then x and y are swapped (to overlap x onto y you have to rotate it 90° clockwise, the opposite of trigonometry's standard), only to be swapped again in the picture that shows the value of the angles. Coming to screen coordinates, all formulas and text assumes that y grows down, which is customary, but not the pictures accompanying the explanation how to calculate screen position from y.

Frankly, I'd expect more consistency from someone who invites his students to focus on the mathematical aspects, not only on the code.


Author here. You're absolutely right. I got so used to reading resources on paper using Cartesian coordinates and having to account for it in screen space that I overlooked this conversion in the explanations. I'll go over it and amend it ASAP.


Yeah, small inconsistencies and some hand wavy language put me off from reading the entire article. Like, what do you mean by "vertices appear bigger in perspective projection"? Vertices are just coordinates in space with no size.


Noted.


Can anyone name an isometric 2D-rendered game they swear was 3D. Or a 3D game they swear was actually 2D? For some reason I find these most interesting.

I could look up the answer but I swear Bastion is entirely 2D. Though the characters might be 3D models constrained to certain angles.


> Or a 3D game they swear was actually 2D?

Doom sort of fits in this category? The original[1] renderer cheated significantly in order to render the scene. It had to, for the hardware of the era. But it's not capable of arbitrary rooms/map layouts, and so, e.g., the maps are strictly 2D. IIRC, this is the reason the camera is locked on the pitch axis.

Factorio is a 2D game, but the assets are 3D, sort of like the DK example. The fun comes in that the game is 2D grid of tiles (pretty normal) but not top down, and that causes some associated havoc when things try to rotate: https://www.factorio.com/blog/post/fff-133

[1]: many modern ports do, or can, use true 3D renderers, and are thus not quite the same as the original in this regard. Later ports are also capable of non-2D maps, including things like bridges and overlapping rooms that the OG renderer couldn't do.


Iirc, Bastion's characters are 3d characters rendered to 2d videos.or maybe that was just transistor and later?


I have generally ignored game development but I honestly it’s not for lack of respect - most of computer science is represented in good game dev


I used to say that video games do everything you might find in any other kind of software - only difference being, they do it 60 times a second.


they don't kill people when they crash


yet


Naya's Quest is about how the isometric projection can mislead you. (Requires jiggering to get Adobe Flash to work)

https://terrycavanagh.itch.io/nayas-quest

" You can download the flash player projector here

https://www.adobe.com/support/flashplayer/debug_downloads.ht...

Then from within the player, File > Open this link

https://terrycavanaghgames.com/nayasquest/nayasquest.swf"




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: