The Flash Connection Make mine Actionscript 3.0!

Source File: 

drill_4_player_boundaries.fla

Next, let's examine how to set boundaries for the Player so it stops at the edges of the stage. We'll create a new variable called playerHalfWidth. The reason for this is that the player is centered on its registration point (the registration point is the little cross-hair, or plus-sign that you see when you double click the player to edit the insides of it. It's also the point where all of its x and y values are reckoned from. The crosshair is x = 0 and y = 0). We need to divide its width by two, and it's handy (and more efficient performance-wise) to already have this division calculation done ahead of time. So we declare the variable and give it a value all in one shot:

var playerHalfWidth:Number = player.width / 2;

I hope you are starting to realize that when we are programming, we can create variables whenever we feel the need for them, and we can give them whatever name that makes sense to us. It's a bit like creative writing, but after you do it for awhile, you will start to just know when you need to create a new variable! Also, by using descriptive names, you make the code self documenting and easier to read by others (and by yourself when you return to it in a month or two).

Now we can use this value to set limits for the player's travel. The very left edge of the screen is x location 0 (we covered that earlier). The left limit then, is going to be 0 plus the player's half width, which when added together equals just the player's half width. If the player's x value gets to be any less than this limit, then we'll set it equal to the limit:

if(player.x < playerHalfWidth) {
	player.x = playerHalfWidth;
}

The right limit is going to be the right hand edge of the stage minus this playerHalfWidth value. The right edge of the stage is contained in the stage's stageWidth property. So the code for this part goes like this:

if(player.x > stage.stageWidth - playerHalfWidth) {
	player.x = stage.stageWidth - playerHalfWidth;
}

By the way, you will see this same basic pattern in a lot of code: If something exceeds a certain value, make it equal that same value. If something is less than a certain value, make it equal that same value. In this case, it will make the player stop from going off the edge of the screen in either direction. Can you guess where it goes in the code? It will go into the ENTER_FRAME handler function. Find the place in that function where the user is pressing the right arrow key, and test for the right side of the screen. Likewise, insert the code testing for the left side at the place where the user is pressing the left arrow key:

import flash.events.KeyboardEvent;
import flash.events.Event;

var rightArrow:Boolean;
var leftArrow:Boolean;
var playerHalfWidth:Number = player.width / 2;

stage.addEventListener(KeyboardEvent.KEY_DOWN, stage_onKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, stage_onKeyUp);
stage.addEventListener(Event.ENTER_FRAME, stage_onEnterFrame);

function stage_onKeyDown(event:KeyboardEvent):void {
	if(event.keyCode == 39) {
		rightArrow = true;
	}
	if(event.keyCode == 37) {
		leftArrow = true;
	}
}
function stage_onKeyUp(event:KeyboardEvent):void {
	if(event.keyCode == 39) {
		rightArrow = false;
	}
	if(event.keyCode == 37) {
		leftArrow = false;
	}
}
function stage_onEnterFrame(event:Event):void {
	if(rightArrow == true) {
		player.x += 10;
		if(player.x > stage.stageWidth - playerHalfWidth) {
			player.x = stage.stageWidth - playerHalfWidth;
		}
	}
	if(leftArrow == true) {
		player.x -= 10;
		if(player.x < playerHalfWidth) {
			player.x = playerHalfWidth;
		}
	}
}

So if the code finds that the x value of the player exceeds a certain value, it makes it equal to that value. And it performs this check continually. I'll say it again: Anything that needs to happen continually needs an event that fires continually, and that's the ENTER_FRAME event. Anyway, here's how our new code works:

(Click once on the swf, then use the arrow keys). Now the player stops at the edges. Cool! On the next page, we'll see how we can make the player fire a bullet when the spacebar is pressed!