I'm trying to create a game that mimics Tibia's projection style: mmoginfo.com/imagenes/foto_tibia.jpg
(source: mmoginfo.com)

As you can see, a 3d point is mapped to 2d like this: imgur.com/3SL6j.png

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

Where, as you can see, the projection is like this: imgur.com/8r2Xz.png

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?

  • 3
    \$\begingroup\$ 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. \$\endgroup\$ – Nic Foster Feb 9 '12 at 5:16
  • 1
    \$\begingroup\$ For anyone searching through this in future, this is called a Cavalier Projection, and we have plenty of other Q&A about it \$\endgroup\$ – DMGregory Jul 22 '19 at 3:09

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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