Latest news

Tips for Improving isometric view

5 comments

As you may know, we are currently working on ROTE Revolution, which is a 3D game with an Isometric camera and a top down view. In this new version we decided to add 3d elements and sceneries to our puzzle. That idea looked cool, but little did we know that we were running straight into a wall.

Here are some tips for you, in order to avoid having the same issues as we encountered, and also how to improve the look of your game!

At first, let’s talk about Isometric render; Isometric render was very popular back in the days with 2D games. In fact it was a cheap way to show a “3D” world with a 2D game engine.

Here is an example of two games released before 2000:

isoworld

Landstalker 1992 (left) and Alundra 1997 (right)

Isometric render is not visually accurate, but our brain could reconstruct the space, giving us the feeling to explore a full 3d environment. The basic rule, is that 1 feet displayed on screen will always have the same size anywhere on the screen. It’s commonly used for strategy games and classic RPG.

isoworld3Let’s verify that rule of equal size by highlighting the grid of Landstalker. As you may notice, the grid is fitting perfectly, elements are spread across the grid. To show the height, Climax uses cubes over the grid, and the characters represent 1 unit on the floor with a height of 4 units.

GTA2

GTA2 in 1999

It’s with the representation of the height that it get fishy. On Landstalker, it’s quite accurate, although the character looks terribly big compared to evergreen trees.

If the height was correct in isometric games, most of the time, you would only see the head and feet of your little fellow, just like in the first GTA and GTA 2.

Nowadays, to represent Isometric worlds, we tend to use the 3D engines rather than 2D engines (at least render the floor).That was already the case with Grandia in 1999; Complex elements were in 2d, and the floor was in 3D.

In a 3D isometric world, using 2D sprite to represent complex elements is a good idea. Indeed, as the sprite face the camera you can still cheat with heights.

With fully rendered 3D worlds, it is more difficult to cheat with height.
Indeed, the 3D engine render all elements with the correct size. So the artist can’t cheat, at least that’s what we thought.

gamescreen

Alundra 2 1999 (left) and Grandia 1999 (right)


While designing our new game ROTE revolution, we also encounter this “heights” problem. In the background of our game, we have wind turbines, but since they looked up to the camera they seemed really short like some sorts of dwarf turbines (see the picture on the right compared to the perspective view on the left)

Perspective view in Unity

Isometric view in the game

That’s why we got the idea tilting all tall elements, to give this illusion of tallness.

Fixed Perspective view in Unity

Fixed Isometric view in the game

Here is a few lines of C# for Unity3D (Apply It to the GameObject)

Note that If you set the “active” boolean to “true” of IsoFix, it will follow your camera constantly:

eolienne4-camera


After looking for a better solution, we stumbled upon an interview of Hiromasa Shikata about Zelda, where they revealed their tricks:

We went through a lot of trial and error with the top-down view. If you looked straight down from the top, all you could see was Link’s hat. So it looked like some mysterious green object moving around!

And Iwata also says :

A true top-down view actually has lots of problems. If you make it truthfully, it doesn’t look interesting at all. So you have to fake it-but in a good way.

That was a confirmation that we were not wrong about this “tilting tip” 🙂


Another Tip, is that we often tend to reuse the same asset over and over. We came up with a small script that randomizes it a bit for each model, so that each of them looks unique. (Left: Without the randomization,  Right: Same assets, with the Randomizer script)

Everything is looking alike

Now with a bit of random magic, it looks better 🙂

Here is our RandomizeObject script, it’s adapted to LowPoly objects with one color per 3d element.


I hope you liked this kind of articles, don’t hesitate to comment either below, or on our Twitter (@eXiin).  If we get positive feedback, we might do more of them 🙂

That’s it for today!

SebTips for Improving isometric view

5 comments

Join the conversation
  • Benedikt Stefan Vogler - 7 May 2015 reply

    Thanks for sharing! I did not think about it before, but now we have already made to much progress to start experimenting with this trick. I guess using this on single elements like creates a very distorted look. Though if I can achieve something I will come back and report 🙂

    Seb - 12 May 2015 reply

    Thanks Benedikt, I can’t wait to see what you will do with these tips!
    You’re not using Unity, Isn’t it?

  • Felipe Caldas - 16 March 2016 reply

    Thanks for sharing this! I myself am encountering these challenges while building an isometric game and this post definitely help!

  • MATov - 18 March 2016 reply

    Also you can look at 2.5D isometric plugins for Unity

  • an ta - 25 September 2016 reply

    Great!!!, thanks for the tips

Leave a Reply

Your email address will not be published. Required fields are marked *