Click to visit Pigeon and Pigeonette

Dirk Derom and Sarah Verroken have written a children’s book called Pigeon and Pigeonette. It’s for 3-6 year olds, and it’s about two pigeons: one who is very large and blind, and another who is small, with wings that can’t carry her.

To promote the book, Dirk and Sarah put together an avoider game based on the AS3 base tutorial, but using their characters and Sarah’s wonderful style of illustration.

You can check it out at the book’s website (head to the Games section) — bear in mind that it’s designed for kids, so those of you with millions of badges on Kongregate are unlikely to find it much of a challenge!

Click to play Robot Saga: Escape

Matthew Ammann — who wrote the previously-mentioned SoundObject class — has written a game called Robot Saga: Escape.

It’s based on the AS3 version of the Flash avoider game tutorial, and is the first AS3 game Matthew’s made. He’s uploaded some development notes on his blog, which I found pretty interesting

Upon release it was also the tenth most popular game on all of Big Fish Games — congratulations!

Click here to play Robot Saga: Escape.

He’s posted this class on his blog so that everyone can use it — and on top of that, he’s written a great tutorial to explain how it all works!

This makes it easy to mute songs, and switch between different tracks from different screens.

Check it out here. Thanks, Matthew!

Click to play Wesley

Bram Van Damme has written a game about a man, a pizza and a whole bunch of rhinos.

He made it for a Belgian magazine called Humo, which runs (or used to run) a comic strip about this guy Wesley. Now, I don’t spreak Dutch, but Bram translated one of the strips for me. It seems Wesley ordered a pizza, but was delivered a rhino instead. He phones the pizza guy, who apologises, and sends along another pizza. Except when it arrives — uh oh, it’s another rhino! And the situation escalates, of course. Eventually the rhinos drink some cola, which solves the problem in a sense, because naturally cola causes rhinos to explode (a fact I did not know previously).

The game pits Wesley against a whole horde of rhinos, trying to stop them stealing all his pizza by throwing cola bottles. It sounds a little silly (it IS a little silly) but it’s actually great fun.

I got to see this game develop from the start, which was really cool. Bram added in the walk-cycles and cola-throwing before I’d even written the animation and shoot-’em-up tutorials!

Play the game here, and leave a comment to let Bram know what you think

The Counter class: If you completed the 12 part base series, then you know what .as this is. I use the Counter class to show my hero’s health and ammo.

I found the class lacking a few basic functions so I added them.

Here’s the original class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package
{
   import flash.display.MovieClip;
   public class Counter extends MovieClip
   {
      public var currentValue:Number;
      
      public function Counter()
      {
         reset();
      }
      
      public function addToValue( amountToAdd:Number ):void
      {
         currentValue = currentValue + amountToAdd;
         updateDisplay();
      }
      
      public function setValue( amount:Number ):void
      {
         currentValue = amount;
         updateDisplay();
      }
      
      public function reset():void
      {
         currentValue = 0;
         updateDisplay();
      }
      
      public function updateDisplay():void
      {
         
      }
   }
}

The new one’s here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package {
   import flash.display.MovieClip;
   public class Counter extends MovieClip {
      public var currentValue:Number;
 
      public function Counter() {
         reset();
 
      }
      public function addToValue( amountToAdd:Number ):void {
         currentValue = currentValue + amountToAdd;
         updateDisplay();
 
      }
      public function removeToValue( amountToremove:Number ):void {
         currentValue = currentValue - amountToremove;
         updateDisplay();
 
      }
      public function reset():void {
         currentValue = 0;
         updateDisplay();
 
      }
      public function updateDisplay():void {
 
      }
      public function setValue( amount:Number ):void {
         currentValue = amount;
         updateDisplay();
      }
      public function get CurrentValue():Number {
         return currentValue;
      }
   }
}

So I added the functions CurrentValue(), and removeToValue():

• removeToValue- used to remove X amount from “Score” for example.
• CurrentValue- returns the current value of the subclass(such as gameScore in avoider game)

Example use for CurrentValue():

if (gameScore.CurrentValue >= 100){
//You win the game! (if goal was to score 100 pts)
}

Put this code in your avoidergame.as.

Keep in mind my game is way past the original version of avoidergame, so if the code puts out some funny errors such as “Can’t find the  method/ or property of a null object reference” then dig in deep into the heart of OOP. I mean spend time understanding how to correctly reference objects. Is gameScore defined as a variable in your .as?  Is it a child of that class? Learn your game and how you built it.

So my game is getting bigger, and keeping on top of lag is a high priority. Saying that I run the fps at 50, I never want it to go bellow a certain amount (such as 30, for a full blown battle, or 45 if only 2-3 objects/NPCs moving around).

