Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Quick Tip: Cheap 'n' Easy Isometric Levels

Difficulty:IntermediateLength:ShortLanguages:

If you're hacking a game together for a jam or #1GAM, you're probably not too concerned about doing it "the right way". In this article, I'll share some tips for drawing and coding pseudo-isometric levels quickly and easily.

Technically, "isometric" refers to a projection where the angle between the x-, y-, and z-axes (in screen dimensions) is 120°. And the proper way to convert between screen coordinates and isometric coordinates is by using a transformation matrix.

But forget that! In this Quick Tip, we're going to cut some corners and cheat a little.


1. Drawing a Grid

Check this out. We can turn a regular, 90°-grid into something that looks close enough to an isometric grid with two simple steps.

Step 0

Start with a grid like this (I'll call this a Cartesian grid):

CartesianGrid

Step 1

Rotate it 45°:

Rotated45

Step 2

Squash it 50% vertically:

CheatIsometric

Done! This should correctly be referred to as dimetric rather than isometric, as explained in this wonderful article, but it'll do for most purposes.


2. Adding an Object

That grid's not going to make much of a game on its own. Maybe you want to add chess pieces, maybe you want to add monsters - whatever you add, you'll need to know where to put it.

Here's the object I'll use (from The Noun Project):

ObjectToAdd

We don't need to rotate it or squash it to make it fit on the grid; just scale it down appropriately:

ManOnGrid

As you can see, the base (the guy's feet, in this case) should just go in the centre of the grid space. So we need to figure out where this is.

We could use trigonometry or a transformation matrix or something, but there's some simple algebra that'll do the job.

Step 1

Measure the diagonal tile half-width and half-height (in screen dimensions):

HalfWidthHalfHeight
This is zoomed in.

Step 2

Figure out the grid indices of the space you're interested in:

NumberedGrid

As you can see, I use the centre of the grid as the origin. The guy is standing on space (4, 2).

Step 3

Convert the grid space coordinates to screen coordinates, using this formula:

In our case, this will give screen coordinates of (35, 52.5).

This is actually the "top" corner of the space; to get the centre of the space, you'll need to add tileHalfHeight to the result for screenY.

Step 4

You'll need to add an offset. Just manually figure out the coordinates of the origin (centre) grid space, in screen coordinates, and add them to (screenX, screenY).

Your final conversion code looks like this:


3. Mapping a Click to a Space

Suppose we want to spawn an object in whichever grid space the player clicks on. How do we figure out which space was clicked?

With a little algebra, we can just rearrange the above equations to get this:

Then just lop off everything past the decimal points to figure out which grid space this is.


4. Rendering Multiple Objects

One little thing to remember: if you're blitting, make sure you render the objects in the back first! Otherwise, you could end up with some weird overlapping effects:

WeirdOverlaps

It's simple to do this; you just need to order those with the lowest (that is, top-most) screenY values first:

GoodOverlaps

Note as well that you don't need to resize the objects based on their distance from you; with a pseudo-isometric view like this, objects that are further away do not appear smaller than those closer to you.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.