Tutorial: Exploring the AS3 Bitmap Class Lesson 3 – Scale from the center with a Matrix.

Tutorial: Exploring the AS3 Bitmap Class Lesson 3 - Scale from the center with a Matrix.

In this third lesson we will explore a method of scaling the object from Lesson 1 and Lesson 2 using a Matrix operation. Like rotation, we could simple apply the scaleX and scaleY properties of the Bitmap object, but that would result in the scale operation starting from the top-left corner rather than the center. We could also place the Bitmap inside a Sprite object, and move it to -.5* width for x and -.5*height for y and the scale the Sprite. The focus of these lessons though is working with the raw Bitmap object to eliminate the over-head of using the Sprite class as the Bitmap container. So, we will scale using a Matrix operation. After creating a new Matrix for this scale operation we will add in the dynamic tile sheet animation and rotation Matrix back into the code to demonstrate all of them working in conjunction.

We will be using the dynamic tile sheet we created in Lesson 1, so if you have not familiarized yourself with that lesson and find yourself getting lost it would be a good idea to go back and take a look. You might also want to examine the Matrix rotation operations we looked at in Lesson 2 as we will not cover that subject in detail here.

Lesson 3 will comprise parts 7,8, and 9 of this series.

Part 7: Scaling a Bitmap with a Matrix

Scaling a Bitmap object with a Matrix is very similar to rotating it with a Matrix. To ensure that we are scaling around the center point of the object we will need to "translate" it to -.5*width for x and -.5*height for y, then scale it, then move it back to is original position on the screen.

We will be using two new class variables for part 7.

The bitmapScaleMatrix is a Matrix class instance that will be used to apply our Matrix scale operations to the BitmapToDisplay object. The bitmapScale variable will hold the current scale of the BitmapToDisplay. This will be updated in each frame tick. It is important to note that we need this variable because we cannot use the scaleX and scaleY attributes of the BitmapToDisplay. This single variable replaces them both in our example. If you want to have separate x and y scales then you simply need a second variable.

Inside our runGame() function we will scale the object on each frame tick. We will start with a scale of 1 and increase it by .1 until it reaches 2 and then drop it back down to .1 to start over again. Similar to the rotation in Lesson 2, we need to call the identity() function on the bitmapScaleMatrix before on each frame tick to reset it before we apply the new scale.

Let's step through this code:

1. We reset the Matrix with the identity() call.
2. We translate the so that the center of our 32x32 Bitmap is at the 0,0 origin. We do this with by translating to -16,-16
3. We call the scale() function of the Matrix and pass in the bitmapScale class variable for both the x scale and y scale.
4. We translate back to the original screen position for the Bitmap object plus the 16 by 16 pixels we used in the translation.
5. We apply the Matrix by setting the Bitmap.transform.matrix to = the bitmapScaleMatrix
6. We bump up of bitmapScale by .1 and check to make sure it is not larger than the maximum (2). If it is, we set it back to .1.

Here is the complete code for the "Part7" class. The new lines of code in part 7 are indicated and to remove the rotation and tile sheet animation we have commented out some lines. You don't need to add those in now, but we will be adding them in in parts 8 and 9.

Notice the long line under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

As you can see, the ship stays in its position and the scale starts from the center of the object. It loops though scale sizes .1 to 2 in increments of .1.

Part 8: Adding Dynamic Tilesheet Animation back into the mix

For this section we will simply be adding the animation with the scrollRect of the bitmapToDisplay back into the code. It is currently commented our in the runGame() function from part 7.

For a refresher, here is the explanation from Lesson 1 part 3.

When then animationCount == animationDelay we will change the x value of the bitmapScrollRect. The value is either 0 (the start x of the first tile) or 32 (the start x of the second tile). It just jumps back and forth between these two values every 5 frames. This isn't the most sophisticated animation technique, but it works fine for this example.

