What is Clash of Clans projection called?

Question

What is the Clash of Clans projection (it doesn't seem to be isometric Image )

Image from here

Answer 1

It's basically an isometric projection. Your second image is closer to a dimetric projection.

Both projections are kinds of axonometric projections. The differentiating factor between them is the mainly the angle between the projected axes.

(The above images are a subset of this image from Wikipedia).

As you can see above, an isometric projection has angles that measure 120 degree between any pair of axes. If you look at the tile containing the flagpole in your image

you can see that the angles between the tile borders (X and Y axes) and the flagpole (Z axis) don't quite form even 120 increments (they're somewhere between an isometric projection and an oblique one, it looks like). But it's close enough for government work.

Answer 2

It's isometric.

How can you tell? When things get bigger the closer they are to your point of view, that's "perspective," because your perspective matters in the view. When things appear to be the same size no matter how you move the view around, that's "isometric" (Greek for "equal measure").

Since the objects at the bottom (what should be the near edge) of the screen are the same size as objects at the top (what should be the far edge), we know it's isometric.

If this were 3D and we were looking at models, we would use Perspective and Orthographic projection, respectively, which are two mathematical models of how we map coordinates in 3D space onto a 2D surface for display.

Answer 3

I wanted to mimic this projection as well and there is next to none good information on this topic, which I find very strange. A oblique projection like Clash of Clans creates a more downward/angled look over a basic 2:1 isometric projection and buildings for example do not obscure as many tiles. This projection is helpful when the player is allowed to build on each individual tile and thus needs vision of it in the first place. The individual buildings still have a "height" constrained but since the angle of a oblique projection is much steeper a building automatically look higher then a isometric 2:1 projection.

So I have fiddled around with a tile and Clash of Clans does a 4:3 projection. This tile can be tiled using 32:24 (4:3 ratio) increments.

To generate sprites from 3D assets in the correct projection you need to angle your orthographic camera 47.5 degree downward when it is facing your model. I am not the best in matrix math and it would be nice if someone could add an explanation for this but it creates a perfect 4:3 render when rendering without AA. Here is a little map mockup with a stunning building I modeled and rendered.

The tile picking remains the same as in a isometric perspective as long as you use the proper tile dimensions (64, 48 in the case of the I linked).

// From flat index/coordinate to the oblique projections
int ox = (ix - iy) * Tile.width / 2;
int oy = (ix + iy) * Tile.height / 2;

// From world position to index/coordinate
int ix = (int)(wx / (Tile.width / 2f) + wy / (Tile.height / 2f)) / 2;
int iy = (int)(wy / (Tile.height / 2f) - wx / (Tile.width / 2f)) / 2;

This does expect the bottom corner of the bottom tile to be at 0.0. an Easy way to do this is to just offset drawing by half the tile width.