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

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

This is a long tutorial, so it has been split into 3 parts:

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 3 demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that I have used in creating these demos.

Part 1 explains the concepts of N-way blit scrolling
Part 2 adds a car and and let you drive it around the screen
Part 3 (this) demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that I have used in creating these demos.

How to do a 4-way scroll with the same concept.
The only thing that changes for for a 4-way scrolling world is how we handle key presses and translate them into carDX and carDY values. First, we need to change what happens when the player pressed the up, down, left and right keys AND we need to change how the viewXOffset and viewYOffset are update to deal with the new key pressed. That is basically all we need to do.

[cc lang=”javascript” width=”550″]
private function checkKeys():void {

if (aKeyPress[38]){
trace(“up pressed”);

carRotation=-90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[40]){
trace(“down pressed”);

carRotation=90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[37]){
trace(“left pressed”);

carRotation=-180
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[39]){
trace(“right pressed”);

carRotation=0;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

}

[/cc]

In this method, we change the carRotation to a pre-defined direction and then adjust the car speed. This will not be an accurate model for acceleration because as soon as you accelerate to the carMaxSpeed, there is no way to slow down, but it’s just a demo. In a full game, I would store the last direction pressed and if it is not the same as the new direction, I would start the carSpeed back at 0.

Here is an example of 4-way movement running:

8-way scrolling example

8-way scrolling is not that much different that 4-way, except you will need to find some suitable input keys. In this example we will use the

QWE
ASD
ZXC
keys do all of the work. We will use the “S” to stop the car in this example.

Here are the changes needed to the checkKey() method:

[cc lang=”javascript” width=”550″]
private function checkKeys():void {

if (aKeyPress[81]){
trace(“Q pressed”);

carRotation=-135;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[87]){
trace(“W pressed”);

carRotation=-90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[69]){
trace(“E pressed”);

carRotation=-45
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[65]){
trace(“A pressed”);
carRotation=-180;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[83]){
trace(“S pressed”);

carSpeed=0;

}
if (aKeyPress[68]){
trace(“D pressed”);
carRotation=-0;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[90]){
trace(“Z pressed”);
carRotation=135;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[88]){
trace(“X pressed”);
carRotation=90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[67]){
trace(“C pressed”);
carRotation=45;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
}

[/cc]

This is a little ugly, and can probably be handled in a much cleaner manner, but for demonstration purposes, I just want to show how easy it is to modify the scrolling engine to work with a variety of game types. Here is this example running:

The rest of the code

That’s it for the explanation and the examples. What follows are some of the methods in the code that I use to tie the whole package together.
You certainly do not have to use these, and I only present them to paint a complete story. I would much rather you took the code above, looked at the examples and created your own engine.

 

run Game()
This function is called via a timer and is the main loop. This blog entry explains exactly what the timer does and how it works. It is optimized to display at consistent frame rate across browsers and other flash player mediums,
[cc lang=”javascript” width=”550″]

private function runGame(e:TimerEvent) {
//trace(“running game”);
_beforeTime = getTimer();
_overSleepTime = (_beforeTime – _afterTime) – _sleepTime;

checkKeys();
updatePlayer();
//checkCollisions();
canvasBD.lock();
drawBackground();
drawView();
drawPlayer();
canvasBD.unlock();

_afterTime = getTimer();
_timeDiff = _afterTime – _beforeTime;
_sleepTime = (_period – _timeDiff) – _overSleepTime;
if (_sleepTime <= 0) { _excess -= _sleepTime _sleepTime = 2; } gameTimer.reset(); gameTimer.delay = _sleepTime; gameTimer.start(); while (_excess > _period) {
checkKeys();
updatePlayer();
checkCollisions();
_excess -= _period;
}

//frameTimer.countFrames();
//frameTimer.render();
e.updateAfterEvent();
}

[/cc]

setUpWorld()
This function takes the xml map data and puts it into the aWorld 2d array.
[cc lang=”javascript” width=”550″]

private function setupWorld():void {

//parse xmlMapData and create aWorld array
for (var rowCtr:int=0;rowCtr&kt;worldRows;rowCtr++) {
var tempArray:Array=new Array();
for (var colCtr:int=0;colCtr

0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply

Your email address will not be published. Required fields are marked *