Page 3 of 191234510...Last »

Tutorial: Make a Rhythm Game in AS3 – Part 4


Written By MrSun at 8:04 am - Saturday, January 24th, 2009
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

Step 4: Programming the Arrows: Part 2

Ok, now that we’ve gotten the arrows onto the stage, we can actually make them move up the stage and hitTest them with the receptors. We’re going to do all of this by making a base arrow class.

The first step to creating such a thing is to create a new Actionscript (.as) file. Immediately save it as “Arrow.as” and place the following code into it:

package{
	import flash.display.MovieClip;
	import flash.events.*;
	public class Arrow extends MovieClip{
		public function Arrow(){
 
		}
	}
}

This is the basic skeleton for any AS3 class. But, before we add any more code to it, we have to set it as the base class for all of the arrows. Right click on any of the arrow symbols in the library and click on “Properties…”. Under the “Class:” field, there should be another field called “Base Class:”. Right now, it’s set as flash.display.MovieClip. Set it now as “Arrow”. Do this for all four of the arrows. Now, we can add code to the class:

package{
	import flash.display.MovieClip;
	import flash.events.*;
	public class Arrow extends MovieClip{
		private var _root:Object;//we'll use this to refer to main timeline
		public var arrowCode:int;//the key that needs to be pressed
		public function Arrow(){
			 this.addEventListener(Event.ADDED, beginClass);
			 this.addEventListener(Event.ENTER_FRAME, eFrame);
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root); //typing _root is much easier than MovieClip(root)
 
			stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeys);
		}
		private function eFrame(e:Event):void{
			this.y -= _root.arrowSpeed;//move it up the stage
 
			//if game is over or it's off the stage, destroy it
			if(_root.gameOver || this.y < -60){
				destroyThis();
			}
		}
		private function checkKeys(e:KeyboardEvent):void{
			//checking if a certain key is down and it's touching the receptor
			if(e.keyCode == arrowCode && this.hitTestObject(_root.mcReceptor)){
				destroyThis();//remove it from stage
			}
		}
		private function destroyThis():void{
			this.removeEventListener(Event.ENTER_FRAME, eFrame);
			stage.removeEventListener(KeyboardEvent.KEY_DOWN, checkKeys);
			_root.removeChild(this);
		}
	}
}

Now, in order for this code to work, we have to add some stuff to the makeLvl function. Just change it to this:

function makeLvl(e:Event):void{
	//code here will create the level
	if(sTime < sTempo){
		//if the required time hasn't reached the limit
		//then update the time
		sTime ++;
	} else {
		//if the time has reached the limit
		//then reset the time
		sTime = 0;
		//if an actual arrow can be made
		if(lvlArrayAll[lvlCurrent][sArrow] != 0){
			var currentArrow:MovieClip; //this will hold the current arrow
			if(lvlArrayAll[lvlCurrent][sArrow] == 1){
				//place a left arrow onto the stage
				currentArrow = new arrowLeft();
				//set the _x value of the arrow so that it is in the
				//right place to touch the receptor
				currentArrow.x = 135;
				//set the arrow's y coordinate off of the stage
				//so that the user can't see it when it appears
				currentArrow.y = 500;
				//setting the key that needs to be pressed
				currentArrow.arrowCode = 37;
				addChild(currentArrow);//add it to stage
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
				//place an up arrow onto the stage
				currentArrow = new arrowUp();
				currentArrow.x = 205;
				currentArrow.y = 500;
				currentArrow.arrowCode = 38;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				currentArrow = new arrowDown();
				currentArrow.x = 275;
				currentArrow.y = 500;
				currentArrow.arrowCode = 40;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				currentArrow = new arrowRight();
				currentArrow.x = 345;
				currentArrow.y = 500;
				currentArrow.arrowCode = 39;
				addChild(currentArrow);
			}
		}
		//get the next arrow if it the song isn't finished
		if(sArrow < lvlArrayAll[lvlCurrent].length){
			sArrow ++;
		} else {
			//if the song is finished, then reset the game
			//of course, we don't have the code for that yet
			//so we're just going to go back to the first frame
			gotoAndPlay(1);
			gameIsOver = true;
		}
	}
}

