Isometric Transformation Matrix

Actionscript:
  1. var grid:Sprite = Sprite(addChild(new Sprite()));
  2. var matrix:Matrix = new Matrix();
  3. // make the grid sprite look isometric using the transform.matrix property
  4. matrix.rotate(Math.PI / 4);
  5. matrix.scale(1, 0.5);
  6. matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2);
  7. grid.transform.matrix = matrix;
  8.  
  9. // draw a grid of circles to show that it does in fact look isometric
  10. var rowCol:Number = 8;
  11. var num:Number = rowCol * rowCol;
  12.  
  13. var diameter:Number = 40;
  14. var radius:Number = diameter / 2;
  15. var space:Number = diameter + 10;
  16. var halfGridSize:Number = rowCol * space / 2;
  17.  
  18. grid.graphics.beginFill(0xFF0000);
  19. for (var i:int = 0; i<num; i++){
  20.    grid.graphics.drawCircle(i % 8 * space - halfGridSize, int(i / 8) * space - halfGridSize, radius);
  21. }

This snippet shows how to use transform.matrix to make a DisplayObject look isometric. This can also be achieved with nesting.

In the case of this grid of red circles, we rotate it 45 degrees, scale it 50% on the y and move it to the center of the stage (lines 4-6).

This entry was posted in DisplayObject, misc. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted July 20, 2009 at 4:31 am | Permalink

    How come you dont show examples for each post? I mostly view your posts from work where I can’t test the code in Flash :(

  2. Posted July 20, 2009 at 5:00 am | Permalink

    Well, the original idea for the site was that it was supposed to be about reading through code. Many of the early posts on the site are like this post.

    However, lately I have been posting swfs or stills with most posts. This snippet doesn’t do anything visually interesting so I didn’t think it needed an swf or a still…

    After reading your comment I decided a simple still certainly couldn’t hurt this post… :) [see updated image above]

  3. Posted July 21, 2009 at 5:28 am | Permalink

    Excellent! Thanks for doing this :)
    I must say, you do indeed post examples or pictures for the more complicated posts - I guess I was just frustrated when I saw this page on matrix transformation (which I’m interested in) which is why I posted.
    Thanks again and keep up the excellent work :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*