Notice that if there is a change to the bitmapScrollRect, we have to re-apply it to the bitmapToDisplay.scrollRect. The scrollRect property of a display object cannot be changed by reference, it must be re-applied as needed.

All of the above code will be inside a simple runGame function that we will create. This function is called on each frame by a simple EnterFrame event.

Simpily uncomment those lines from the Part7.as class file and you will have the animation back in to the code. Here is the what the runGame function should now look like.
You can save this new changed version as Part8.as. Make sure to change the class name to Part8 and constructor name to Part8 in the code it you choose to do this.

Here is the working swf file:

As you can see in the above example, we can simulate animation by changing the x value of the scrollRect property of a display object and at the same time we can scale the Bitmap object using the Matrix operations.

Part 9: Combining Scale and Rotation into a single Matrix

We covered the rotation portion in detail in the Lesson 2. To combine both rotation and scale into a single operation we will be creating a new single Matrix for both and will be removing the original two matrices we created: bitmapRotationMatrix and bitmapScaleMatrix. We will call the new Matrix the bitmapScaleRotationMatrix. In the variable definition section of the Part9.as file we will create this class level variable:

Since we only need a single Matrix for both we will have a single initial assignment in our init() function.

Our runGame function will be completely new. It will combine the rotation and scale matrix operations with the existing dynamic tile sheet animation we uncommented in part 8.

Here are the highlights of this combined rotation and scale code:

1. First, ignore the animation section as it was covered in Lesson 1
2. Take a look at Lesson 2 for detailed information on the rotation Matrix operation..
3. We start by calling he identity() method of the bitmapScaleRotationMatrix to reset it on each frame tick.
4. We do the now familiar translate operation once for both scale and rotate.
5. We rotate.
6. We scale. (these can be done in any order)
7. We translate back to the original position.
8. We the apply bitmapScaleRotationMatrix to our bitmapToDisplay

Here is the complete code for part 9.

Notice the long lines like the one under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

In Lesson 4 we will start to create a BlitBitmap class that we can use standalone, or with in the Essential Flash Games Book framework.

Tutorial: Exploring the AS3 Bitmap Class Lesson 2 – Rotation with and without a Matrix

Tutorial: Exploring the AS3 Bitmap Class Lesson 2 - Rotation and with and without a Matrix.

In this second lesson we will explore a couple different methods for rotating the Bitmap object from Lesson 1. We will first try simply using Bitmap.rotation property. Next we will do the same operation using a Matrix and finally we will add the dynamic tile-sheet animation to the Matrix rotation. Lesson 2 will be comprised on 3 separate parts (Parts 4,5,and 6 in this series).

We will be using the dynamic tile sheet we created in Lesson 1, so is you have not familiarized yourself with that lesson and find yourself getting lost it would be a good idea to go back and take a look.

Part 4: Rotating a Bitmap object directly

The Bitmap class (just like all display objects) has it's own rotation property. You would think that this would make rotating the contents of the object a trivial matter. In a sense, it is. You just simply set the rotation property to a new value

The problem you will see is that we cannot rotate the BitmapData object inside the Bitmap from any point other than the top-left corner. We will be adding a single line of code to the final code from Part 3 (inside the runGame) function:

This code will simply rotate the Bitmap by 10 degrees on each frame tick. We will also be moving the bitmapToDisplay to a new position (84x,84y) so the object won't clip off the viewable screen during the rotation. We turn "smoothing" on to help the bitmap rotation not look jagged as the pixel locations are recalculated. This will be added to the init() method.

Here is the complete code for the "Part4" class. The new line of code is added to the end of the code in the Part3 runGame function.

Notice the long line under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

As you can see, if you want to simulate a space ship wildly spinning out of control this might be a good start but it isn't good for a rotation around the internal center point of the Bitmap. I am sure there are a few good applications where simulating the rotation from the top left point might work, but not for an Asteroids style ship rotation.