Considering a big game, such as your own, you found arrays to be quite helpful. In my game, I have an enemy array (enemies) that checks hitTest() for each wall in the second array (walls) using a nested loop, presented in the base Avoider Game Tutorial. I assume you have completed that series, and you know what a nested loop is so I wont go into explaining it if you don’t mind.

I’m about to add a third array (allies) which will include the avatar in it. Problem with performance is this:

if currently you have enemies with nested walls, then you have that code being checked X times like so: 

enemies[# of arguments]  *  walls[# of arguments] = amount of hitTest checks.

Follow me?

So if there are 3 enemies in the enemies array, and 5 walls in the walls array, then the total number of checks would be:

3*5= 15

thus 15 times the code went through. Ok not bad. Lets add my allies array’s loop now by nesting it in the walls array’s loop.

enemies[# of arguments]  *  walls[# of arguments] *  allies[# of arguments] = amount of hitTest() checks.

There are three allies, the first argument is the avatar, the second two are your buddies fighting with you. So

3*5*3= 15*3, then 15*3 = 45

45 checks! 3 times as much strain put on flash player! Answer is low fps,  (regarding my game). What do we do?

Well I need each enemy and ally to recognize hitTests between each other as well as walls. Try this:

enemies[# of arguments]  * allies[# of arguments] = subtotal1 amount of hitTest checks.

enemies[# of arguments]  *  walls[# of arguments] = subtotal2 amount of hitTest checks.

allies[# of arguments]  *  walls[# of arguments] = subtotal3 amount of hitTest checks.

subtotal1 + subtotal2 + subtotal3 = amount of hitTest checks.

so

3*3=9;

3*5=15;

3*5=15;

9+15+15=39;

39 sounds better than 45

Why is this such a big deal? Well the answer is everything you do to your game should be a big deal if you plan on having a big game. If you could cut out every “fee” you got in life for a year, such as $2 for an ATM transaction, would it add up? Games work the same way. Down to the graphics. So now lets suppose you have:

20 walls, 2 enemies, and 1 ally (the avatar with no buddies in current level). Would the checking work the same? Save you a few checks, like 6 last time? Lets find out:

The old way (allies nested in enemies, walls nested in allies):

2*1*20=40

The new way(allies nested in enemies, walls nested in allies, walls nested in enemies)

2*1=2

2*20=40

1*20=20

2+40+20= 62 

What? The old way was better this time. I guess this goes to show that you really need to pay attention to how many loops you have, and how many checks are going through with your current setup. If anyone has a more efficient way of doing this, please let me know.  

Any questions?

(Please open the article to see the flash file or player.)

I am using the files from MJW’s final part of AS3 conversion of Frozen Haddock’s avoider game tutorial. If you do not have the files to follow the tutorial, you can grab them here.

Move with the mouse

Since we will start using the mouse, we do not need the keyboard verification functions and variables. I would comment all lines, but MJW made it simple with the useMouseControl variable. All we need to do is set it to true. Open AvoiderGame.as:

public function AvoiderGame()
{
	currentLevelData = new LevelData( 1 );
	setBackgroundImage();
 
	backgroundMusic = new BackgroundMusic();
	bgmSoundChannel = backgroundMusic.play();
	bgmSoundChannel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished, false, 0, true );
	enemyAppearSound = new EnemyAppearSound();
 
	downKeyIsBeingPressed = false;
	upKeyIsBeingPressed = false;
	leftKeyIsBeingPressed = false;
	rightKeyIsBeingPressed = false;
 
	useMouseControl = true;
	Mouse.hide();
	army = new Array();
 
	avatar = new Avatar();
	addChild( avatar );
	if ( useMouseControl )
	{
		avatar.x = mouseX;
		avatar.y = mouseY;
	}
	else
	{
		avatar.x = 200;
		avatar.y = 250;
	}
 
	gameTimer = new Timer( 25 );
	gameTimer.addEventListener( TimerEvent.TIMER, onTick, false, 0, true );
	gameTimer.start();
 
	addEventListener( Event.ADDED_TO_STAGE, onAddToStage, false, 0, true );
}

I changed useMouseControl to true. Now we have the mouse movement working! Check it:

(Please open the article to see the flash file or player.)

Adding speed

When you play the game, you may find it easy, since the skull is placed where your mouse is, every frame. We need a harder game, so let’s put a fixed speed to the skull!

If we check the onTick function of AvoiderGame.as, we can see why the skull moves so fast:

if ( useMouseControl )
{
	avatar.x = mouseX;
	avatar.y = mouseY;
}

This code only places the skull where our mouse is located, so we have to modify it.

Our skull needs to move in the horizontal and in the vertical, using a fixed speed. To do it, we need to know where our mouse is located and what is the angle between them. The reason for the angle will be explained later.

If we take a look into Avatar.as file, we can see only the moveABit function. We could change it to meet our needs, but instead of that, we will create a new function. Now, moveABit can still be used with the keyboard movement, in case you want to switch from mouse to keyboard and vice versa.

Let’s create the moveWithMouse function:

Avatar.as file:

package
{
	import flash.display.MovieClip;
 
	public class Avatar extends MovieClip
	{
		public function Avatar()
		{
 
		}
 
		public function moveABit( xDistance:Number, yDistance:Number ):void
		{
			var baseSpeed:Number = 3;
			x += ( xDistance * baseSpeed );
			y += ( yDistance * baseSpeed );
		}
 
		public function moveWithMouse( angleBetween:Number ):void
		{
 
		}
	}
}

We need a speed variable to control our movement. Instead of creating one, I will turn the baseSpeed variable from moveABit into a class-level variable. Here is how I did it:

package
{
	import flash.display.MovieClip;
 
	public class Avatar extends MovieClip
	{
		private var baseSpeed:Number;
 
		public function Avatar()
		{
			baseSpeed = 3;
		}
 
		public function moveABit( xDistance:Number, yDistance:Number ):void
		{
			x += ( xDistance * baseSpeed );
			y += ( yDistance * baseSpeed );
		}
 
		public function moveWithMouse( ):void
		{
 
		}
	}
}

The line 13 was removed, and baseSpeed is now a private variable.

As I said before, we need the angle between the skull and the mouse. We will calculate it into AvoiderGame.as and pass it as a parameter with a call to moveWithMouse. So let’s go back to onTick function of AvoiderGame.as.

if ( useMouseControl )
{
	avatar.x = mouseX;
	avatar.y = mouseY;
}

I am removing the code inside that if statement, because we don’t need it.

Before writing any code, I am going to introduce you to Math.atan2 function. Math.atan2 computes the angle of a given point (in radians), measured counterclockwise from a circle’s x axis. The image below contributes to the understanding of the function:

Now we can start coding the if statement:

if ( useMouseControl )
{
	var angle:Number = Math.atan2( mouseY - avatar.y, mouseX - avatar.x );
	avatar.moveWithMouse(angle);
}

Be careful when using Math.atan2: you have to pass first the Y variable, then the X variable. The angle is measured in radians. We do not need to convert it to degrees – when we use it later, we need the angle in radians.

The reason for why I wrote (mouseY – avatar.y) and (mouseX – avatar.x) is because we are using avatar.x and avatar.y as the center of our reference circle. We have to decrease avatar.x and avatar.y of the values to make sure the center of the circle is the (0, 0) point.

We added a parameter to avatar’s moveWithMouse function, so let’s change it and work on the movement. Switch back to Avatar.as.

I’m adding the parameter to moveWithMouse:

public function moveWithMouse( angleBetween:Number ):void
{
 
}

Before continuing, I have to talk about the uniform movement. Many of you will remember the physics classes. When something is moving, it has a x position modifier and a y position modifier. The vector resulting from the sum of these two other vectors is the final speed. Look at the image:

Guess what is the angle in the image? Exactly! The angle passed to moveWithMouse function. The Y speed and X speed vectors form an angle of 90º, so you can use sine and cosine to calculate them. The sine of the angle is (Y speed / Final speed), and cosine is (X speed / Final speed). In a better way, Y speed = Final speed * sine of angle and X speed = Final speed * cosine of angle.

Now, back to moveWithMouse function, we will use the two last formulas to make our skull move!

I will create an xSpeed and ySpeed variable, so you can easily work with them later.

package
{
	import flash.display.MovieClip;
 
	public class Avatar extends MovieClip
	{
		private var baseSpeed:Number;
		private var xSpeed:Number;
		private var ySpeed:Number;
 
		public function Avatar()
		{
			baseSpeed = 3;
		}
 
		public function moveABit( xDistance:Number, yDistance:Number ):void
		{
			x += ( xDistance * baseSpeed );
			y += ( yDistance * baseSpeed );
		}
 
		public function moveWithMouse( angleBetween:Number ):void
		{
			xSpeed = Math.cos(angleBetween) * baseSpeed;
			ySpeed = Math.sin(angleBetween) * baseSpeed;
 
			x += xSpeed;
			y += ySpeed;
		}
	}
}

Here is how our game is looking.

(Please open the article to see the flash file or player.)

If you test the game, we can see it worked, but our mouse is not visible, making the game very hard! Also, when the skull reaches your mouse, it gets shaked. To fix the mouse issue, just change AvoiderGame.as:

public function AvoiderGame()
{
	currentLevelData = new LevelData( 1 );
	setBackgroundImage();
 
	backgroundMusic = new BackgroundMusic();
	bgmSoundChannel = backgroundMusic.play();
	bgmSoundChannel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished, false, 0, true );
	enemyAppearSound = new EnemyAppearSound();
 
	downKeyIsBeingPressed = false;
	upKeyIsBeingPressed = false;
	leftKeyIsBeingPressed = false;
	rightKeyIsBeingPressed = false;
 
	useMouseControl = true;
	// Mouse.hide();
	army = new Array();
 
	avatar = new Avatar();
	addChild( avatar );
	if ( useMouseControl )
	{
		avatar.x = mouseX;
		avatar.y = mouseY;
	}
	else
	{
		avatar.x = 200;
		avatar.y = 250;
	}
 
	gameTimer = new Timer( 25 );
	gameTimer.addEventListener( TimerEvent.TIMER, onTick, false, 0, true );
	gameTimer.start();
 
	addEventListener( Event.ADDED_TO_STAGE, onAddToStage, false, 0, true );
}

I commented Mouse.hide() to make our mouse visible. Now you can see where you are moving.

For the shaking problem, we need to go to the onTick function of AvoiderGame.as. It is caused by the delay of the tick. It only asks our avatar to move to a position every tick. Sometimes our avatar exceeds the necessary distance to reach the mouse, and in the next tick it needs to go back, exceeding again the distance. This causes the shaking of our avatar.

Do you remember this post from MJW? We will use it now to calculate the distance between our mouse and our avatar. If the distance is less than or equal to 3 px, we only place the avatar in the mouse position.

public function onTick( timerEvent:TimerEvent ):void
{
	gameClock.addToValue( 25 );
	if ( Math.random() < currentLevelData.enemySpawnRate )
	{
		var randomX:Number = Math.random() * 400;
		var newEnemy:Enemy = new Enemy( randomX, -15 );
		army.push( newEnemy );
		addChild( newEnemy );
		gameScore.addToValue( 10 );
		sfxSoundChannel = enemyAppearSound.play();
	}
	if ( useMouseControl )
	{
		var distance = Math.sqrt( (mouseX - avatar.x) * (mouseX - avatar.x) + (mouseY - avatar.y) * (mouseY - avatar.y));
 
		if(distance <= 3)
		{
			avatar.x = mouseX;
			avatar.y = mouseY;
		}
		else
		{
			var angle:Number = Math.atan2( mouseY - avatar.y, mouseX - avatar.x );
			avatar.moveWithMouse(angle);
		}
	}
	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 );
		}
	}
 
	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 );
	}
 
	var avatarHasBeenHit:Boolean = false;
	var i:int = army.length - 1;
	var enemy:Enemy;
	while ( i > -1 )
	{
		enemy = army[i];
		enemy.moveABit();
		if ( PixelPerfectCollisionDetection.isColliding( avatar, enemy, this, true ) )
		{
			gameTimer.stop();
			avatarHasBeenHit = true;
		}
		if ( enemy.y > 350 )
		{
			removeChild( enemy );
			army.splice( i, 1 );
		}
		i = i - 1;
	}
	if ( avatarHasBeenHit )
	{
		bgmSoundChannel.stop();
		dispatchEvent( new AvatarEvent( AvatarEvent.DEAD ) );
	}
 
	if ( gameScore.currentValue >= currentLevelData.pointsToReachNextLevel )
	{
		currentLevelData = new LevelData( currentLevelData.levelNum + 1 );
		setBackgroundImage();
	}
}

