Build airship shooting game from scratch Part 4

07 Feb 2013

Flash, Game, Shooting

by BrianL

In this tutorial, we will create a main class that controls the ship, firing system as well as spawning enemy.

Tutorial Information

Difficulty: Beginner
Platform used: Adobe Professional Flash CS6
Estimated completion time: 2 hours

Build airship shooting game from scratch Series

Assets Download

Part 3 Final File

Download

Graphic Assets

Download

Step 1:

After we have downloaded EarthWarP4Assets Zip file, let’s extract folder Assets folder (put together with ship.png file).

Run EarthWar.fla file.

Import 3 new graphic assets into scene.

Go to File/Import/Import to Stage…

Ctrl + Select round1BG.png, shipBullet.png and Enemy1.png

Click Open.

Hit Delete key to delete these images on stage,we only need them in the Library panel.

We also delete the ship on stage that we created in previous tutorial parts.

Our Library panel should show as below:

Now we drag round1BG.png to Stage (where now should be blank).

Hit F8 to convert it to MovieClip.

Change the attributes to:

Name: Background
Type: Movie Clip
Registration: Upper left corner.
Export for ActionScript: checked
Class: BackgroundMc

Click OK.

Delete it from stage. (only need the its Movieclip in Library panel)

Do the same thing for shipBullet.png and Enemy1.png, and input the attributes as below:

Now our Library should has:

At the moment, our Stage should be empty so delete anything that is still on the Stage.

This is all we need for preparing the necessary assets. Now we move to coding part.

Step 2:

Create Main class to handle Stage system.

Click the empty Stage.

In the Properties panel, type Main in the Class textbox.

Click the pencil next to the textbox.

Now, it will open the new AS3 file. This is where we will put in all the system code, such as create enemy, firing, etc.

Go to File/Save and save the file as name Main.as in the same folder with ShipMc.as.

Now our Main.as class should be as below:

Now let’s add back our ship.

After public class Main extends MovieClip { line add public var ship: ShipMc;

public class Main extends MovieClip {
	public var ship:ShipMc;

Add import flash.display.Stage; into import section.

In the public function Main() add code as below:

public function Main() {
	ship = new ShipMc(this.stage);//create a new ship
	//in ShipMc we need stage to create the keyObject
	this.addChild(ship);//add ship to stage
}

The current Main.as should be:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
 
		public function Main() {
			ship = new ShipMc(this.stage);//create a new ship
			//in ShipMc we need stage to create the keyObject
			this.addChild(ship);//add ship to stage
		}
	}
 
}

We also need to fix the ShipMc.as a bit to fit Main.as code.

Open ShipMc.as (go to File/Open).

Change public var key:KeyObject = new KeyObject(stage); to public var key:KeyObject;

Change the following code

public function ShipMc() {
	this.addEventListener(Event.ENTER_FRAME,shipFunction);
}

public function ShipMc(stage) {
	key = new KeyObject(stage);
	this.addEventListener(Event.ENTER_FRAME,shipFunction);
}

Now, press Ctrl + S to save ShipMc.as file.

Go to Main.as tab and press Ctrl + S to save Main.as file.

Hit Ctrl + Enter to run the game.

The ship now will be shift to upper left position (0,0) because we haven’t declared the position for the ship in the Main.as file. Other than that, we game should run as what you have in tutorial part 3.

Go to Main.as tab, add after this.addChild(ship) following code:

ship.x = 140;
ship.y = 320;

Now our ship have a good starting position.

Step 3:

Let’s add our background.

In the variable declaration, add after public var ship:ShipMc;

public var gameBackground:BackgroundMc;

In the Main() function, add:

gameBackground = new BackgroundMc();
this.addChild(gameBackground);

Notes:

Remember to addChild(gameBackground) before addChild(ship), if not, the ship will be below the gameBackground.

Now hit Ctrl + Enter to test whether the background is in correct position.

Now, our Main.as should like this:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
		public var gameBackground:BackgroundMc;
 
		public function Main() {
			gameBackground = new BackgroundMc();
			this.addChild(gameBackground);
			ship = new ShipMc(this.stage);
			this.addChild(ship);
			ship.x = 140;
			ship.y = 320;
		}
	}
}

Let’s have our ship firing some bullet.

Step 4:

We want our ship to fire bullet all the time.

So in Main.as class, inside public function Main() {…}, we add:

this.addEventListener(Event.ENTER_FRAME,gameLoop,false,0,true);
//run method gameLoop everyframe
//false, 0, true: use weak reference to increase performance

After that, add method gameLoop(){} after Main(){}.

