Build airship shooting game from scratch Part 3

02 Feb 2013

by BrianL

After we have familiar a bit with AS3, we are going to program the ship following the control from the keyboard by using Senocular library.

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 2 Final File

Download

Senocular Library

Download

Step 1:

After we have downloaded Senocular Library Zip file, let’s extract folder com into our root folder EarthWar (together with EarthWar.fla and ShipMc.as files).

Import Library of Senocular in to Ship.as.

Let’s open file EarthWar.fla, and go to edit ShipMc.as (by right-click Ship in the library, click Edit Class).

Since we are going to use a third-party library, we add the code into import section as below:

import flash.display.MovieClip;
    import flash.events.Event;
    import com.senocular.utils.KeyObject;
    import flash.ui.Keyboard;

Notes:

import com.senocular.utils.KeyObject: in order to use the class KeyObject in folder com/senocular/utils/, we have to import like that.

import flash.ui.Keyboard: Add class Keyboard from Flash Library.

public class ShipMc extends MovieClip {
	public var velocity:int = 10
	public var key:KeyObject = new KeyObject(stage);

This KeyObject acts as a handler which response the key press.

Step 2:

Now, we use key object created like this:

Replace this.x = this.x + velocity; by:

if(key.isDown(Keyboard.UP) == true){
	this.y = this.y - velocity;
}

Notes:

key.isDown(Keyboard.UP): So whenever we want to check whether a key is being pressed, put that key in brackets and the phrase will return either true or false.
Example: how check if key Q is being pressed?

if(key.isDown(Keyboard.Q) == true){
}

At the moment, the result when you press Ctrl + Enter should like this:

Flash test

Notes:

The position (0,0) of flash stage is the top left corner.
Value of Y is increase when go down.
Value of X is increase when go right.

Step 3:

Now we can do the same thing for the other 3 direction:

public function shipFunction (e:Event)
{
	if(key.isDown(Keyboard.UP)){
		this.y = this.y - velocity;
	}
	if(key.isDown(Keyboard.DOWN)){
		this.y = this.y + velocity;
	}
	if(key.isDown(Keyboard.LEFT)){
		this.x = this.x - velocity;
	}
	if(key.isDown(Keyboard.RIGHT)){
		this.x = this.x + velocity;
	}
}

After add the rest of the code, the result when you press Ctrl + Enter should like this:

Flash test

Step 4:

Advanced logic: do you found the moving is very stiff, because the movement should also have acceleration when it start, slow deceleration when it stop.

The code for smooth motion is like this:

package  {
 
	import flash.display.MovieClip;
	import flash.events.Event;
	import com.senocular.utils.KeyObject;
	import flash.ui.Keyboard;
 
	public class ShipMc extends MovieClip {
		public var maxVelocity:int = 10;
		public var velocityX = 0;//the horizontal velocity
		public var velocityY = 0;//the vertical velocity
 
		public var key:KeyObject = new KeyObject(stage);
 
		public function ShipMc() {
			this.addEventListener(Event.ENTER_FRAME,shipFunction);
		}
		public function shipFunction (e:Event)
		{
			if(key.isDown(Keyboard.UP) == true){
				if(velocityY > -maxVelocity) //if vertical velocity has not reach min velocity (which is -10)
				velocityY -= 0.5;//(same as velocityY = velocityY - 0.5) decrease the vertical velocity by 0.5 
			}
			else if(key.isDown(Keyboard.DOWN) == true){
				if(velocityY < maxVelocity)//if vertical velocity has not reach max velocity (which is 10)
				velocityY += 0.5;//(same as velocityY = velocityY + 0.5) increase the vertical velocity by 0.5
			}
			else if(key.isDown(Keyboard.LEFT) == true){
				if(velocityX > -maxVelocity)//if horizontal velocity has not reach min velocity (which is -10)
				velocityX -= 0.5;//(same as velocityX= velocityX - 0.5) decrease the horizontal velocity by 0.5
			}
			else if(key.isDown(Keyboard.RIGHT)== true){
				if(velocityX < maxVelocity)//if horizontal velocity has not reach max velocity (which is 10)
				velocityX += 0.5;//(same as velocityX= velocityX + 0.5) increase the horizontal velocity by 0.5
			}
			else {
				velocityX *=0.92;//if nothing is pressed, reduce horizontal velocity by multiplying it by 0.92
				velocityY *=0.92;//if nothing is pressed, reduce vertical velocity by multiplying it by 0.92
			}
 
			this.x += velocityX; //increase current x of the ship by velocityX value every frame (even nothing is pressed, this line will still execute)
			this.y += velocityY; //increase current y of the ship by velocityY value every frame (even nothing is pressed, this line will still execute)
 
		}
	}
}

It maybe a bit complicated, but I am sure that we all will understand and even able to write more complicated code as we continue this project. Cheer up!

The result of this code should be as this link:

Flash test

Download Final Files

Download

Part 4 Teaser:

Fire the hole!!!!!
Add Enemy

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