1GAMPLAW: Isometric world

I had planned to add features to the two-dimensional jump experiment from last week, but I started a game-AI course at the university in which we have to work on 2.5D, so the isometric camera research I did fits perfectly here.

Name: Isometric world.
Example game: Bastion.
Platform: PC, Mac, Linux, Xbox 360, Google Chrome, iOS.

Behavior

The game’s camera is isometric. Despite that, the character’s movement is free and respects the player’s two-dimensional view of the screen. Finally, there’s a short zoom-in/zoom-out animation, so you can have two kinds of camera states: action (zoom-in for fighting) and explorer (zoom-out for visual scouting).

Solution

After reading three tutorials about isometric cameras in Unity, some with cheap tricks using the camera’s properties “incorrectly” (in spite for the future vector math that I’ll be using on the course), and some experiments on my own, I could achieve the desired results explained below.

The first thing to do is setting up the camera’s rotation values to (30,45,0), select orthographic projection, and rise it a bit by positioning the camera at (0,10,0). After that, I had to find the relation between that set up and having the world’s center/origin (0,0,0) in the center of the screen.

For the camera position set-up, I had to isometrically go down. That means moving negatively in both X and Z axes by the same amount. Moving up is just the opposite. Moving right means moving positively on the X axis and negatively on the Z axis by the same amount. As you may have already guessed, moving left is the opposite to moving right.  As you can see, it  just means rotating the movement vector 45 degrees (thanks math for so much fun). In a nutshell:

  • Up: translate (1, 0, 1).
  • Down: translate (-1, 0, -1).
  • Right: translate (1, 0, -1).
  • Left: translate (-1, 0, 1).

In my case, I rise the camera 10 units and, given the viewport values, I move -122% in X and Y to center the camera’s view to the world’s center. This was achieved by trial and error given the math explained above and casting rays until screen’s center shoots to world’s center.

Some tutorials handle the vertical movement by increasing or decreasing the camera’s Y position and I certainly don’t recommend it. Math is beautiful enough to use that trick (specially if your camera movement depends on other objects’ position).

camera_settings

The zoom behavior is very simple and achieved by changing the camera’s orthographic size calling a coroutine. It is an elegant way to create animations programmatically. Beware of your clipping planes and test enough to get the desired results according to your viewport configuration and game.

The character’s movement is based on the math explained. Get the input axis values, swap Y and Z, rotate and apply. The camera’s movement is based on the player’s movement, so it just means calculating the difference between positions and add that vector to the camera’s position.

isometric_controller_settings

For the sake of simplicity I wrote everything in one script so you can see directly how everything connects, but good software engineering practices are highly recommended when working on your game.

I had fun with math and vectors this week, so the research was completely worth it. You can test the experiment with the space key and the arrow/WASD keys on the keyboard.

[unity src=”201″]
2 Comments
  • esmitt
    February 17, 2014

    Great job! excellent intro. Go Bastion Go 🙂

    • Jorge Palacios
      February 17, 2014

      Thanks Esmitt. It really means a lot coming from you, my friend.

Leave a Reply