Now, our Main.as should like this:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
		public var gameBackground:BackgroundMc;
 
		public function Main() {
			gameBackground = new BackgroundMc();
			this.addChild(gameBackground);
			ship = new ShipMc(this.stage);
			this.addChild(ship);
			ship.x = 140;
			ship.y = 320;
			this.addEventListener(Event.ENTER_FRAME,gameLoop,false,0,true);
			//run method gameLoop everyframe
			//false, 0, true: use weak reference to increase performance
		}
		public function gameLoop(e:Event)
		{
 
		}
	}
}

Notes:

Remember to check if there is import flash.events.Event; in the import section after adding Event.ENTER_FRAME

Inside game loop, make it to call a new function shipFire()

After gameLoop(){} create the just-called method shipFire()

public function gameLoop(e:Event)
{
	shipFire();
}
public function shipFire()
{
 
}

In these case, the function shipFire() will be called everyframe also.

Let’s make our bullet.

In the variable declaration, after public var gameBackground:BackgroundMc; add:

public var shipBullet:ShipBulletMc;

Inside function shipFire(){}, add:

shipBullet = new ShipBulletMc();
this.addChild(shipBullet);
shipBullet.x = ship.x;
shipBullet.y = ship.y;

Our Main.as should like this:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
		public var gameBackground:BackgroundMc;
		public var shipBullet:ShipBulletMc;
 
		public function Main() {
			gameBackground = new BackgroundMc();
			this.addChild(gameBackground);
			ship = new ShipMc(this.stage);
			this.addChild(ship);
			ship.x = 140;
			ship.y = 320;
			this.addEventListener(Event.ENTER_FRAME,gameLoop,false,0,true);
			//run method gameLoop everyframe
			//false, 0, true: use weak reference to increase performance
		}
		public function gameLoop(e:Event)
		{
			shipFire();
		}
		public function shipFire()
		{
			shipBullet = new ShipBulletMc();
			this.addChild(shipBullet);
			shipBullet.x = ship.x;
			shipBullet.y = ship.y;
		}
	}
}

Now, if we hit Ctrl + Enter, we should able to see that bullet is added everyframe, and it is not moving at all. It’s fine, we will correct it now.

Step 5:

First, we will make it fire slower. In this case, we can use Timer class, but I prefer to create a timer myself.

In the variable declaration section,after public var shipBullet:ShipBulletMc; add:

public var fireTimer:int = 0;
public var fireTimerMax:int = 15;

Inside the gameLoop(e:Event){} add, change shipFire(); to:

fireTimer++; //means fireTimer increase value by 1
if(fireTimer == fireTimerMax)//check if timer reach max value
{
	shipFire();
	fireTimer = 0;//after fire, reset fireTimer to 0
}

Our Main.as should like this:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
		public var gameBackground:BackgroundMc;
		public var shipBullet:ShipBulletMc;
 
		public var fireTimer:int = 0;
		public var fireTimerMax:int = 15;//1 second = 30frames, 15 frames = 0.5 seconds
 
		public function Main() {
			gameBackground = new BackgroundMc();
			this.addChild(gameBackground);
			ship = new ShipMc(this.stage);
			this.addChild(ship);
			ship.x = 140;
			ship.y = 320;
			this.addEventListener(Event.ENTER_FRAME,gameLoop,false,0,true);
			//run method gameLoop everyframe
			//false, 0, true: use weak reference to increase performance
		}
		public function gameLoop(e:Event)
		{
			fireTimer++; //means fireTimer increase value by 1
			if(fireTimer == fireTimerMax)//check if timer reach max value
			{
				shipFire();
				fireTimer = 0;//after fire, reset fireTimer to 0
			}
 
		}
		public function shipFire()
		{
			shipBullet = new ShipBulletMc();
			this.addChild(shipBullet);
			shipBullet.x = ship.x;
			shipBullet.y = ship.y;
		}
	}
}

Now, if we hit Ctrl + Enter, we should able to see that the ship firing with a lower frequency (2 bullets/ second)

Now we will make it move:

Go back to EarthWar.fla.

Right-click ShipBullet movieclip.

Click Edit Class.

ShipBulletMc.as open up.

Go to File/Save.

Save at the same directory as the other .as files.

Modify the ShipBulletMc.as as below:

package  {
 
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class ShipBulletMc extends MovieClip {
		public var speed = 15;
 
		public function ShipBulletMc() {
			this.addEventListener(Event.ENTER_FRAME,bulletFunction,false,0,true);
		}
		public function bulletFunction(e:Event)
		{
			this.x+= speed;//increase self x position by speed value everyframe
		}
	}	
}

