4
\$\begingroup\$

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?

\$\endgroup\$
2
  • 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\$ Commented Feb 9, 2012 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\$ Commented Jul 22, 2019 at 3:09

1 Answer 1

Reset to default
5
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.