Posted by: pixelero | September 22, 2008

Flash 10, Part 5 of testing drawTriangles, drawing a perspective tiling


… Continuing with my ‘2.5-D’ stuff for the new Flash Player 10:
This time I have a slightly reversed approach, animating the utvData of the perspective projection. In all simplicity this demo draws just one rectangle – of two triangles, naturally -, only varying the texture-coordinates and having the texture repeating, which makes the perspective. Here an illustration of the variables used:

distantSize = 11.0 means that 11 blocks of the bitmap are drawn at the top of the image … likewise for the bottom (nearSize, 3.0) and height (depth, 6.0). Keeping these parameters approximately in a same range renders a isometric-like view (the case nearSize = distantSize), while having a greater difference (especially with nearSize<1.0) distorts the perspective more.

In the demo you can see the effect by varying the settings and choosing a different bitmap.


I could have written this using pixel bender as well, but decided to go with drawTriangles due all the simplity as you can see by having a look at the actionscript source code.

1) ‘Release 1.0’ – works best with near square bitmap
2) ‘Release 1.0’ – aliasing at the distance might look horrible – specially with the hexagon bitmap, using a bitmap scaled to a smaller size might help with this.
3) Maybe a should combine it with this



  1. I get this error:

    TypeError: Error #2007: Parameter axis must be non-null.
    at flash.geom::Matrix3D/appendRotation()
    at PerspectiveTiling_fla::MainTimeline/enterFrame()
    at PerspectiveTiling_fla::MainTimeline/frame1()

  2. … there should be something like: .appendRotation(angle, Vector3D.ZAXIS); // not Z_AXIS
    or try: .appendRotation(angle, new Vector3D(0,0,1));
    // hope you have the same build as I

    … now it’s the code for a class PerspectiveTiling, I’ll upload a later, as an example how it really is used, something like:

    var persp:PerspectiveTiling = new PerspectiveTiling(600,300,someBitmapData);
    persp.matrix3D = new Matrix3D();

  3. […] The whole thing is done by first applying a perspective tiling, with graphics.drawTriangles, as in one of my earlier posts – and then adding the parallax effect by counting a displacement – a pixels position is […]

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: