Archive for the 'Game Design' Category

Jul 23 2008

Jetman and the Helicopter Game Tutorial - Part 2

This is the continuation and final chapter of the Jetman and the Helicopter Game Tutorial series .

Read part one here.

Wall collision:

Now it is time to make the helicopter actually check for the walls.




The Wall Class:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Wall extends MovieClip
	{
		public var bPlaying:Boolean = false;
 
		public function Wall ( BStarting:Boolean ) : void
		{
			bPlaying = BStarting;
 
			this.addEventListener ( Event.ENTER_FRAME, onEnterFrameHandler );
		}
 
		private function onEnterFrameHandler ( E:Event ) : void
		{
			if ( bPlaying )
			{
				this.x -= 15;
			}
		}
 
		public function EndGame ( ) : void
		{
			this.removeEventListener ( Event.ENTER_FRAME, onEnterFrameHandler );
		}
	}
}

Lines 25-28: A public function that removes the event listener for the instance of the Wall class.
Continue Reading »

No responses yet

Jul 22 2008

Jetman and the Helicopter Game Tutorial - Part 1

I remember playing the Helicopter game and thinking it was extremely complex. Looking back on it now, I realize it is probably one of the easiest flash games on the internet to clone. Jetman, a popular game on Facebook is actually a clone of the helicopter game. In fact, it is so easy, it can be programmed in less than 400 lines of code! So let’s get started.

The Title Screen:

The title screen is supposed to disappear when you click it and start the game.

Document Class:

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	public class Main extends Sprite
	{
		private var TitleScreen:StartScreen;
		private var bGameStarted:Boolean;
 
		public function Main ( ) : void
		{
			addTitleScreen();
 
			stage.addEventListener ( MouseEvent.MOUSE_DOWN, mouseDownHandler );
			stage.addEventListener ( MouseEvent.MOUSE_UP, mouseUpHandler );
		}
 
		private function addTitleScreen ( ) : void
		{
			TitleScreen = new StartScreen ();
			TitleScreen.x = stage.stageWidth/2 + 100;
			TitleScreen.y = stage.stageHeight/2;
			this.addChild(TitleScreen);
 
			bGameStarted = false;
		}
 
		private function startGame ( ) : void
		{
 
		}
 
		private function mouseDownHandler ( ME:MouseEvent ) : void
		{
			if ( bGameStarted == false )
			{
				bGameStarted = true;
				this.removeChild(TitleScreen);
			}
		}
 
		private function mouseUpHandler ( ME:MouseEvent ) : void
		{
 
		}
	}
}

Lines 1-8: Importing the classes I need, setting up the class.

Lines 9-10: Creating two variables. The first holds the TitleScreen. It is of type StartScreen which is a movieclip with linkage in the library. The second is a boolean to let us know if the game has started.

Lines 12-18: Running the function to add the TitleScreen and adding a MOUSE_DOWN and a MOUSE_UP event listener in the constructor.

Lines 20-28: Adding the TitleScreen to the stage and setting the bGameStarted variable to false.

Lines 35-42: The MOUSE_DOWN handler function. If bGameStarted is false, then start the game and remove the title screen.
Continue Reading »

No responses yet

Jul 14 2008

Flash Game Creation - Raiden Part 2

This post is a continuation of a previous post, Raiden Part 1.

WARNING! REFRESH THIS PAGE EVERY ONCE IN A WHILE! THE SWFS DO NOT HAVE CHECKS BECAUSE I WANTED YOU TO ACTUALLY SEE THE PROBLEMS STEP BY STEP AND BE ABLE TO FIX THEM. BECAUSE OF THIS, YOUR BROWSER WILL START EATING A LOT OF MEMORY AND POSSIBLY FREEZE YOUR COMPUTER!

Now it is time to add the background. For this game, it is just going to be a simple background of stars.

Adding a star:


Continue Reading »

No responses yet

Jul 10 2008

Tween inspired control mechanic

There are a lot of games that use the “click a point and the character moves there” type of control method. Probably one of my favorites was the Diablo’s.

To achieve this effect in Flash is really simple. The main thing to use is the Tween class. The Tween class lets you create dynamic Tweens through code.

Tween Movement 1.0:

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import fl.transitions.easing.*;
	import fl.transitions.Tween;
	import flash.events.MouseEvent;
 
	public class TweenMovement extends Sprite
	{
		private var Character:RedBall;
 
		public function TweenMovement ( ) : void
		{
			Character = new RedBall ();
			Character.x = 200;
			Character.y = 200;
			stage.addChild(Character);
 
			stage.addEventListener ( MouseEvent.CLICK, moveCharacter );
		}
 
		private function moveCharacter ( ME:MouseEvent ) : void
		{
			var twMoveX:Tween = new Tween ( Character, "x", Regular.easeOut, Character.x, ME.currentTarget.mouseX, 2, true );
			var twMoveY:Tween = new Tween ( Character, "y", Regular.easeOut, Character.y, ME.currentTarget.mouseY, 2, true );
		}
	}
}

Continue Reading »

No responses yet

Jul 08 2008

Flash Game Creation - Raiden

Do you remember the game Raiden? I remember pumping quarter after quarter into the Raiden machine at my local Papa Ginos. The shop no longer has that game within its doors, and was replaced by a trash barrel a few years back.

We can fix the problem though. We can just build the game ourselves!

For those of you unfamiliar with the game…here is a link to one of the many Flash tributes made to the original game. Check it out.

The very first thing you need is a ship. I don’t like having anything manually on my stage, so we are going to add the ship through code. In order to do this, you have to give the ship a class path.

You get this pop up by going into your library, right clicking whatever you want to be your ship, and then going to linkage.

Linkage Pop-Up

If you get a pop up saying the class doesn’t exist, just hit OK. Flash will automatically build one for you.

Now are ready to start coding.

Adding the ship:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.Stage;
 
	public class Main extends Sprite
	{
		private var GameShip:Ship;
 
		public function Main ( ) : void
		{
			GameShip = new Ship ( );
			stage.addChild(GameShip);
			GameShip.x = stage.stageWidth/2;
			GameShip.y = stage.stageHeight - 50;
		}
	}
}

Line 1: Starting the package

Lines 3-5: Importing the necessary classes for this code.

Line 7: Initiating my class. The Class has to be the same name as the Document Class. I am extending sprite so I can actually put stuff onto the stage. Also, I am extending sprite instead of extending movieclip because I am not actually going to put any code on the timeline and I am not going to be using any frame past frame one. Therefore, I am extending the lighter sprite.

Line 9: Making a private class variable of type Ship. The type should match whatever you made the class in the class path above.

Lines 11-17: Making a constructor for my class and adding the ship to the stage in the constructor so it is added automatically. I just set the X and Y values of my ship to be half the stage width and a little above the stage height. I use the stage.stageWidth and stage.stageHeight instead of static values because sometimes I might want to change the size of my Flash movie, and if I do that, I would have to go back into all my code and fix the static values.
Continue Reading »

No responses yet