Flash Tutorial: Basic Enemy AI Pt1

Learn how to make your enemy move and to follow the player around the stage using basic artificial intelligence. It might be useful to follow my player movement tutorial before embarking on thisone.

Step One

Create a new movieclip and name its instance 'enemy'. Inside the movieclip, on a new layer, we are going to add a walk function. Call this function 'walkTo' and give it the variables X and Y. We will add the code within this function in a couple of steps.

function walkTo(X, Y) {

}

scooters
Step Two

Now, before we begin writing the 'walkTo' function it might be helpful if we add a call to it so we can see what we are doing as changes are being made. On the main timeline, on the enemy instance add this code.

onClipEvent (enterFrame) {

this.walkTo(_root.player._x, _root.player._y);

}

This will call our walkTo function and also give it the coordinates of the player movieclip too.

Step Three

We are now ready to begin writing our walkTo script. Within the walkTo function, let's first add a speed variable.

function walkTo(X, Y) {

var speed = 3;
}

Next, lets deal with vertical movement on the Y-axis. If say, the enemy had a co-ordinate of 300 and the player was at 100, the enemy would have to reduce its Y co-ordinate in order equal that of the player's. We can do this by subtracting our speed variable. Here's how we'll do it.

function walkTo(X, Y) {
var speed = 3;

// Y-Axis movement
if (this._y>(Y)) {

this._y -= speed;

}

}

When you test this, you will see that if the player is higher than the enemy on the Y-axis then the enemy will move up to meet the player. Now we need to add a second if statement to check if the enemy is lower than the player, and if so move up.

function walkTo(X, Y) {
var speed = 3;

// Y-Axis movement
if (this._y>(Y)) {

this._y -= speed;

} else if (this._y<(Y)) {

this._y += speed;

}

}

Once done, you will see that the enemy can now move either up or down. But hold on, there seems to be some jittering going on when the enemy has equalled the player's Y co-ordinate. This is because the two if statements are flip-flopping between each other. We need to create a margin so that both statements can be happy. Do this simply by adding and subtracting a little from each of the statements targets. This means that the movieclip can find a nice resting spot between the two points.

// Y-Axis movement
if (this._y>(Y+20)) {

this._y -= speed;

} else if (this._y<(Y-20)) { this._y += speed;
}

Step Four

Now that we have our vertical movement sorted out, let add some horizontal. It works in exactly same way. You'll notice that also have new line which alters the _xscale. This makes sure the movieclip faces left when walking left and faces right when walking right.

function walkTo(X, Y) {
var speed = 3;

// Y-Axis movement
if (this._y<(Y-20)) {

this._y += speed;

} else if (this._y>(Y+20)) {
this._y -= speed;

}

// X-Axis Movement
if (this._x<(X-40)) {

this._x += speed;

this._xscale = -100;

} else if (this._x>(X+40)) {
this._x -= speed;
this._xscale = 100;
}

}

Thanks for following this tutorial! Feel free to leave any questions or comments.

Flash Tutorial: Character Movement with Arrow Keys

This basic flash tutorial will show you how to create character movement for your games using the arrow keys. This is a simple tutorial however, this method allows greater flexibility and easier potential for expansion than the other tutorials that I have seen on the web.

Let's Begin!

Step One

First off, start by drawing a simple shape and converting it into a movieclip. Name both the movieclip and its instance 'player'. Inside the movie clip, create a new layer for our actionscript to go on.


Step Two

Our next step is to create bindings for the keys we wish to associate with movement. In this case we'll be using the arrow keys. On the keyframe inside the player movieclip, enter the following variables.

// Key bindings
keyWalkLeft = 37;
keyWalkUp = 38;
keyWalkRight = 39;
keyWalkDown = 40;

The numbers are the ASCII numbers of the arrow keys on the keyboard. By storing them as variables like this means that we can easily remember which keys are which. It also means that if we wish to, we can easily change the key bindings to something else. For example the popular A, S, W, D controls: 65, 83, 87, 68. (For a full list of ASCII codes see the Adobe documentation).


Step Three

Next we'll enter our speed variables. I often see game tutorials have a single variable for player speed, however I have chosen to use four for greater flexibility.

// Speeds
l = -6;
u = -6;
r = 6;
d = 6;

The values that you choose are completely up to you, but L and U must be negative values as they have a negative movement on the X and Y axis. Similarly, R and D have positive movement on their axis and so should be kept as positives too.


Step Four

Now for the part that requires a little more brain power. We will now put all our variables together to check key presses and update player coordinates.

// Keyboard Commands
this.onEnterFrame = function() {
if (Key.isDown(keyWalkLeft)) {
walk(l, 0);
} else if (Key.isDown(keyWalkRight)) {
walk(r, 0);
}
}

// Walk function
function walk(X, Y) {
this._x += X;
this._y += Y;
}

This code will check if the left arrow key is down. If it is, it will call the walk function, which in turn will update the players co-ordinates according to the speed value specified for that direction. If the left arrow key is not down, it will then check to see if the right arrow is down and call the walk function with the value of R.

Now, test your movie and have fun moving your player from left to right.


Final Step

You'll notice that I have omitted if statements for the up and down keys. It is very simple to add these. Simply do the same codes, but with the Y axis this time. Your final code should look like this.

// Key bindings
keyWalkLeft = 37;
keyWalkUp = 38;
keyWalkRight = 39;
keyWalkDown = 40;

// Speeds
l = -6;
u = -6;
r = 6;
d = 6;

// Walk function
function walk(X, Y) {
this._x += X;
this._y += Y;
}

this.onEnterFrame = function() {
// Keyboard Commands
if (Key.isDown(keyWalkLeft)) {
this.walk(l, 0);
} else if (Key.isDown(keyWalkRight)) {
this.walk(r, 0);
}
if (Key.isDown(keyWalkUp)) {
this.walk(0, u);
} else if (Key.isDown(keyWalkDown)) {
this.walk(0, d);
}
}

Conclusion

You should now have full movement around the stage. Thank you for reading the first of my many tutorials of which I will be posting about the Flash Fight Engine. If you have any questions, comments or suggestions, please do not hesitate to leave a comment below.