I created the variable distance and calculated it, checking if it was less than or equal to 3. If true, we placed the avatar in the mouse’s position. If not, we just asked the avatar to move in the mouse’s direction. You can see the game now:

(Please open the article to see the flash file or player.)

Conclusion

This was just an introduction to our movement with the mouse. You can make it a lot better, adding acceleration and friction, for example.

You can work with the speed of our avatar, increasing it every level, or create a custom cursor. I will not tell you how to do it – go try it!

You can grab the final files of the tutorial here.

Thank you

This tutorial builds on Mouse Movement, Keyboard Shooting — only this time, you’ll learn how to do the opposite!

Click here to read on…

Fabio from Animassauro has put together this awesome game based on the AS3 Avoider Game Tutorial.

It’s called DinoScape; you play as a little green dinosaur trying to fight off eyeless monsters so that you can build a spaceship. Also, your main weapon is a giant HB pencil.

Click here to play it. It’s really awesome! Not only are the graphics amazing (check out the Animassauro showreel for more of this), but the gameplay is very different to the basic avoider game.

Fabio comments that “it’s a little game, but for myself, it was a great experience to learn more about game programming and actionscript.”

Thanks Fabio

Learn how animate your game’s characters with the “divided timeline” approach. First part of a mini-series.

Click here to read on!