In Part 1 – Advanced Flash 8 Game Programming : Pixel level collision detection I discussed the very basics of doing Pixel level hit detection with the bitmapData object. In Advanced Flash 8 Game Programming : Pixel level collision detection Part II (or let’s add Bitmap animation caching) I added in a simplified version of animation loop caching. In part III, we will start to make a simple game. This is what we are going to tackle:

1. We will use a play screen, created in Fireworks (or any other graphics program), as the maze or room the player is in. It will be viewed from the top. It will be a little odd looking because the Ari Feldman’s Sprite Lib GPL sprites we are going to use are viewed from the side. In any case it doesn’t look much worse than many commercial early 80’s games. This screen will be used as our wall map and we will use bitmap hitTest on the entire bitMap. This is a alternative to “tile-based” detection that has been a staple of game development for years. This isn’t to say that tile-based detection is bad or wrong, this is just a different method to accomplish the same thing. In fact, a combination of the two will be discussed in a later lesson.

2. Next we will add in animations for moving the player in 4 distinct directions and cache the animations for each. We will also add in variables for the player’s speed and an animation delay to help the player look a little more realistic.

3. We will start to create a more proper game loop with code more organized. We will also add in a Frame Rate counter, and use temp variables to hold current player position info before rendering the screen.

I will be doing a lot more explaining this time around as much has changed.

[cc lang=”javascript” width=”550″]
//hitpixels_with_bitmap_animationloop3.fla
//Jeff Fulton 2007
//www.8bitrocket.com
//pixel level collision detection with bitmap data object

import flash.display.*;
import flash.geom.*;

var keyPressed:Boolean=false;
var timeOfLastFPS:Number = 0;
var FPSCOUNT:Number = 0;
//pixel level collision detection with bitmap data object

//1. load in spriteMap from library
var spriteMapBitmap:BitmapData = BitmapData.loadBitmap(“actionMap”);
//mc.attachBitmap(spriteMapBitmap, this.getNextHighestDepth());

[/cc]

***** *****
The above section of code imports the in the internal Flash classes needed for manipulating bitmaps and the math classes needed for creating a rectangle of screen data needed from a bitmap. We are also creating variables to hold if a key has been pressed and to calculate the current frame rate.
***** *****
[cc lang=”javascript” width=”550″]//2 create an array of bitmaps for the player sprite
//in this example, the player has two frames of animation
//this is a simple example, so we won’t do 2 frames for every direction of movement, we’ll just use these two

[cc lang=”javascript” width=”550″]
// copy two sprite images for left movement
var aPlayerLeftSpriteArray:Array=new Array();
var tempSprite:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite.copyPixels(spriteMapBitmap, new Rectangle(0, 72, 32, 32), new Point(0, 0));
aPlayerLeftSpriteArray.push(tempSprite);
var tempSprite2:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite2.copyPixels(spriteMapBitmap, new Rectangle(0, 102, 32, 32), new Point(0, 0));
aPlayerLeftSpriteArray.push(tempSprite2);

[/cc]

***** *****
Here we have created an array to hold two animation frames for the left movement of our player. We are copying these frames from our imported spritemap. Below we will do the same thing for right, up, and down movement.
***** *****

[cc lang=”javascript” width=”550″]
// copy two sprite images for left movement
var aPlayerRightSpriteArray:Array=new Array();
var tempSprite:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite.copyPixels(spriteMapBitmap, new Rectangle(36, 72, 32, 32), new Point(0, 0));
aPlayerRightSpriteArray.push(tempSprite);
var tempSprite2:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite2.copyPixels(spriteMapBitmap, new Rectangle(36, 102, 32, 32), new Point(0, 0));
aPlayerRightSpriteArray.push(tempSprite2);

// copy two sprite images for up movement
var aPlayerUpSpriteArray:Array=new Array();
var tempSprite:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite.copyPixels(spriteMapBitmap, new Rectangle(72, 72, 32, 32), new Point(0, 0));
aPlayerUpSpriteArray.push(tempSprite);
var tempSprite2:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite2.copyPixels(spriteMapBitmap, new Rectangle(72, 102, 32, 32), new Point(0, 0));
aPlayerUpSpriteArray.push(tempSprite2);

// copy two sprite images for down movement
var aPlayerDownSpriteArray:Array=new Array();
var tempSprite:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite.copyPixels(spriteMapBitmap, new Rectangle(180, 72, 32, 32), new Point(0, 0));
aPlayerDownSpriteArray.push(tempSprite);
var tempSprite2:BitmapData=new BitmapData(32,32,true,0x00000000);
tempSprite2.copyPixels(spriteMapBitmap, new Rectangle(180, 102, 32, 32), new Point(0, 0));
aPlayerDownSpriteArray.push(tempSprite2);
[/cc]***** *****
Notice above we have created single dimensional arrays to hold each position. We easily could add all of these to another array to create one multi-dimensional array to hold all movement animation for our player. That is exactly what we will do on a later lesson.
***** *****