Bringing some depth for your 2D Game Design - Isometric and Dimetric perspective techniques

http://cgcia.blogspot.kr/2012/03/bringing-some-depth-for-your-2d-game.html

If you are totally familiar with the perspective techniques and know what isometric anddimetric perspectives are, and you just want the formula to create your own perspective game with 2D graphics, please skip this text and go for the Isometric and dimetric perspective formulas tutorial.

If you are not so secure about those terms above but still wants to built your game with some 3D feeling without using any 3D software sit tight and check it out:

I was today at work and a friend of mine come with this educational material that has a very useful content; some very simple math associations to create your own “3D” game from a regular 2D programming and designing.

For those who are more familiar to the subject you know what I’m talking about, I’m talking about adding perspective to your 2D game graphical design.

So what is so new about what I’m talking about here, since nowadays we have so many powerful 3D game engines pretty accessible to anyone?  Well I used to joke with my students 3D art brings up a whole new dimension to the equation to take in matter.

The ones who tried by themselves to learn 3D modeling and animation knows that it is a whole new subject, that even for experienced designers it maid be a big technical barrier.

So the good news is you can bring some 3D depth to you 2D art using very simple math when compared to 3D matrixes and complex geometry.

That’s how they did some best sellers like Blizzard's Warcraft and Diablo, the whole The Sims franchise and so many other classics.

I will than create here a series of 2 tutorial posts to explore 2 different perspective projections based on this nice material that may colleague have found:

•        Isometric Perspective Projection
•        Dimetric Perspective Projection

Ok first of all what it is perspective and what does this has to do with 3D graphics?

Actually will you be surprise if I say that non 3D editor such as Maya, 3D Max, Cinema 4D or Blender produce 3D graphics for real? This is technically true, because unless you have a 3D monitor everything that you see in your monitor is a flat 2D projection of a virtual 3D space.

So why do you see things “in 3D”, when you produce graphics over a 3D software? Because besides you monitor can display only height and width dimension (2D) what you see in a simulated 3D space is a perspective projection of an abstract 3D model into a 2D plane, your monitor screen.

Ah… what? Observe the illustration bellow:

The blue solid represented above has actually 3 dimensions represented by “x”, ”y” and “z” axes. However although this sounds contradictory you are only seeing 2 dimensions at your screen, height and width.

So how is this possible?  It’s simple, even if in some complex 3 axes mathematic model exists under the hood of 3D games or 3D editors, all this spatiality is flatten in a plane projection like you see it at the illustrations.

And the illusion that you have that this scene has actually depth is called perspective.

There are so many perspective techniques that mimics how does your brain interpret graphic information obtained by your two eyes that I would need to write a book here to explain it all technically but here we have few examples of perspective projections:

Ok enough theory; tell me about my game design!

Ok, ok, one more thing, to make things simpler pay attention on those real life perspective rules:

•     Objects located further away from an observer looks smaller
•     Objects located closer to an observer looks bigger
•     Moving things appears to move slower when they are far away from an observer
•     Moving things appears to move faster when they are closer from an observer

But to be honest if you take all those rules here in matter plus the distortion cause by the curvature of your eye lenses to create graphics… voila you have what we popularly call 3D graphics.

But this is complicated, mathematically, technically. You would have to create rules to move your objects on screen other than just vertically and horizontally but also composing those directions to create the 3^rd depth illusion. Besides you would have to re-scale your game objects all the time to create the depth illusion.

Couldn’t things be simpler? Yes they can, thanks to our ancient mathematicians friends that also have think about simpler perspective models. So if you could eliminate lenses distortion and resizing problems you will have what is called Axonometric Projections.

Those simplified perspective models eliminates the complex variables from your equation but still are convincing enough to add some cool 3D effect for your games.

So first you need to learn how to draw things in those perspective techniques. I’ll teach you to do so in the next tutorial.

And after that you need to learn how to convert your height and width monitor coordinates in to height, width and depth coordinates in your Axonometric 3D environment in a simple way (I'll give the formulas also). Then, voila, you have a 3D game.

So see you in next tutorial.

Cheers

http://gamedev.tutsplus.com/tutorials/implementation/cheap-and-easy-isometric-levels/

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

Step 1

Rotate it 45°:

Step 2

Squash it 50% vertically:

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

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

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

This is zoomed in.

?

1 2	var tileHalfWidth = 17.5; var tileHalfHeight = 8.75;

Step 2

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

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:

?

1 2	screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;

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 addtileHalfHeight 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:

?

1 2	screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;

---

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:

?

1 2 3 4 5 6 7

// First, adjust for the offset: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY;   // Now, retrieve the grid space: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;

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:

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

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