Tutorial: N-way tile-based blit fine scrolling in AS3 (part 2)

In this tutorial we will discuss the theory and practice behind 360 degree n-way blit fine scrolling in AS3. What does that mean? N-way scrolling is a means by which you can scroll the screen in any direction based on the angle the main character of the game is facing.  Part 2 covers adding the car to the screen and driving it around the world.

This is a long tutorial, so it has been split into 3 parts:
Part 1 explains the concepts of N-way blit scrolling
Part 2 (this) adds a car and and let you drive it around the screen
Part 3 demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that i have used in creating these demos.

Now, how do we move our car?
Our car has also been modeled after the yellow Volkswagen bug from the Super Bug classic arcade game: it has an export name of car_png.

There are many ways to place a car object on the screen. In most cases, if I feel that I am going to have 100’s of independent objects moving on the screen, I will go to the trouble of blitting EVERY object to ensure I can keep a constant frame rate. There is no need to do that with this demo, or even a finalized game based on this demo as there are very few moving objects. In this instance, why not use the built in Sprite class that AS3 provides? It will offer us built in rotation and the ability to attach Bitmap object directly to its display list. In any case, it is a speedy way to prototype this engine. If the game started to lag down the line, the car sprite could be swapped out for a blitted sprite.

In the init() function, I set up the car this way: note that I have not created an object to hold all of the car data. In a final game I would probably create a Car class that extended Sprite to do this. It is not needed in this example.

[cc lang=”javascript” width=”550″]
//car
carPNG=new car_png(31,21)
carSprite=new Sprite();
carBitmap=new Bitmap(carPNG);
carBitmap.x=-15.5;
carBitmap.y=-10.5;
carSprite.addChild(carBitmap);
carSprite.x=110;
carSprite.y=145;
carRotation=-90;
carTurnSpeed=.5;
carMaxSpeed=5;
carAcceleration=.02;
carDeceleration=.03; addChild(carSprite); addChild(carSprite); [/cc]
[/cc]
The car surface is basically a just a 31×21 png that represents the car pointing to the right. We do that because that angle corresponds to the 0 angle that Flash uses for Display Objects. We need to store the car image in a Bitmap object and place it so its center is at .5* width x and .5* height y (-15.5x, -10.5y). We then attach it to the Sprite’s display list and place the carSprite roughly in the center of out 240×320 output window (110x,145y).

We set carRotation to -90 to have it start pointing up the screen. The carTurnSpeed is how much to rotate the car in the left or right direction when the arrows keys are hit by the user. We set a max of 5 on our carSpeed. The carSpeed will be increased by our carAcceleration every time the up arrow is pressed and by the carDeceleration when the down arrow is pressed.

Finally, we add out carSprite to the main displayList. (this has to happen AFTER the canvasBD has been added).

Checking key presses
On every frame tick, we will need to check to see which of the arrow keys are still being held down by the user (if any).

In out init() we will need to add these event listeners:
[cc lang=”javascript” width=”550″]
//key listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
stage.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
[/cc]

We also need to add in these event methods to correspond to the events: