We are now on Twitter!


Penguin wearing teacher's hatGame Development With FlashDevelop Part 5

Title and Game Over states

Welcome to part 5 of our tutorial series. When we left off last time, we had a basic game where the player could get killed or kill all of the aliens and the game would continue regardless. By adding some more states to the game, we can easily make it so that the game will end and can be restarted.

You should have two graphics, StartScreen.png and GameOverScreen.png, in your images folder. These will be the backgrounds for the new states that we are about to create.

Let's create a subclass of State called StartState. This will be the screen that the player sees before game play commences.

package  
{	
	import flash.display.*;
	import flash.geom.*;
	
	public class StartState extends State
	{
		[Embed(source="../images/StartScreen.png")]
		private var i:Class;
		public var graphic:BitmapData
		
		public function StartState()  
		{
			var image:DisplayObject= new i();
			graphic = new BitmapData(image.width, image.height, true, 0x00000000);
			graphic.draw(image);
		}
		
		public override function Update():void
		{
		
		}
		
		public override function Render():void
		{
			State.currentState.buffer.copyPixels( graphic, graphic.rect, new Point(0,0) );
		}
		
	}
}

There's nothing here that we haven't covered already. Also edit the init function in main.mxml to look like this:

public function init():void
{
	State.currentState = new StartState();
} 

Now when the game starts, we see the start screen. The start screen needs to respond to mouse clicks and, as this is functionality that is likely to be used be other states, we will add an additional function to the State class:

public function Click():void
{
			
}

Change the click function in main.mxml so that the Click function of the current state gets called:

public function click(event:Event):void 
{
	canvas.setFocus();
	State.currentState.Click();
} 

Now override Click in StartState so that it sets State.currentState to a new instance of PlayState:

public override function Click():void
{
	State.currentState = new PlayState();
}

Our next challenge is the Game Over screen. This is almost identical to the StartState except that it will use a different graphic and we want to go to StartState in response to a mouse click. Create a GameOverState as follows:

package  
{	
	import flash.display.*;
	import flash.geom.*;
	
	public class GameOverState extends State
	{
		[Embed(source="../images/GameOverScreen.png")]
		private var i:Class;
		public var graphic:BitmapData
		
		public function GameOverState()  
		{
			var image:DisplayObject= new i();
			graphic = new BitmapData(image.width, image.height, true, 0x00000000);
			graphic.draw(image);
		}
		
		public override function Update():void
		{
		
		}
		
		public override function Render():void
		{
			State.currentState.buffer.copyPixels( graphic, graphic.rect, new Point(0,0) );
		}
		
		public override function Click():void
		{
			State.currentState = new StartState();
		}
	}
}

Now we need to make PlayState set the current state to a new instance of GameOverState. This will occur in two situations - firstly if the player gets killed or secondly if the player destroys all of the aliens.

At the start of the Update function in PlayState add the following line to check if the player has been killed:

if ( !player.active ) State.currentState = new GameOverState();

Play the game and get the player killed. You should see the game over screen appear and then that should take you back to the start screen. Now go back to the Update function in PlayState and alter the section of code that calls Update on each alien so that we can count the number of aliens who are still alive.

var aliensAlive:int = 0;
for each (alien in aliens) 
{
	if ( alien.active ) aliensAlive++;
	alien.Update();
}
if ( aliensAlive == 0 ) State.currentState = new GameOverState();

The game will now end when either the player or all of the aliens are killed. You could of course have different states for victory or defeat rather than the same game over screen irrespective of the reason for the end of the game.

The game at this stage should look like this:

There is plenty more that can be added to the game however a lot of it is simply repeating what we have already covered. Explosions could be added for example by subclassing Actor so that you have multiple frames of animation for the explosion and create a new instance of it at the x and y coordinates of any destroyed alien.

Play around with the code and have fun modifying it and adding extra features!