return to table of content

Isometric Projection in Game Development

qingcharles
34 replies
15h0m

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

codeflo
27 replies
12h25m

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!

MrGilbert
16 replies
9h59m

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.

meiraleal
15 replies
9h55m

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

MrGilbert
12 replies
9h48m

Any alternative to Google?

danielheath
5 replies
8h41m

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

red_admiral
2 replies
8h30m

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

einsteinx2
0 replies
7h4m

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.

darby_nine
0 replies
5h30m

Yea trivially

998244353
1 replies
5h56m

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.

darby_nine
0 replies
5h31m

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.

red_admiral
0 replies
8h24m

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.

meiraleal
0 replies
9h31m

Claude Sonnet 3.5

johnnyanmac
0 replies
9h26m

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

hooby
0 replies
8h28m

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

darby_nine
0 replies
5h32m

Kagi is solid

Xywzel
0 replies
9h1m

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.

layer8
0 replies
8h35m

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.

dgb23
0 replies
7h54m

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.

dgb23
9 replies
7h57m

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.

binary132
5 replies
6h49m

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.

dgb23
1 replies
6h41m

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.

DrScientist
0 replies
5h18m

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.

twic
0 replies
3m

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

setr
0 replies
22m

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.

immibis
0 replies
4h32m

Literally Reddit - the original version

fouronnes3
2 replies
7h30m

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.

viraptor
0 replies
5h22m

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.

LiveTheDream
0 replies
7h23m

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.

bob1029
1 replies
7h21m

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.

ChiperSoft
0 replies
3h46m

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.

klodolph
0 replies
2h42m

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

katzenversteher
0 replies
11h54m

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!

chungus
0 replies
8h10m

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

Lewton
0 replies
5h6m

Oh man, I completely forgot about that game.

Absolutely loved it as a teen!

kookamamie
13 replies
12h29m

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.

boredpudding
5 replies
11h48m

Which... is also in the article.

twelvechairs
3 replies
9h23m

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.

kragen
2 replies
6h5m

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?

twelvechairs
1 replies
5h0m

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.

kragen
0 replies
4h56m

?

kookamamie
0 replies
9h28m

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

Animats
5 replies
11h56m

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

kookamamie
2 replies
9h29m

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.

kragen
1 replies
5h58m

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.
cmiller1
0 replies
5h15m

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.

underwater
0 replies
11h21m

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

Galanwe
0 replies
11h41m

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

atan2
5 replies
13h34m

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.

adastra22
4 replies
12h40m

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?

moomin
0 replies
7h30m

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.

johnnyanmac
0 replies
9h15m

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.

gustavopezzi
0 replies
9h17m

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

teo_zero
3 replies
10h39m

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.

parasti
1 replies
9h10m

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.

gustavopezzi
0 replies
9h7m

Noted.

gustavopezzi
0 replies
9h8m

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.

lifeisstillgood
3 replies
11h51m

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

hooby
2 replies
8h25m

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.

kragen
1 replies
5h55m

they don't kill people when they crash

daelon
0 replies
3h46m

yet

graypegg
2 replies
13h20m

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.

jordwest
1 replies
12h46m

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.

graypegg
0 replies
3h36m

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!

actuallyalys
2 replies
3h59m

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

theandrewbailey
0 replies
1h48m

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

jayd16
0 replies
1h51m

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

redbell
1 replies
5h50m

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.

255kb
0 replies
4h38m

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

Waterluvian
1 replies
6h38m

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.

Arelius
0 replies
1h7m

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

stevengoodwin
0 replies
9h26m

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

hiimshort
0 replies
13h53m

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.

gustavopezzi
0 replies
4h52m

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

cmiller1
0 replies
5h45m

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