Animate position in isometric 2D space

[Kalleheikki Kannisto]

Here’s how you could do it for 30 degree isometric:

Make a precomp that is a square, about 1.5 times the longer dimension of your final comp. Put your isometric elements inside the precomp and scale each of your original elements to 173,2% (square root of 3 times 100%) on the y axis, then rotate them 45%.

In your main comp, add two separate Transform effects to your precomp, the first one to rotate the comp -45 degrees, the second one to scale the height to 57,7% (1 divided by square root of 3 times 100%).

Now you can drag anything inside the precomp x and y axis and it will become the 30/150 degree isometric axis in main comp.

[Walter Soyka]

Position a 2D layer which you’d like to move over the isometric grid in the center of your origin tile.

Add a Point Control effect to the layer and name it “Grid Position”.

Add a Slider Control effect and name it “Tile Width”. Measure the width of your isometric tile in pixels and adjust this slider accordingly.

Add a Slider Control effect and name it “Tile Height”. Measure the height of your isometric tile in pixels and adjust this slider accordingly.

Alt+click the position stopwatch and enter the following expression:
xGrid = effect("Grid Position")("Point")[0];
yGrid = effect("Grid Position")("Point")[1];
x = (xGrid - yGrid) * effect("Tile Width")("Slider")/2;
y = (xGrid + yGrid) * effect("Tile Height")("Slider")/2;
value + [x,y]

You can now use the Grid Position effect to address the screen in tile units.

[Kalleheikki Kannisto]

@Walter: Nice!

[Chris Vo]

Thank you both for your responses. I went with Walter’s method because I’m importing iso graphics from Illustrator, therefore Kalle’s method would distort my original artwork (I presume).

Clever method, Walter, it’s working like a charm!