3
\$\begingroup\$

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

Image from here

image

\$\endgroup\$

3 Answers 3

11
\$\begingroup\$

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.

axonometric projections

(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

tile

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.

\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ Greek for "equal measure" ! Thanks. So I know what "isometric" means finally. \$\endgroup\$
    – Emadpres
    Feb 27, 2015 at 17:52
  • 10
    \$\begingroup\$ "When things appear to be the same size no matter how you move the view around, that's..." a parallel projection, typically orthographic, though sometimes oblique. Isometric is just one particular orthographic projection, where the three primary coordinate axes are equally foreshortened, and form angles of 120 degrees with one another. The angles in this image are steeper than this, so it's not technically isometric, although it is visually similar. \$\endgroup\$
    – DMGregory
    Feb 27, 2015 at 20:34
3
\$\begingroup\$

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.

tile template

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.

oblique mockup

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.

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Tiny quibble: (I know I'm losing this war) a 2:1 ratio is not isometric but dimetric. A true isometric projection has the irrational ratio √3:1 so it's not as suitable to pixel art, but can be well approximated in 3D. \$\endgroup\$
    – DMGregory
    Feb 14, 2018 at 14:12
  • \$\begingroup\$ @DMGregory You are right but... \$\endgroup\$
    – Madmenyo
    Feb 14, 2018 at 14:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .