Home
Articles
GBS files

GP32 dev
John's Quest
Oh No! (nammsc)

Articles

Isometry
Isometry 2
NES Sim City
Sprite Poses
[i am a wootest]
A long time ago, some guy discovered that if you positioned the camera in a 3d environment JUST RIGHT, you'll eliminate perspective. I don't know who that guy is, but if it weren't for him, some OTHER random guy would have figured it out, and thus, the original guy wouldn't be recognized for it. Whatever, the point is, perspective is eliminated. Perspective is that thing that makes it so that things closer to you are bigger, and things farther away are smaller. Obviously, on an old game system, it's a royal pain in the arse to have to deal with the varying sizes, and not to mention it even obscures things at times. This is sorta kinda where isometric view was somewhat born, to an extent. Isometry was probably around much longer than that, but the concept of putting it in a video game took longer to be realized.

Alright, do you know what the word isometry means? Iso, and metry. Iso sounds like isotope from science, which means "same element" or something, so we can guess that iso means "the same". Next, metry. What does metry sound like? It sounds like metric or something, which is a measurement system, so I guess it means measure. Put it together, and you get "the same measure". Make sense? Probably not. Remember what I said about perspective? If you get rid of perspective, do you have anything else that can vary the size of something? Guess not. This is isometric view; it's a way to simulate a 3d environment, even though it's really a 2d environment.

Now that we understand what everything means, you're probably wondering how you get rid of perspective. Actually, you're probably not wondering, but let's just say you are. Guess what, you can't actually remove perspective completely from view, otherwise it screws things up. Instead, you just 'cancel it out'. The concept behind this is that you eliminate anything that can actually come towards, or go away from the camera. The easy way to achieve this is to just position the camera in such a way that nothing moves directly on the come-towards-and-go-away-from axis. This axis can be either X, Y, or Z, since it varies depending on how the camera is looking. I don't think there's but one way to do this. Listen carefully here so you don't get lost: Look at the playfield at a 45 degree angle, and then pitch the camera down 45 degrees. Don't do anything to the remaining axis, because that's the "roll" axis, and everything will look sideways if you mess with it. Time for a visual:

Let's say I have that thing. Let's call it a tiled surface. Now hang on, that already looks isometric, because if I put something on it, it can't appear close or far away, right? I think that this can be isometric, but I could be wrong. Anyway, this isn't quite the 'isometric' that we're looking for. Know why? Because it's not 3d. There are only 2 useable dimensions like this (x and y), because we can't have something be close or far away, and the third dimension lies exactly on that close/far-away axis. Let's fix that. I can't just angle the camera down, because although that does move z out of the close/far-away axis, it also moves y into it, so we can't do that. Eventually we do have to angle the camera down, but let's move both x and y out of the way so it doesn't move into the close/far-away axis when we do angle the camera down:

For those who are very observant, you'll notice that it looks like it got bigger, but forget about that, that's just something I did. Now, if you observe what you're SUPPOSED to, you'll see that I just rotated the camera 45 degrees CCW. Note what happened to X and Y. An increasing X value will go down and to the right, and an increasing Y value will go down and to the left. Other games may have the x and y axises different, but this is how I do it. We still have a problem, z comes towards us, so you can't see it in this shot. Here's how to fix it:

Beautiful! Now we can see all 3 dimensions in such a way that all 3 will affect the 2d position of an object. The way you handle Z is up to you (whether you want 0 to be the lowest height, or the heighest height). Now, this method of isometric drawing is not 100% true isometric, because in isometry, all horizontal lines are drawn at a 30 degree angle. A 30 degree angled line will not look neat on a computer screen, because the pixel pattern will be uneven. To fix this, we just use a pixel pattern of "move horizontally 2 pixels, and then go up or down 1", and that's close enough. Notice how the corners of the tiles are lengthened, like the top and bottom corners are 4 pixels long, and the left and right corners are 2 pixels tall. This is because I used an even number for the tile size. Using an odd number (which most tile-based game systems will not support) will cause the edges to be nice and sharp. Even number or odd, they both work, so booya.

So now we know how to draw a flat plane, but what about slopes? Let's see what Marble Madness looks like:

DAMN, that is SEXY. Ok ok, but you have to admit, that looks really cool. Now when drawing these slopes, this is where the grid on the surface comes in handy. Notice how each slope in each direction matches up absolutely perfectly. If you are drawing a slope that goes in X or Y direction alone, then it's easy to draw it. If you were to draw a grid of vertical lines, where each tile's left edge began, you'll notice that the lines would be evenly spaced apart. That's step one. Next, draw a line which would be the edge of the tile that this slope is going to be attached to. Then draw the inner slope line (if this slope tile were to be connected to a corner piece, the inner line would be the line closer to the corner piece, and the outer line is the opposite). The start of this slope line DOES NOT OVERLAP the other tile's edge line. Instead, it starts just under it. This slope line keeps going until the other tile's edge line ends, so if you drew a vertical line through the ends of the edge line, and the slope line, it would match up. Now you have half of you tile drawn. Just select what you did, and copy it. Flip it horizontally and vertically, and paste it right next to the other half. Do not raise or lower the one of the halves, just put them right next to each other. Here's a visual to help you understand:

You can probably figure out how to make steeper slopes. Now here comes the fun part! TILE FUSION!! Just flat tiles and slopes aren't that interesting, so let's combine some tile styles to make a rhyme! And then we'll make some new tiles.
A corner piece is easy. Just take two slopes of opposite sides, cut the inner half out of both slopes, and slap the remaining halves together, like this:

Now it's time for non-sloped dips and bumps in height. These are where walls usually come from... unless you make it so that the tile just hovers, and the player falls through if he walks under it. Both work. Let's say I have this landscape:

Though technically correct, see how confusing it looks? The tiles in the center, did I just remove them, or are they hanging out at the bottom there? The dilhema with the center tiles is what's called an optical illusion. You really don't know for sure if those tiles at the bottom are supposed to be in the center. Unfortunetely, there are not many creative ways to get around that optical illusion. Now, if this landscape were just a tad larger, you wouldn't even see those bottom tiles, if they belonged to the center. When you are creating an isometric level, you MUST avoid mass view obstructions, because there is absolutely no conventional way to check what's in that hole, unless you have a top-view minimap in the corner or something. Just for reference, no, those tiles at the bottom are the bottom tiles, and the hole in the center of the landscape is just a hole. Ok, now that we have this technical crap out of the way, let's view some ways to dress up this tile mess:

Look at the difference! Now we know *FOR SURE* that the center hole is just a hole, and no tiles in it, and we also know the tiles at the bottom can NOT potentially be tiles in the hole. Not only does this look neater, it also clarifies the landscape.

Whoa, dammit, now I can fall off the landscape if I'm not careful around that bottom area. This specific isometric level map assumes that every tile has exactly one height, which means there can not be more than one tile in any given tile space, period. See where I cut the wall out at the bottom? It looks like I could have that stairs effect continue under those other tiles, right? Sorry, I can't, unless I add some extra lines of code to my isometric tile renderer and my physics engine, and not to mention hog up some more ram. The previous example made it impossible for the player to be 'underneath' a tile. This example opens up that possibility, but unless you make the changes I explained, there won't be anything underneath the tiles, and you'll just fall off. Hey, at least it makes the landscape somewhat kinda sorta more interesting, and maybe more challenging too.

Hi, I'm a footer.