Isometric View

Now we move onto making the game isometric!

(Note: Post is updated with more accurate description of isometric view and orthographic camera)


In terms of code what this means is that our camera is now set to an orthographic projection.  For Ogre3d it means doing this when you set up your camera:

camera->setProjectionType(Ogre::ProjectionType::PT_ORTHOGRAPHIC);

After this you might notice that some of the view is cut off in your box. This is where a little bit of math comes in. You'll need to set these two lines:

camera->setPosition(Ogre::Vector3(0,0,1200));

camera->setNearClipDistance(800);
camera->setFOVy(Ogre::Degree(90.0f));

And what those mean is how much of the world you can see.  What's a bit unfortunate is that after a few Google searches and a few Google searches specifically in the forum is that it reveals nothing about this.  You'll just have to learn this from graphics programming in general (it'd be nice to just have a crash course tutorial but I suppose nobody bothered to do so, it's understandable since it's not Ogre specific).

(Math here)

An orthographic camera is like your eye were expanded from a single point to a plane.  That is the difference between a projection view and an orthographic view.  In projection your view is like that of a square based pyramid where your "eye" expands outward based on the "field of view".  Within that pyramid the distances for "near clipping distance" and "far clipping distance" determine the volume inside the pyramid that is visible.

Anything closer than the near clipping distance disappears and anything further than the far clipping distance also disappears.  In the orthographic world, rather than your eye being a "point" it is a rectangular plane.  This then extends out in the same manner.

Here is a diagram:

So say you have a camera and you have a field of view and you have a near clipping distance, what might you see?

FOV: 90 degrees
Near Clip Distance: 100 units

Then the length of the base is found to be twice this:

tan(45) = x / 100

By height I mean the "height and width" of the rectangle at the top of the viewable area.  This gives you a sense of what values you might need to set to be able to view your world (various values would cause your world view to be cut off in the window).

Any mistakes in what I've shown, please point out in comments. :)

(Math stops)


Depending on what you set here, it affects how much of the world you can see. Fiddle around with it to get the correct image showing.

Next, if you want an isometric view (ala Gnomoria for instance), I chosen to replicate it via a camera rotation. Essentially you're rotated 45 degrees around the z-axis and 30 degrees downward from the x-axis. In Ogre code that means


Ogre::Quaternion cameraRotationZ = Ogre::Quaternion(Ogre::Degree(45), Ogre::Vector3::UNIT_Z);
Ogre::Quaternion cameraRotationX = Ogre::Quaternion(Ogre::Degree(60), Ogre::Vector3::UNIT_X);
camera->rotate(cameraRotationZ * cameraRotationX);

And you get something that mimics Gnomoria (or any other isometric game for that matter).  You then have to choose a scalar multiplier for your objects.  As all the meshes I create are 1x1 (or 2x2 for trees), I multiple all of them by a scalar before rendering them.  You could also just draw out your meshes to the correct size I suppose.

At this point the rendering order gets messed up a bit.  So, the way Ogre renders is that it does the furthest objects first and then renders in order from distance to camera.  This would be typical for an FPS where obviously you want things closer to block the view of things further.  Once you switch to isometric land, it's a little weird because the distance to your camera (which is now a line above the surface) shouldn't matter.  Why?  Because you care about the position of objects on the flat x,y plane and not their distance to the camera because everything is supposed to be the "same" distance.

What does this mean?  Let's look at Gnomoria:

Also that guy needs a beer. Where's the Dwarf Fort and the beer stash? Oh right, it's a Gnome hill. Whatever. :D

Okay, so Cultura is very similar, assuming I want my graphics to look like Gnomoria. Now, it's a little silly how much effort it takes to draw that artwork you see in Gnomoria. I'm sure most people think lowly of bit-art but it's not easy stuff! Anyway, so I have some hand drawn crapola to try out the same in Cultura.

So, I have no idea how Gnomoria achieves what it achieves. Maybe he has the engine specifically know how to render in the correct order. And what is the correct order? Well you need to render by each diagonal in your 2d grid.

For instance, your grid is a typical cartesian x-y plane.

0,2	1,2	2,2
0,1	1,l	2,1
0,0	1,0	2,0

Okay great!  So we render from the top down right?  No.  :(

We've rotated the camera for the crazy diagonal shaped squished squares that we all know and love.  So you render from the furthest diagonal from 0,0 first.  Then you render the next diagonal, so that it blocks the view of the furthest diagonal.  That's how you get that nice view in Gnomoria (although what neat tricks he uses, I wouldn't know).

What does that mean?

You render:

(2,2)

(1,2) , (2,1)

(0,2) , (1,1) , (2,0)

(0,1) , (1,0)

(0,0)

But I'm using Ogre3d.  So it basically renders whatever entities have the pivot point furthest from the camera and then works its way toward the camera.  Makes total sense in FPS.  Not so much here.  Remember the triangular prism that was our camera?  That totally flubs the distances and you get really strange behaviour.

So my answer was to screw with the z-plane.  Objects I need to block?  I shift them downward (downward in isometric land, so that is positive x direction, negative y direction) and then I push it upward in the z-plane.

I get this:

First thing you'll note is.  Gee that bush seems like it is just floating on top of the wheat!  Yes.  Yes it is.  So, you'll have to wrap your mind that in isometric land, 3d-ness is all illusionary.  Then you have to wrap your mind around that in fact I AM drawing in 3d.  What does that mean?  The bush looks like it is floating on top of the wheat because the art sucks and doesn't make it look nice.

The only thing that makes something look like it is 3d or that it is sitting inside the wheat is the quality of the artwork to produce the illusion of 3d.

But, you'll see that the tree blocks the bush which blocks the wheat which blocks the terrain.  I'm not settled on that order of blocking but additionally there are things I may wish to consider.  For instance, I may have two quads for wheat.  One represents the wheat itself which gets blocked.  The other is the wheat that gets displayed over everything, so you can see little strands of wheat sit in front of the tree and have a cool "3d" effect.

In fact, the trick may be to have a render order of grass -> bush -> tree -> bush -> grass.  The latter stuff is just pieces to slightly block the view of the other stuff and add more graphical niceness.  

Let's see Cultura now:

Yay.  I call this isometricgood.  Perhaps I'll be able to reach Gnomoria graphics level soon enough!

Aku: "You are 3d?!"
Cultura: "No isometricgood."