Avoider Game: Boundaries, Diagonal Movement and a Forum

by Michael James Williams on June 10, 2009 · 5 comments

in Avoider Game Extras

Back in February I wrote Part 7 of my avoider game tutorial, which introduced keyboard control. I made a pretty big mistake without realising, accidentally allowing the player’s avatar to move outside the screen and thus avoid all of the enemies with no effort at all.

Once this was pointed out I figured it was no big deal; I could add it in as a “challenge” with a few hints, and let readers figure it out themselves. Maybe later I could write another tutorial explaining how to correct this.

This was another big mistake ;)

What I didn’t consider was that this isn’t just a missing feature, like not being able to shoot, it’s a bug. Every time someone plays the game, they don’t see the little paragraph buried in one post that says “oh yeah, the avatar goes outside the screen, feel free to fix this yourself”, they see a game that is broken.

Today, I have finally fixed it. Part 7 of the tutorial now includes instructions for stopping the avatar moving outside the screen, and I’ve updated the dozen or so avoider game posts since then to include this new code. All new avoider game posts will also use this fix.

This may cause a few problems. I haven’t re-numbered the lines from all the code snippets, or re-created the “demo” Flash previews from later tutorials as this would require almost as much work as rewriting each entire post. (All the main Flash previews, the ones from the top and end of each tutorial post, have been updated though.) If this has made any post confusing, please let me know and I’ll correct it :)

The instructions for adding boundaries to your own game are also included at the end of this post, but before that I’d like to mention a couple of other things.

Diagonal Movement

The second-most popular request was for diagonal (8-directional) movement inside the game. I’ve not included this as a default, because I see it more as a feature than a bug, and also because 4-way movement makes certain tutorials a lot simpler to follow (like the animation tutorial, for example).

However, regular commenter Rasmus Wreidt Larsen has stepped in, and written a tutorial explaining how to add such movement to your game!

It’s based on his own 8-way Character Movement. Check out the avoider game version at AvoiderGame.com (where else?)

Avoider Game Forum

Recently I’ve become slightly overwhelmed by the amount of email and comments I’ve been getting through this site. Don’t get me wrong, I love it! It’s introduced me to a lot of smart people with a real interest in AS3 game development, and that’s great. But unfortunately it’s starting to take me longer than I would like to answer people’s questions, and that’s not good.

Some awesome people have been picking up the slack and answering questions that others have posted in the comments, and I really appreciate that. I’ve seen conversations pop up in the comments too, and it’s made me think that we could start a real community :)

Back when FrozenHaddock and I launched AvoiderGame.com he set up a sub-forum for it on his own forums.

I’ve not really mentioned it on this site very often, so it’s pretty quiet over there. I think now would be a good time to start using it. Click here to visit the Avoider Game forum — it’s totally free to join.

So from now on, if you want to ask a question about a specific part of the tutorial, keep asking in the comments — I’m not going to block these! But if you want to ask more general questions, or start a conversation, or get some feedback on an idea you’ve had, or even just show off your own game, check out the forum.

I’ll be promoting it more visibly around the site soon, so if you want to be able to say, “oh yeah, I was here way before all these guys”, join now ;)

Code for the Boundaries

As promised, here are the new instructions I wrote for Part 7 of the tutorial explaining how to stop the avatar leaving the screen:

We have to write some code to check, every tick, whether the avatar somewhere it shouldn’t be, and move it back into the playing field if so.

I think the best place for this is in AvoiderGame.as, in the onTick() function, immediately after all the code we’ve just written. Let me demonstrate with this code snippet:

?View Code ACTIONSCRIPT3
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
if ( useMouseControl )
{
	avatar.x = mouseX;
	avatar.y = mouseY;
}
else
{
	if ( downKeyIsBeingPressed )
	{
		avatar.moveABit( 0, 1 );
	}
	else if ( upKeyIsBeingPressed )
	{
		avatar.moveABit( 0, -1 );
	}
	else if ( leftKeyIsBeingPressed )
	{
		avatar.moveABit( -1, 0 );
	}
	else if ( rightKeyIsBeingPressed )
	{
		avatar.moveABit( 1, 0 );
	}
}
 
//we should check the avatar's position here
//and move it if we need to
 
var avatarHasBeenHit:Boolean = false;
for each ( var enemy:Enemy in army ) 
{
	enemy.moveABit();

Where isn’t the avatar allowed? Let’s start with horizontal movement: the avatar can’t go left of the playing field. Now, we know that the left side of the play screen has an x-coordinate of zero (check the diagram in the first part of this tutorial for a reminder). So if the avatar’s x-coordinate is less than zero, it must be to the left of the play screen:

?View Code ACTIONSCRIPT3
139
140
141
142
if ( avatar.x < 0 )
{
	//avatar is left of play screen
}

What shall we do about it? It’s pretty simple — we just move the avatar back to the left edge:

?View Code ACTIONSCRIPT3
139
140
141
142
if ( avatar.x < 0 )
{
	avatar.x = 0;
}

Actually, because the avatar’s registration point is right in its centre, half-way across its width, this will let the avatar get half-way out of the screen:

screenshot

You can keep it like this if you like, but I’d rather make sure the whole avatar was inside the screen. Fortunately this is easy too; we can just change our code like this:

?View Code ACTIONSCRIPT3
139
140
141
142
if ( avatar.x < ( avatar.width / 2 ) )
{
	avatar.x = avatar.width / 2;
}

If that’s confusing, just bear in mind that avatar.x refers to the x-coordinate of the centre of the avatar. The centre is, naturally, half a width away from the left-hand side. (Of course, if your avatar’s registration point isn’t centred, you’ll have to measure the distance yourself.)

This makes the avatar stop at the left side of the screen as if it were a wall:

screenshot

The other three directions can be added similarly:

?View Code ACTIONSCRIPT3
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
if ( avatar.x < ( avatar.width / 2 ) )
{
	avatar.x = avatar.width / 2;
}
if ( avatar.x > 400 - ( avatar.width / 2 ) )
{
	avatar.x = 400 - ( avatar.width / 2 );
}
if ( avatar.y < ( avatar.height / 2 ) )
{
	avatar.y = avatar.height / 2;
}
if ( avatar.y > 300 - ( avatar.height / 2 ) )
{
	avatar.y = 300 - ( avatar.height / 2 );
}

The numbers 400 and 300 are the width and height of my game. Bonus points for you if you use the soft-coding tip I talked about in Part 6 instead ;)

{ 4 comments… read them below or add one }

Rasmus Wriedt Larsen (Snurre) June 10, 2009 at 4:14 pm

Well, it’s always great with bug fixing :D

Thanks for highlighting my tutorials :) and great that you guys are starting a community!

Michael Williams June 10, 2009 at 5:53 pm

Cheers Snurre :D

FrozenHaddock June 16, 2009 at 3:50 pm

Oh yeah, I was here -waaay- before those guys.

:P

Michael Williams June 16, 2009 at 3:58 pm

Haha!

Leave a Comment

Writing code? Write <pre> at the start and </pre> at the end to keep it looking neat.

Anti-Spam Protection by WP-SpamFree

{ 1 trackback }

Previous post:

Next post: