itvbadmin

8bitrocket Diatribe: Drawing Vector Primitives into a BitmapData Object in AS2 and AS3.

8bitrocket Diatribe: Drawing Vector Primitives into a BitmapData Object in AS2 and AS3.

That doesn’t sound too difficult, and it really isn’t. I received an email question this weekend from a game developer who was stumped at how to accomplish this in AS2. I knew it was pretty easy to do in AS3 (I think Moock has an example in his latest book), but I had never tried it in AS2. Anyway, it turned out to be pretty easy, with one minor exception that I have yet had time to figure out. The below examples basically draw a vector primitive square on the screen and then take a BitmapData snapshot and re-draw that snapshot to the screen from the BitmapData. The square is a simple 20×20 at 0x,0y and then takes the snapshot and paints the BitmapData version at 0x, 50y. When I made a BitmapData object the exact size, 20 x 20, the right side and bottom are clipped in the copy. So, I just made the BitmapData object 21×21 and it looks fine. I hate crap like that though, but don’t have time tonight to get it to work without the 1 pixel size extension on each axis.

Anyway, since I don’t have to to make this into a full tutorial, here is the code and the example of the AS2 version: I just dropped the code on the main timeline.

AS2 Version:

[cc lang=”javascript” width=”550″]
//AS2
import flash.display.BitmapData;
import flash.geom.*;

this.createEmptyMovieClip(“drawCanvas”,this.getNextHighestDepth());
drawCanvas.lineStyle(1,0xFF00FF);
drawCanvas.lineTo(20,0);
drawCanvas.lineTo(20,20);
drawCanvas.lineTo(0,20);
drawCanvas.lineTo(0,0);

var tempBitmap:BitmapData = new BitmapData(21,21);
tempBitmap.draw(drawCanvas,new Matrix());

this.createEmptyMovieClip(“bitmapHolder”,this.getNextHighestDepth());
bitmapHolder._x=50;
bitmapHolder.attachBitmap(tempBitmap,bitmapHolder.getNextHighestDepth());
[/cc]

Nothing tricky going on here. Just create a MovieClip to use as a drawing canvas for the vector shape. Draw on it in and draw() that into a BitmapData object.
Here is the working example:

/downloads/blog/draw_intobitmapdata/as2_squaretobmd.swf

Here is the AS3 version:

[cc lang=”javascript” width=”550″]
//AS3
import flash.display.*;
import flash.geom.*;

var drawCanvas:Shape=new Shape();
drawCanvas.graphics.lineStyle(1,0xFF00FF);
drawCanvas.graphics.lineTo(20,0);
drawCanvas.graphics.lineTo(20,20);
drawCanvas.graphics.lineTo(0,20);
drawCanvas.graphics.lineTo(0,0);
addChild(drawCanvas);

var tempBitmap:BitmapData = new BitmapData(21,21);
tempBitmap.draw(drawCanvas,new Matrix());
var bitmapHolder:Bitmap=new Bitmap(tempBitmap);
bitmapHolder.x=50;
addChild(bitmapHolder);
[/cc]

This is even easier than the AS2 version because AS3 contains an actual Shape() class to use instead of a MovieClip for a canvas. Just draw into a Shape instance and the draw() in into a BitmapData object.

Here is the working example:

/downloads/blog/draw_intobitmapdata/as3_squaretobmd.swf

Leave a Reply