Part 5: Rotating the Bitmap on the Fly with a Matrix

In part 4 we rotated our Bitmap by updating it's standard rotation property. What we saw was a Bitmap that rotated around the top-left corner. Now, my normal method to get around this is to place the Bitmap inside a Sprite object and set its local coordinates to be -.5*width for x and -.5*height for y. When the Sprite is rotated, the Bitmap will rotate around it's center point. The one problem with this technique is that the actual top-left edge of the viewable Bitmaps now not at 0,0. This means you must offset some math calculations when using these objects (especially in tile-based games). Luckily, this is not the only way to accomplish this task. We can also use a combination of translation and rotation with Matrix object to simulate the same thing.

We will use the standard Matrix class, not the fl.motion.MatrixTransform class as the fl libraries are not part of the Flex SDK.

First let's look at the three new class level variables we will need for this operation:

The bitmapRotation variable will hold the current angle of rotation for the ship. It will range from 0-359 and will be used in the Matrix calculation to position the ship correctly on the screen. The bitmapRotationMatrix is a class level Matrix object instance that will be used to calculate and apply the center point rotation for the ship. We use a class level variable to avoid the overhead of creating a new Matrix object on each frame tick. The startLocation variable will be used as the upper left-hand corner location for the ship. We need to keep this in a separate variable from the Bitmap x and y coordinates as those will change based on the Matrix translation and rotation.

We will be instantiating this our Matrix in the init() function the Part5 class file.

In our runGame function we will be commenting out the code that that does the animation with the scrollRect between the two dynamically created tile sheet sprite frames. We will add in the code that does the Matrix rotation of our ship. We will add the animation back in part 6, but for now we want to just demonstrate the rotation with out any other animation.

Let's step through this code:

1. First we update our bitmapRotation variable by 1 and check to see if it is greater than 359. If it is we set it back to 0. Now, this is not explicitly needed for this example as rotation will work without it. I use this because calculations with angles and especially look-up tables with vector calculations for angled movement are much easier to use with 0-359 as the angle of rotation.

2. We create a local Number variable called angleInRadians from the bitmapRotation value because the Matrix operation expects the angle to be represented in his manner.

3. We call the identity() method of the Matrix class. This resets the Matrix and allows us to feed new values into it on each frame tick. For some fun and weird effects, remove it and what what happens.

4. Now we get to the actual Matrix calculations. These function a little like a programming language all to itself.

First we call the translate() function and pass it -.5*with, -.5* height for the object. I just stuck 16 in here because it is a faster calculation. but you can calculate this on the fly with the width and height properties of the bitmapToDisplay object. This forces the rotation operation to occur at the center of the object rather than the upper left-hand corner.

Next we pass the newly calculated angleInRadians value into the rotate() method of the Matrix class. This will rotate the bitmapToDisplay object on the current x,y point, which is the center because of the translate() call above.

Finally, we must move the bitmapToDisplayObject back to its original position. We do this by using the startLocation Point instance's x and y coordinates (84,84) and adding the .5*width and .5*height to the respective startLocation Point values. Again, I applied the actual value (16) for speed of operation, but these very well could be calculated with the properties of the bitmapToDisplay object.

Here is the complete code for part 5:

Notice the long line under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

Part 6: Adding the dynamic tile sheet sprite animation back into the mix

For this section we will simply be adding the animation with the scrollRect of the bitmapToDisplay back into the code. It is currently commented out in the runGame() function from part 5:

For a refresher, here is the explanation from lesson 1 part 3.

When then animationCount == animationDelay we will change the x value of the bitmapScrollRect. The value is either 0 (the start x of the first tile) or 32 (the start x of the second tile). It just jumps back and forth between these two values every 5 frames. This isn't the most sophisticated animation technique, but it works fine for this example.

Notice that if there is a change to the bitmapScrollRect, we have to re-apply it to the bitmapToDisplay.scrollRect. The scrollRect property of a display object cannot be changed by reference, it must be re-applied as needed.