Now, if you test the game now, there’s going to be a problem. The game will reset before all of the arrows even reach the receptor. There are two ways that I can think of to fix this. The first option is to count all of the arrow instances on stage and when it’s 0, then end the game. The second, which I prefer, is to just add a certain amount of “0″‘s to the end of the array each time the game begins. The second option is what I’m going to do. In the beginCode() function, add the following code.

//make the level array longer
lvlArrayAll[lvlCurrent].push(0,0,0,0,0);

Now, the game should be working out pretty well. I’m pretty proud of our progress this lesson, so I’m going to end it now. We’ve finished the basic gameplay of the game. Next lesson, we will make a menu system where the player can choose which games to play. It’ll be great.

Final Product

Source Files (zipped)

Read More...

Tutorial: Make a Rhythm Game in AS3 – Part 3


Written By MrSun at 8:03 am - Saturday, January 24th, 2009
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

The Brainstorming Create the Required Symbols/Art Programming the Arrows Programming the Arrows Part 2 Make a Level Scoring Finishing Touches Programming the Arrows Well, we finally can program some stuff. In this part, we will create the arrows dynamically and make them move up screen. Let us begin. We are going to make an array [...]

Read More...

Tutorial: Make a Rhythm Game in AS3 – Part 2


Written By MrSun at 8:02 am - Saturday, January 24th, 2009
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

The Brainstorming Create the Required Symbols/Art Programming the Arrows Programming the Arrows Part 2 Make a Level Scoring Finishing Touches Step 2: Create the Require Symbols/Art Well, we aren’t going into the programming yet until the next step, so you have got to be patient. Anyway, in this step, we’re going to draw the symbols [...]

Read More...

Tutorial: Make a Rhythm Game in AS3


Written By MrSun at 8:01 am - Saturday, January 24th, 2009
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

The Brainstorming Create the Required Symbols/Art Programming the Arrows Programming the Arrows Part 2 Make a Level Scoring Finishing Touches Ok, this may not seem to be the most exciting step, but it is pretty important. Because this game is going to take a while to make, brainstorming is key. So, we have to figure [...]

Read More...

The Benefits of Being an Expert Flash Game Developer


Written By MrSun at 9:40 pm - Wednesday, January 21st, 2009
Categories: Flash, Game Development

It is always a challenge to become an expert at anything, including a flash game developer. It takes a lot of time and a lot of patience. But, after enduring through time, the benefits can be enormous. I am here to share some of them with you.

Are you an expert?

Read More...

Tutorial: Make a Vertical Shooter in AS2 – Part 6


Written By MrSun at 8:06 am - Saturday, January 17th, 2009
Categories: All Tutorials, AS2, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 6: Finishing Touches As always, the finishing touches of this game won’t be explained too much by me, in hopes that you actually can do some of this stuff by yourself. Of course, [...]

Read More...

Tutorial: Make a Vertical Shooter in AS2 – Part 5


Written By MrSun at 8:05 am - Saturday, January 17th, 2009
Categories: All Tutorials, AS2, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 5: Scoring Now that we’ve got the hardest part down, it all gets easier from here. This chapter will be simple, just some code that has scoring. Also, as promised, we’re going to [...]

Read More...

Tutorial: Make a Vertical Shooter in AS2 – Part 4


Written By MrSun at 8:04 am - Saturday, January 17th, 2009
Categories: All Tutorials, AS2, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 4: Programming the Enemies Now we have to make it so the enemies can be shot. This probably will be the most complicated of the steps. But, it also is what makes this [...]

Read More...

Tutorial: Make a Vertical Shooter in AS2 – Part 3


Written By MrSun at 8:03 am - Saturday, January 17th, 2009
Categories: All Tutorials, AS2, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 3: Creating the Enemies Well, now that we can make our lil’ guy shoot, we have to make something for him to shoot at! I’m going to first start by just drawing a [...]

Read More...

Tutorial: Make a Vertical Shooter in AS2 – Part 2


Written By MrSun at 8:02 am - Saturday, January 17th, 2009
Categories: All Tutorials, AS2, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 2: Programming the Character Part 2 – Making it Shoot Well, now that we’ve got the character moving, we have to make him able to shoot. The first step in doing this is [...]

Read More...
Page 3 of 191234510...Last »