How to render isometric sprites in 3D without distortion?

I want to make a game like this. The game world is fully 3D (objects can move in the x, y and z direction), however all sprites are created in a fixed isometric perspective, and the camera looks down at the game world at a fixed angle. What's the best approach of rendering such world?

This is what I tried so far, with the camera on orthographic perspective, however, this distorts the sprites (they get compressed on the Y axis). Can you apply an correction to the orthographic perspective for that distortion?

 

I've thought about it a little more and I think I need to do something with the projection matrix, but I would have no idea how. It's frustrating that I can't seem to find any good examples of this after hours of googling.

I also thought about a different way of phrasing my question. In this game, assuming this is a true top-down 2D view, how do they simulate the height of the projectiles?

 

There are assets in the store that may help with what you are after

 

Thanks! Which assets are you thinking of? The Ultimate Isometric Toolkit? I'm not sure if that is really what I want to do, and it's pretty expensive to just try out.

 

Yeah, ones like that. There's a couple of them. Check the pictures & any clips to see how they are doing it & if your scripting is ok see if you can work some of it out. Use it as a learning experience. Either that or email the devs of the kits & ask if theirs will be able to do exactly what you want before you buy.

 

Generally you would use an orthographic camera, but straight-on, not tilted. Then sprites (which are already drawn with the isometric projection) are layered properly to give that pseudo-3D effect.

This article looks like a decent introduction.

 

Thanks. I've thought about this approach. But what I fail to understand is, how do you represent height when each object only has a X and Y coordinate? You can't use the Z axis for that, since that just moves the object closer/further away from the camera. One approach (that I've tried) is give each object a 'float height', and render each object at (X,Y+Height/2), but the problem with that approach is that the object transform (X,Y,Z) no longer corresponds with its position in the game world (X,Y+Height/2,Z), complicating everything.

 

doing it in 3D with ortho camera would dramatically simplify this process. You can use traditional sprites still for player objects. This is not slower. It's probably going to render faster.

 

Thanks. If I do it in 3D, how do I prevent the stretching of sprites when viewed under an angle with ortho camera?

 

@DnDiene, I don't think there is any shortcut — if you want to use the 2.5D approach, you have to just separate the object's rendering position (its transform.position) from its conceptual position (where it is in the "game world"). This is how computer games have been made for millenia; you can see ancient Egyptians trying to visualize the correspondence between these two coordinate systems...

​

The alternative is to keep conceptual and render position the same, and rotate each one to face the camera, which I think may be what @hippocoder is suggesting. That does simplify things, but it will only work when all your objects are very close to the same size. Otherwise, you will get objects overlapping in incorrect ways. For example, if your ground is one big sprite as shown in your original image, then when you rotate it up to face the camera so that it's not compressed, it will hide objects that should be sitting on the ground behind the ground's pivot point.

You're also likely to run into thorny issues getting tiles to properly mesh together, though in theory if you position everything just right, it will work.

But personally, I would just go for the classic approach, where the transform position of each object relates to the conceptual position according to the equations in that article.

 

In your start method you can rotate them to face the camera. This only needs doing once as there is no perspective.

(Btw my method has no issues with sizes really from my own experiments - because the levels are 3D simple geometry - ie cutout shader textured cubes to mimic iso sprites).

 

Thanks Joe for your elaborate answer. It seems like having a 'virtual' height axis is a valid approach. I've used this approach before, but it felt like a hack to me at that time. Maybe it is not the concept, but the implementation of it that makes all the difference.

I'll first try to see if stretching my sprites works, but if that fails, I'll use the virtual height axis aproach. Thanks to all who responded

 

Ah, I see — @hippocoder is suggesting you mostly abandon the isometric-sprites approach, instead using real 3D objects for most of your objects, and using sprites just here and there.

That'll certainly work, and he's right, it is quite a bit simpler than either approach to making 2.5D. But it assumes that you can actually do that, i.e., that the environment & look you want to achieve can be achieved with mostly textured cubes. You won't get pixel-perfect iso games this way, but it can certainly be a decent look of its own.

 

You know, I never really thought about many quite different approaches there are to doing 2.5D graphics in Unity. It might make for an interesting blog post or Gamasutra article, eh?

 

I've done a bit of everything mixing retro and 3D backgrounds was around 6 months research at one point, trying all the approaches.

 

@DnDiene, you should probably also have a look at Isometric 2.5D Toolset. $40 is a very reasonable price for something that's going to save you hours of time and frustration. (Note: I haven't used this myself, but I've heard good things about it.)