All of the above code will be inside a simple runGame function that we will create. This function is called on each frame by a simple EnterFrame event.

Simpily uncomment those lines from the Part5.as class file and you will have the animation back in to the code.

Here is the working swf file:

As you can see in the above example, we can simulate animation by changing the x value of the scrollRect property of a display object and at the same time we can rotate the Bitmap object using the Matrix operations.

In the next lesson we will cover scale transformations on our bitmapToDisplay object.

Tutorial: Exploring the AS3 Bitmap Class Lesson 1 – Creating a basic dynamic tile sheet.

Tutorial: Exploring the AS3 Bitmap Class Lesson 1 - Creating a basic dynamic tile sheet.

We talk a lot about Blitting and BitmapData on this site, but we rarely take a step back and look at the container class for BitmapData, the Bitmap. In this series we will explore using the Bitmap class for many different applications and manipulate the BitmapData attribute to create animation and transformations. The end result of all the lessons will be a new class that we will add to the Essential Flash Games framework. With the AS3 Bitmap class we have a display object that we can manipulate to display BitmapData. This allows us to make use of the built-in features of a Flash Display object, but also the power of manipulating individual pixels of data for speedy rendering.

Lesson 1 will consist of parts 1-3 of the Bitmap class exploration. First we will take a look at dynamically drawing a simple shape on a Bitmap canvas. Next we will create a dynamic tile sheet using the BitmapData attribute of the Bitmap, and lastly we will create a simple animation using the dynamic tile sheet. Let's get started.

Part 1: Drawing pixels on a Bitmap canvas

The Bitmap class contains a BitmapData attribute. This provides the look of the Bitmap and allows for us to take control of the content of the Bitmap programmatically. The first thing we are going to do is draw a very simple "space ship" as a 32x32 image. The ship will look like this:

The "ship" we will create is a very simple upside down "T". This is a 32x32 png file with a transparent background. The ship does not touch the edges of the 32x32 size, but rather there is a 4 pixel buffer around the entire image. I created this one for reference only as it is a simple shape directly onto the bitmapData attribute inside our bitmap.

We will create a bitmap for our part1 code called: private var bitmapToDisplay:Bitmap;

We will also create a BitmapData object to hold the look of the ship: private var bitmapDataToDisplay:BitmapData;

We will draw the pixels of our ship by setting the color of the individual pixels of the bitmapDataToDisplay. Since we have some straight lines (2 pixels thick) that are symmetrical, we can create a very simple loop to draw our ship. We will use the setPixel32 function of the BitmapData:

In this loop we create a vertical line from 4y to 27y at both pixel 15x and 16x (for a double thickness) and we create a horizontal line from 4x to 27x at pixels 26y and 27y. This mimics the png of the ship created above. Obviously this is probably the most simple space ship ever drawn, but it demonstrates how to manipulate pixels "on-the-fly" and will be the basis for much of the further discussion. Feel free to change up the look to meet your specific aesthetic desires (if it helps you make it through these tutorials, more power to ya!).

Here is the complete code for the "Part1" class.

Here is the working swf file:

Part 2: Drawing a second frame on the same BitmapData to create a dynamic tile sheet

In part 1 we we created a single BitmapData instance called bitmapDataToDisplay and drew our simple space ship on it. In part 2 we will extend the size of this BitmapData from the original width of 32 pixels to a new width of 64 pixels. We will then draw the second frame of our simple space ship in what we will consider tile 2 of our tile sheet. Here is the code we will change in the init() function to make the width of the BitmapData 64 rather than 32:

bitmapDataToDisplay = new BitmapData(64, 32, true, 0x00000000);

Here is the ship image we will draw starting in pixel 32x and finishing in pixel 63x.

