How to rotate an isometic view?

Question

I'm creating a view of isometric tiles using this simple nested loop:

const TILE_WIDTH:Number = 180;
const TILE_HEIGHT:Number = 90;

for( var i:Number = 0; i < 10; i++ ){
    for( var j:Number = 0; j < 10; j++ ){
        var tile:MovieClip = new TileMC(); // a movieclip in the library...
        //  with a different tile & label on each frame
        tile.x = ( TILE_WIDTH  / 2 ) * ( j - i );
        tile.y = ( TILE_HEIGHT / 2 ) * ( j + i );
        tile.gotoAndStop( mapTileLabelsAr[j][i] ); // a 2d array of strings
        addChild( tile );
     }
}

This arranges the tiles nicely but I need to rotate the map at 90 degree intervals. I don't need to move any tile's x,y positions (As that would screw up depth sorting), rather just select a different frame using the 2d array of label strings. How can I achieve that?

Answer 1

Check out this post on rotating a 2d array which you can apply to your mapTileLabelsAr array.

That is only for a single 90 degree CW rotation but it shows how the indices are transformed to help you work out an algorithm for your needs. You could also just feed the rotated result back in for other rotations.