Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to create a game that mimics Tibia's projection style:,

As you can see, a 3d point is mapped to 2d like this:

So I've downloaded Three.JS and a lib to create a Orthographic Camera. But I'm getting this:

Where, as you can see, the projection is like this:

Which is not what I want. What can I do to get the desired projection?

NOTE: I noticed the Orthographic Camera object is just a regular camera with camera.projectionMatrix changed, so I guess I could create my own kind of camera object, probably finding out the right projectionMatrix, but how?

share|improve this question
I'm fairly certain the image you have posted is a pure 2D perspective, with sprites that make it look as if you have an isometric view. Games like Diablo did something similar, it's generally referred to as 2.5D or isometric. The perspective for the camera is no different than a 2D game, the sprites give the illusion of depth through their look and layering. – Nic Foster Feb 9 '12 at 5:16
up vote 4 down vote accepted

What you'll need to do is create a sheared projection matrix that leaves the X and Y axes alone but bends the Z axis up and to the left. The matrix to do the shearing would generally look like this:

1 0 A 0
0 1 B 0
0 0 1 0
0 0 0 1

Or possibly the transpose of that, depending on whether your math library is using a column vector convention (as above) or a row vector convention. You'll probably need to multiply the above matrix with a regular 2D top-down projection matrix (which order they go in will also depend on the vector convention). Here, A and B are numbers that control how far the Z axis gets sheared along the X and Y axes respectively. I'd suggest trying values between -1 and +1 for these and tweaking to get the look you want.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.