Again, the .png file is just for reference as we are going to be drawing into the BitmapData directly for this lesson. We can imbed the png in the IDE's library or at compile-time if we want to, but for this lesson we'll just use the dynamically drawn ship. The only difference between the ship1 and ship2 images is the small red "exhaust" at bottom of the "ship". This is the second frame of animation that would conceivably be used to simulate the ship thrusting through virtual space.

To draw this second frame into the BitmapData we will offset the original ship drawing by 32. The easy way to accomplish this is to copy the pixels from the first frame and drop them onto the second frame. We will use the BitmapData.copyPixels function to do this:

We pass a reference to the source for the copy (itself), a Rectangle representing the area to copy and a Point representing the upper left-hand corner to start copying the pixels. This draws a copy of the exact original ship pixels to what we will consider "frame 2" of our dynamically created tile sheet.

Next we will draw the red exhaust:

Similar to how we created the

double blue lines for the original ship image, we create a 2 pixel width red line under the ship for the exhaust.

Here is the complete code for Part 2. It is very similar to Part 1 with some minor changes to accommodate the size of the BitmapData (extended to 64 pixel width) and the new drawing code.

Notice the long line under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

As you can see, the entire BitmapData is displayed. While this is a good way to display an entire bitmap for an example, it doesn't help us animate the the ship. Let's take a look at how to do a classic "flip-book" animation of the ship next. We will do this by manipulating the Bitmap.scrollRect property.

Part 3: Animating the dynamic tile sheet with a scrollRect

The Bitmap.scrollRect property is used to define the viewable portion of the Bitmap object. It acts a little like a "mask" in that the rectangle will show through and everything else will be blocked out.

We will need to create a class level variable to hold the current Rectangle bounds that we want to display on our Bitmap. We will create a new variable to hold this called:

private var bitmapScrollRect:Rectangle;

In our init() function we will set the size of this to be 32x32:

bitmapScrollRect=new Rectangle(0, 0, 32, 32);

We will also apply it to the scrollRect property of the bitmapToDisplay.

bitmapToDisplay.scrollRect = bitmapScrollRect;

This is only good for the first frame as this will need to be re-applied each time we need to show a different part of the dynamic tile sheet. It does not work like most references where if we change the bitmapScrollRect's x value the bitmapToDisplay.scrollRect is also updated. We need to re-apply the assignment each time we change the x location of the bitmapScrollRect Rectangle.

We will update the bitmapScrollRect's x and y properties to change the location on the dynamic tile sheet we created. This will simulate animating the "thruster" at the bottom of our little space ship. We will create and EnterFrame event and use a counter for this animation. We will create two class level variables for the animation frame counting:

private var animationDelay:int = 5;

private var animationCount:int = 0;

The animationCount will be increased by one on each frame tick. When the count reaches the animationDelay the bitmapScrollRect will be updated. Here is the code that will accomplish this:

When then animationCount == animationDelay we will change the x value of the bitmapScrollRect. The value is either 0 (the start x of the first tile) or 32 (the start x of the second tile). It just jumps back and forth between these two values every 5 frames. This isn't the most sophisticated animation technique, but it works fine for this example.

Notice that if there is a change to the bitmapScrollRect, we have to re-apply it to the bitmapToDisplay.scrollRect. The scrollRect property of a display object cannot be changed by reference, it must be re-applied as needed.

All of the above code will be inside a simple runGame function that we will create. This function is called on each frame by a simple EnterFrame event.

Here is the complete code for Part 3. It is very similar to Part 2 with addition of the new animation variables and the runGame function for controlling the animation.

Again, notice the long line under the //copy ship to next tile comment. This line has been broken with an "_" and should be reattached if you are going to cut and paste the code.

Here is the working swf file:

As you can see in the above example, we can simulate animation by changing the x value of the scrollRect property of a display object. This acts like a "mask" and leaves the rest of the dynamically created tile sheet hidden.

In the next lesson we will cover some rotation transformations of the Bitmap object using a Matrix.