 A Flash Developer Resource Site

1. ## Tricky Isometric Rotation

Hey All,

I am creating a isometric tile based game and want to rotate a MC which is on my grid say 90 degress. I have tried different formulas adapting them etc but with no luck. Any help would be great.

Assume the grid is 10 x 10 isometric. I calculate my x and y for each MC on the grid as follows:

Code:
```    for (i = 0; i < this.rows; i++)
{
for (j = 0; j < this.cols; j++)
{
this._x =  (j - i)  * tileW / 2;
this._y =  (i + j ) * tileH / 2;
}
}```  Reply With Quote

2. I'm not sure what you mean by rotating something in your isometric world, so...
I'm going to assume you mean rotating the entire board?

And you want to keep track of where your stuffs would be after rotation?

If that's the case, you're first going to need a point of origin or
something - it's the part on the board that won't move even when rotating
(probably the very center of your board) The code I would use to find the new position would be as follows

Code:
```//I assume these are the coordinates for your center, and your ratio
centx=0;
centy=4.5*tileH;
ratio=tileH/tileW;
//this shows you're rotating 90 degrees
rotate=Math.PI/2;
dis=Math.sqrt(Math.pow((oldx-centx)*ratio,2)+Math.pow(oldy-centy,2));
ang=Math.atan2(oldy-centy,(oldx-centx)*ratio);
//calculates new coordinates
newx=dis*Math.cos(ang+rotate)/ratio+centx;
newy=dis*Math.sin(ang+rotate)+centy;```
Is that what you needed?  Reply With Quote

3. trogdor458,

Thanks for the reply......I will give your code a go in a few minutes. Just to explain myself better is I need the board to remain as it is (in its isometric form) but change the rotation of a MC on the grid tiles.

So if you imagine a cube with all black sides and 1 red side I would need to rotate the cube on the tile say 90 degrees so the red side has rotated but the cube has remained on the same tile.

Hope that makes it more clear, thanks again.  Reply With Quote

4. trogdor458,

Just for a quick update, im firing the code on a button press. So i used your code and upon each press the object is moved clockwise around the tile it was on. Im sure im missing something very easy.

Thanks again  Reply With Quote

5. So... you have a flat tile that needs to be rotated in place?
I guess you could use this:
Code:
```this._rotation+=90;
this._xscale=100;
this._yscale=100;
if(this._rotation%180){
this._xscale=100*tileH/tileW;
this._yscale=100*tileW/tileH;
}```
It works fine when I test it out, but your tile needs to be centered in your mc
(otherwise it will move a bit)

Is this what you needed?
If not I'm sorry, need to be more clear  Reply With Quote

6. Tried and failed with the latest code I think i should try to explain better. I have an isometric grid and isometric MC's. If you imagine a game such as Rollercoaster Tycoon the original isometric ones. When you place an object you can rotate it around so you can see the any side of the object.

Does that make sense ?  Reply With Quote

7. So you have a 3d box you want to rotate isometrically?
If I'm imagining it right, I think it'll just be easier to have 4 seperately drawn images of the same mc, one in each direction

Chances are that's what they did in rollercoaster tycoon  Reply With Quote

8. yes that is correct ! does it seem to difficult ? i would prefer to use actionscript transformation rather than pointing to different frames as it would cause a big headache in my code.  Reply With Quote

9. Well I'd have to see the graphic(s) you're transforming
I already posted the code for transforming a flat tile, but 3-dimensional objects can be trickier

4 graphics for each tile won't put a huge headache in your code
If you want to use 4 images instead, show me your code for placing tile graphics and it can be modified accordingly

I'd go with the individual images, overall easier and less headache me thinks  Reply With Quote

10. Looking at my code I have not wrote it in a way which would make it easy to change re the images. I have settled on two rotations by flipping the mc horizontally ( a mirror effect). What I am trying to do atthe minute and its not quite working is when I press a button it will flip the mc one way, then when the button is pressed again it flips it back and so on and so forth.

The code used is:
Code:
```               //To go left
if(thisObject.front_direction == 'right'){
thisObject._rotation =- 180;
thisObject._xscale *= -1;
thisObject._x = thisObject._x - (tileW * 2);
thisObject._y = thisObject._y + (tileH / 2) - 10;
thisObject.front_direction = 'left';
}
//To go right
else if(thisObject.front_direction == 'left'){
thisObject._rotation =- 180;
thisObject._yscale *= -1;
thisObject._x = thisObject._x + (tileW * 2);
thisObject._y = thisObject._y + (tileH / 2) - 10;
thisObject.front_direction = 'right';
}```
The problem is it will flip right, then flip back left but when i try to flip it right again the MC moves of the tile it should be placed on.

Any ideas ?  Reply With Quote

11. First of all I notice one of your lines
Code:
`thisObject._y = thisObject._y + (tileH / 2) - 10;`
Ought to be
Code:
`thisObject._y = thisObject._y - (tileH / 2) + 10;`
I believe that is the source of your problem, the flipleft and flipright things should be inverses of each other

That way when you use them both, you know they'll wind up in the same place you started

I don't understand the need to rotate or modify the _yscale if you're just flipping it though
Shouldn't _xscale*=-1 suffice?  Reply With Quote

12. To be honest I have been playing with this for so long i have gone crazy trying all sorts!!!!!!! The -10 is just an offset in placing x and y. Well I have managed to flip the object left and right upon clicking the same button. Here is the code for any of those reading.

Code:
```                //To go left
if(thisObject.front_direction == 'right'){
thisObject._rotation =- 180;
thisObject._xscale *= -1;
thisObject._yscale *= 1;
thisObject._x = thisObject._x - (tileW * 2);
thisObject._y = thisObject._y + (tileH / 2) - 10;
thisObject.front_direction = 'left';
}
//To go right
else if(thisObject.front_direction == 'left'){
thisObject._rotation =- 180;
if(thisObject._yscale < 0){
thisObject._xscale *= -1;
thisObject._yscale *= -1;
}
thisObject._xscale *= 1;
thisObject._yscale *= -1;
thisObject._x = thisObject._x + (tileW * 2);
thisObject._y = thisObject._y + (tileH / 2) - 10;
thisObject.front_direction = 'right';
}```
Thanks to trogdor458 for your time and patience   Reply With Quote

13. Here... just try this and tell me what happens:
Code:
```               //To go left
if(thisObject.front_direction == 'right'){
thisObject._xscale = -100;
thisObject._x = thisObject._x - (tileW * 2);
thisObject._y = thisObject._y + (tileH / 2) - 10;
thisObject.front_direction = 'left';
}
//To go right
else if(thisObject.front_direction == 'left'){
thisObject._xscale = 100;
thisObject._x = thisObject._x + (tileW * 2);
thisObject._y = thisObject._y - (tileH / 2) + 10;
thisObject.front_direction = 'right';
}```  Reply With Quote

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

 » Home » Movies » Tutorials » Submissions » Board » Links » Reviews » Feedback » Gallery » Fonts » The Lounge » Sound Loops » Sound FX » About FK » Sitemap 