Now, if we hit Ctrl + Enter, we should able to see that bullet is fired correctly, but from the center of the ship. We want it to fire in the front of the ship.

Go back to Main.as

Add Offset to shipBullet.x = ship.x; by 60:

shipBullet.x = ship.x + 60;

Hit Ctrl + Enter to check. Now it should be perfect.

Now we can add enemies to scene.

Step 5:

To add enemies, let’s modify Enemy1Mc.as first.

Go back to EarthWar.fla.

Right-click Enemy1 movieclip.

Click Edit Class.

Enemy1Mc.as open up.

Go to File/Save.

Save at the same directory as the other .as files.

We also do something as the bullet, the only different is the enemy’s flying direction is opposite to the bullet’s.

Modify the ShipBulletMc.as as below:

package  {
 
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Enemy1Mc extends MovieClip {
		public var speed = 10;
 
		public function Enemy1Mc() {
			this.addEventListener(Event.ENTER_FRAME, enemyFunction, false, 0 ,true);
		}
		public function enemyFunction(e:Event)
		{
			this.x-= speed;//increase self x position by speed value everyframe
		}
	}
 
}

Now go back to Main.as

in the variable declaration section, add the following lines:

public var enemy:Enemy1Mc;
public var addEnemyTimer:int = 0;
public var addEnemyTimerMax:int = 30;

In the gameLoop(e:Event){}, add the following code:

addEnemyTimer++;
if(addEnemyTimer ==addEnemyTimerMax)//check if timer reach max value
{
	addEnemy();
	addEnemyTimer = 0;//after add enemy, reset addEnemyTimer to 0
}

Our gameLoop(e:Event){} should look like:

public function gameLoop(e:Event)
{
	fireTimer++; //means fireTimer increase value by 1
	if(fireTimer == fireTimerMax)//check if timer reach max value
	{
		shipFire();
		fireTimer = 0;//after fire, reset fireTimer to 0
	}
 
	addEnemyTimer++;
	if(addEnemyTimer ==addEnemyTimerMax)//check if timer reach max value
	{
		addEnemy();
		addEnemyTimer = 0;//after add enemy, reset addEnemyTimer to 0
	}
 
}

After function shipFire(){}, we add function addEnemy(){}

public function addEnemy()
{
	enemy = new Enemy1Mc();
	this.addChild(enemy);
	enemy.x = 1000;
	enemy.y = ship.y;
}

Therefore, our Main.as should look like:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Main extends MovieClip {
		public var ship:ShipMc;
		public var gameBackground:BackgroundMc;
 
		public var shipBullet:ShipBulletMc;
		public var fireTimer:int = 0;
		public var fireTimerMax:int = 15;//1 second = 30frames, 15 frames = 0.5 seconds
 
		public var enemy:Enemy1Mc;
		public var addEnemyTimer:int = 0;
		public var addEnemyTimerMax:int = 30;
 
		public function Main() {
			gameBackground = new BackgroundMc();
			this.addChild(gameBackground);
			ship = new ShipMc(this.stage);
			this.addChild(ship);
			ship.x = 140;
			ship.y = 320;
			this.addEventListener(Event.ENTER_FRAME,gameLoop,false,0,true);
			//run method gameLoop everyframe
			//false, 0, true: use weak reference to increase performance
		}
		public function gameLoop(e:Event)
		{
			fireTimer++; //means fireTimer increase value by 1
			if(fireTimer == fireTimerMax)//check if timer reach max value
			{
				shipFire();
				fireTimer = 0;//after fire, reset fireTimer to 0
			}
 
			addEnemyTimer++;
			if(addEnemyTimer ==addEnemyTimerMax)//check if timer reach max value
			{
				addEnemy();
				addEnemyTimer = 0;//after add enemy, reset addEnemyTimer to 0
			}
 
		}
		public function shipFire()
		{
			shipBullet = new ShipBulletMc();
			this.addChild(shipBullet);
			shipBullet.x = ship.x + 60;
			shipBullet.y = ship.y;
		}
		public function addEnemy()
		{
			enemy = new Enemy1Mc();
			this.addChild(enemy);
			enemy.x = 1000;
			enemy.y = ship.y;
		}
	}
}

Now, hit Ctrl + Enter, our game should run smoothly, although we haven’t done checking collision yet. We will do it in the next part of this series.

Download Final Files

Download

Part 5 Teaser:

Checking collision
add explosion animation

About the Author

I am a game design freelancer. I make games, from 2D to 3D, from PC to mobile. I work in both graphic designing as well as programming. Game designing is everything to me. I live in Singapore at the moment. Feel free to contact me at: brianlin1992@yahoo.com