UnknownFury || Logicstudios.co.uk

Posted on: 14th July 2008

Basically, in this tutorial I'm going to teach you about bitmapdata and how to build an engine with destructable terrain. Here is what our finished product will look like.

Alright, so first off I'm going to draw my terrain. It doesn't have to be anything special, we can change it later if you wish. Once you've drawn your terrain select it all and convert it to a movieclip. Then give it an instance name of ground. Here is mine:

What we're now going to do is make a new movieclip, with the same image as ground but using bitmapData. To do this we're going to use the following code. Make sure you put it in the main timeline.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

import flash.display.BitmapData;
import flash.geom.ColorTransform;
import flash.geom.Matrix;

var myCT:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);

var levelBitmap:BitmapData = new BitmapData(550, 400, true, 0x00000000);

var m:Matrix = new Matrix();
m.translate(ground._x, ground._y);
levelBitmap.draw(ground, m);
ground.swapDepths(_root.getNextHighestDepth());
removeMovieClip(ground);

createEmptyMovieClip("levelBitmapMC", _root.getNextHighestDepth());
levelBitmapMC.attachBitmap(levelBitmap, 1);

Okay, the explaination...

Lines 1-3 - These first 3 lines simply import the necessary classes to use the bitmap data. The first one loads the BitmapData class, the second ColourTransformations and the final allows us to use matrices. All of these are import for what we are going to do. If you do not import these you will get compiler errors.

Line 5 - This sets up our colour transformation variable which we will be using later on when making the terrain destructable. I'm not going to go into detail as to exactly what this does so if you want to read further into simply Click here.

Line 7 - This line creates our new bitmapData object. We give it 4 properties which are width, height, transparent, fill colour. In this instance we have set the width and height to the size of the stage. Then we have transparency to true so that it is by default blank. We then fill it with black. You can do other colours, but its easier to fill it with black as default and then work from there.

Line 9 - This creates a new matrix with the name m. We're going to use this matrix to position our ground movieclip correctly.

Line 10 - This actually gives a value to the matrix we created. We want it to be in the same position as our ground movieclip so we give it the same coordinates. If you want to see this actually working use something like ground._x-100 and notice how our new bitmapdata image is moved 100pixels left.

Line 11 - Here we actually add something to our levelBitmap variable we created. We do this using the draw function. It has 2 parameters which we are using, being source, matrix. Our source is ground, as we want to apply this image to our bitmapdata and our matrix is m as this makes sure it is positioned correctly.

Lines 12 - 13 - Here we swap the depths of ground and then remove it. The reason we swap it first is because you have to give an MC a depth before you can remove it using removeMovieClip. The reason we are removing it is beacuse we have extracted the shape and applied it to our bitmapData so we no longer have a need for ground.

Lines 15-16 - What we do here is firstly create a new movieclip and then attach our bitmapData into the movieClip. This is what makes it actually show up. We don't attach the bitmapData straight to _root however, as its easy to manipulate when its inside a movieclip as we can give it actions etc.

We now have our bitmapData created. If you hit ctrl + enter you'll notice it looks identical to how it was before. Although, it looks identical we have a new movieclip with bitmapData in. If you play around with the matrix among other things then you'll probably see this as it will move around.

Now what we're going to do is create a movieclip called hole. Mine is a circle 10pixels in diameter however, you can make it whatever size you fancy. Make sure it has the instance name of ground. Then in the main timeline underneath our current code add this:

1.
2.
3.
4.
5.

_root.onMouseDown = function(){
var pos:Matrix = new Matrix();
pos.translate(_xmouse, _ymouse);
levelBitmap.draw("hole", pos, _myCT, "erase");
}

Line 1 - Self-explanatory and you should know it if you're reading this tutorial so I'm not going to explain it at all.

line 2 - Like earlier, this creates a matrix. This one is called pos and we're going to use it to position the hole we're going to create in the terrain.

Line 3 - Again we've seen a line similar to this before except this time our matrix is telling it to move to the position of the mouse instead.

Line 4 - This line does the actual deleting. Like we did earlier, we're using the draw function. But this time we're using it in a slightly different way. This time we have included 2 extra parameters. The first new one is our colorTransform variable. Like I said earlier though, I'm not going to go into this. The next parameter I have added is erase. This, as the name says, erases from the bitmapData as opposed to adding to it. This generates our hole.

So thats it. Here is the final product. Obviously, how it is, it doesn't make much of a game but with a few adjustments you can easily change it into a full blown game. Maybe something like worms? Its up to you. I was considering taking the tutorial further and making something like that but I decided I'd seperate the men from the boys by letting you work that out for yourselves. However, if you're having any troubles feel free to reply to this post with a comment and I'll get back to you with a fix.

Source code.

- UnknownFury