explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Bitmap Fills oriented for Isometric Projection

1 Comment

Notes to self…

Given an image suitable for use as a bitmap fill, certain matrix transformations need to be done in order to orient the image to the xy, xz, and yz planes in the xyz octant.  Assume the following octant orientations:


Here are the following matrix tranformations:

  • XY plane orientation – this is the equivalent to rotating the image by 45º and then reducing the height by half the original scale.

    var m:Matrix = new Matrix();
    m.rotate(Math.PI / 4);
    var m2:Matrix = new Matrix();
    m2.scale(1, 0.5);

  • XZ plane orientation – this is simply skewing the image in the flash-based coordinate system along the  y axis.  Since most isometric projections (including the as3isolib) use a 2:1 ratio, we use Math.atan(0.5) rather than Math.PI / 6.

    var m:Matrix = new Matrix();
    m.b = Math.atan(0.5);

  • YZ plane orientation – same as the XZ plane however we use the skew value * -1;

    var m:Matrix = new Matrix();
    m.b = Math.atan(-0.5);


One thought on “Bitmap Fills oriented for Isometric Projection

  1. Wow! This is really nice. I downloaded the bitmap_test and tried it out… took me a minute to get to work in FlashDevelop, but got it up and running and the bitmap rendering is really nice. Great work with it 😀

    I am really excited to work with this nice feature.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s