Mr Sun Studios » Intermediate Tutorials

Tutorial: Make a Rhythm Game in AS3 – Part 7

MrSun — Sat, 24 Jan 2009 12:07:04 +0000

Step 7: Finishing Touches

Well, now for the last step, adding the finishing touches. Just like in my previous tutorial, I won’t really go into much description in this section, in hopes that you can figure out how to do these without my help. As always, the source file is always available at the bottom.

We haven’t displayed the score to the user yet, so we’ll do that first. It’ll be mad easy. Just create a dynamic text field (make sure to embed the font) and set the “Instance Name” field to txtScore. Of course, when you do this, and error pops up because of the for loop that we have. To fix this, just create an entire MovieClip called mcText and place all of the dynamic textfields in there. I’ll leave the rest of the coding to you for this.

We also have to show the scoreString. We can also do this with a dynamic text field. This time, however, the “Instance Name” field should be set to txtScoreString. Also, we’ve got to set the scoreString to “Bad” whenever the user misses the arrow or hits it at the wrong time. Hopefully you can figure out yourself how to do that yourself.

Now, to show the combo to the player. We first have to define a combo variable at the top and set it to 0. Then, we have to increment it every time the user hits the right key, and reset it every time the user doesn’t. Then, we can just place a dynamic text field that shows the combo where ever we want.

Next, we’re going to have a win screen and a lose screen. Just make two frames, one labeled “win” and the other labeled “lose”. Have the user navigate to “win” when the game is over, and to “lose” when the user loses. It’s pretty straightforward. If you want to, you can display the stats. Then, make a button that will navigate back to the menu.

Finally, there is one last thing to do. If you haven’t noticed, whenever we start a game, the arrows don’t work unless you click on the background first. Simply add this code to the top of the “game” frame to fix it:

stage.focus = stage;

Well, now we’re basically done. Of course, this is just the beginning of making a game like this. You must figure out everything else on your own if you want to become a real programmer.

Final Product

Source Files (zipped)

Tutorial: Make a Rhythm Game in AS3 – Part 6

MrSun — Sat, 24 Jan 2009 12:06:53 +0000

Step 6: Scoring

The next step in making our rhythm game is scoring. The user will get points depending on how far away the arrow is from the receptor when it hits it. We’re also going to make the health bar gain and lose parts when the user hits or misses the receptor. First of all, we need to define a score variable at the top of the game frame. We also have to define a String variable that will show how well the user hits the arrow.

//the score variable
var score:int = 0;
//either perfect, great, nice, or good
var scoreString:String = '';

That was pretty easy. Next, we want to increase the score whenever the user hits the right key when it hits the score. We’re going to make it increase by 10 for a perfect hit, 8 for a great hit, 6 for an nice hit, and 4 for a good hit. Add this code to the “Arrow.as” class in the checkKeys() function:

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)){				
		//checking if the correct key is down
		//if the user hits it about perfectly
		//the receptors y coordinate is about 10 px away from the
		//symbol's y coordinate.
		if(this.y <= _root.mcReceptor.y + 15 && this.y >= _root.mcReceptor.y + 5){
			_root.score += 10;
			_root.scoreString = 'Perfect';
		} else if (this.y <= _root.mcReceptor.y + 25 && this.y >= _root.mcReceptor.y-5){
			_root.score += 8;
			_root.scoreString = 'Great';
		} else if (this.y <= _root.mcReceptor.y + 40 && this.y >= _root.mcReceptor.y -30){
			_root.score += 6;
			_root.scoreString = 'Nice';
		} else {
			_root.score += 4;
			_root.scoreString = 'Good';
		}
 
		destroyThis();//remove it from stage
	}
}

The next thing we have to do now is program the health bar. If the user misses or hits the arrow key at the wrong time, then we have to lose health. If the user hits it right though, the health will increase. First of all, give the health bar an instance name, mcHealth. Then, we’re going to make a function for this, so we don’t have to write all the if statements repeatedly. Define this function at the bottom of your code:

//this function will change the health depending on how much health change
//it needs, positive or negative
function changeHealth(healthDiff:Number):void{
	healthDiff /= 100;//the scaleX only changes in percentages
	//checking if the health is already at it's full
	//or will be full after this hit
	if(mcHealth.scaleX + healthDiff >= 1){
		mcHealth.scaleX = 1;
	} else if(mcHealth.scaleX + healthDiff <= 0){
		//checking if the health will be equal or below 0
		//lose function will go here
 
	} else {
		//if there are no problems
		mcHealth.scaleX += healthDiff;
	}
}

The next thing we’re going to do is run this function positively when the user hits the key correctly. In the arrow’s code where it hit tests with the receptor, put this code for perfect:

changeHealth(5);

This will increase the health by 5. You can do the rest yourself, just keep on decrementing the health change by 1, and you’ll be good.

Next comes the hard part, making the user lose health. Again, we have to define a few variables at the top. They will be Booleans saying whether or not the receptor is touching a certain key.

//Booleans checking if the arrows are touching the receptor
var touchLeft:Boolean = false;
var touchUp:Boolean = false;
var touchDown:Boolean = false;
var touchRight:Boolean = false;

Now, add this code to the makeLvl() function:

//checking if mcReceptor is touching any arrows
	//first we reset the variables we got last time just in case they aren't true anymore
	touchLeft = false;
	touchUp = false;
	touchDown = false;
	touchRight = false;
	//this for loop will be used for the hit testing
	for(var i:int = 0;i<numChildren;i++){
		var target:Object = getChildAt(i);
		if(target.arrowCode != null && target.hitTestObject(mcReceptor)){//if the object is an arrow and is touching the receptor
			if(target.arrowCode == 37){//if left arrow
				touchLeft = true;
			} else if(target.arrowCode == 38){//if up arrow
				touchUp = true;
			} else if(target.arrowCode == 40){//if down arrow
				touchDown = true;
			} else if(target.arrowCode == 39){//if right arrow
				touchRight = true;
			}
		}
 
 
	}

Now that we have the variables checking which arrow is touching the receptor, now we need some key checkers. Add this to the bottom of your code in the “game” frame:

stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeys);
function checkKeys(e:KeyboardEvent):void{
	//if the left key is down and no left arrows are touching the receptor
	if(e.keyCode == 37 && !touchLeft){ 
		changeHealth(-10); //make the health go down
	} else if(e.keyCode == 38 && !touchUp){//and so on
		changeHealth(-10);
	} else if(e.keyCode == 40 && !touchDown){
		changeHealth(-10);
	} else if(e.keyCode == 39 && !touchRight){
		changeHealth(-10);
	}
}

Phew, that took a while. Now, for the final part of losing health, when the person misses the arrow altogether. Place this code at the end of the arrow’s eFrame function.

//if game is over or it's off the stage, destroy it
if(_root.gameOver || this.y < -60){
	//if off the stage
	if(this.y < -60){
		_root.changeHealth(-10);
	}
	destroyThis();
}

Well, that’s all for scoring. This probably has been the longest lesson in the series. If you survived through this without having any trouble, then you can do the next part without my help, the finishing touches.

Final Product

Source Files (zipped)

Tutorial: Make a Rhythm Game in AS3 – Part 5

MrSun — Sat, 24 Jan 2009 12:05:31 +0000

Step 5: Make a Level (or five)

Now that we’ve programmed the basic gameplay for our game, we can make a menu system with levels. It’s going to be very simple, only one page because we aren’t going to make many levels. If you want to paginate it yourself, go ahead. But, this isn’t the focus of this tutorial, so that will be up to you to figure out.

Let’s first create the 5 levels that we’re going to need. Place this code in your first frame.

//The array for the first level of the game
var lvlArray0:Array = new Array(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);
var lvlArray1:Array = new Array(1,3,2,4,1,3,2,4,1,3,2,4,1,3,2,4);
var lvlArray2:Array = new Array(4,3,2,1,4,3,2,1,4,3,2,1,4,3,2,1);
var lvlArray3:Array = new Array(4,2,3,1,4,2,3,1,4,2,3,1,4,2,3,1);
var lvlArray4:Array = new Array(2,1,4,3,2,1,4,3,2,1,4,3,2,1,4,3);
//The names of all of the levels
var lvlNames:Array = new Array('level1','level2','level3','level4','level5');
//The array holding all of the lvl arrays
var lvlArrayAll:Array = new Array(lvlArray0,lvlArray1,lvlArray2,lvlArray3,lvlArray4);

The levels aren’t too complicated, just patterns of the four arrows repeated a few times. Now, we have to make the menu system. First of all, we have to create another layer where we will place all of the labels. Now, we can separate the frames a bit so we can actually see the labels when we make them. I’m going to label the first one “begin” and the game frame “game”.

Next, create a “menu” frame in between the first frame and the game frame. So far, the frames should look like this:

Ok, now for the menu. First, we’re going to have to put a stop(); in the “menu” actions so we can actually use it. Then, on the top of the stage, we’re going to type in the following words: “Select a Level:”. Then, we have to create a MovieClip which is the level select button. Just draw a rectangle (mine’s 250x50px) and convert it to a MovieClip. We’re using a MovieClip so we can add actions to it. We’re going to name it btnSongSelect. We also have to export it for ActionScript. You can do this in the “Convert to Symbol” window by click on “Advanced”. Check off “Export for ActionScript” and leave everything else as it is.

Next, inside the symbol, add a dynamic text field that’s about the same height and width of the rectangle itself. In the area that says “”, type in txtName. This is what your symbol should look like so far:

Now, make a new layer above “Layer 1″ and add the following code onto the first frame:

//lvlID will be passed into this MovieClip
//when we dynamically place it onto the stage
//It is the index number of the level and name arrays
var lvlID:int;
//lvlName is the variable that holds the name of the
//level that this button navigates to
var lvlName:String = MovieClip(root).lvlNames[lvlID];
//makes it so this movieclip doesn't keep on playing
var destroy:Boolean = false;//whether or not to destroy this
stop();
 
//setting the text
txtName.text = 'Level '+lvlID;
 
this.addEventListener(MouseEvent.CLICK,clickThis);
 
function clickThis(e:MouseEvent):void{
	//if the user clicks on this button
	//make the current level the one that this represents
	MovieClip(root).lvlCurrent = lvlID;
	//go to the game frame
	MovieClip(root).gotoAndStop('game');
	//and remove the buttons from the stage
	//(we'll define this function in a bit)
	MovieClip(root).removeButtons();
}
 
this.addEventListener(Event.ENTER_FRAME, eFrame);
 
function eFrame(e:Event):void{
	if(destroy){//if destroy is set to true
		this.parent.removeChild(this);//then remove this
		//and remove all listeners as well
		removeEventListener(MouseEvent.CLICK,clickThis);
		removeEventListener(Event.ENTER_FRAME, eFrame);
	}
}

As always, I’ve commented this code pretty extensively. Now, we have to add actions to the main timeline that will actually place the buttons onto the stage and make a function to remove them when one is clicked:

//stop the frame
stop();
 
//this loop will create the buttons
for(var i:int=0;i<lvlArrayAll.length;i++){
	//set a movieclip variable to be the button
	var newButton:MovieClip = new btnSongSelect();
	addChild(newButton);
	//the _x value will be 130, centered
	newButton.x = 130;
	//the y value will be at a minimum of 70 and then continue
	//to be added by 60 every subsequent button
	newButton.y = 70+60*i;
	//define the id of this button, or which level it
	//represents
	newButton.lvlID = i;
}
 
//this function will remove all of the buttons from the stage
function removeButtons():void{
	//we're going to use the same loop
	for(var i:int=0;i<numChildren;i++){
		var remove = getChildAt(i);
		//set the target's destroy variable to true
		remove.destroy = true;
	}
}

Now, when you run this code, it should work fine, until the game finishes and we are returned back to the menu. We have to make some changes to the code. Do you remember this at around line 80?

//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;
}

Well, we can change a few bits of it to make this:

//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
	gotoAndStop('menu');
	gameIsOver = true;
	//then remove this enter_frame listener
	removeEventListener(Event.ENTER_FRAME, makeLvl);
}

Well, that’s all we’re going to do for this lesson. Next time, we’ll add some scoring methods and then change that part of the code even more (but just the gotoAndStop() part.

Final Product

Source Files (zipped)

Tutorial: Make a Rhythm Game in AS3 – Part 4

MrSun — Sat, 24 Jan 2009 12:04:59 +0000

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)

Tutorial: Make a Rhythm Game in AS3 – Part 3

MrSun — Sat, 24 Jan 2009 12:03:06 +0000

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 for our levels, just as we did in the Brick Breaker Tutorial. So, we’re going to create a frame in the beginning of the timeline and we’re going to add the following code to it:

//The current level the player is on
var lvlCurrent:Number = 0;
//The array for the first level of the game
var lvlArray0:Array = new Array(1,2,3,4);
//The array holding all of the lvl arrays
var lvlArrayAll:Array = new Array(lvlArray0);

The second frame will be where the game will take place. For now, just put a stop(); there, so the game doesn’t continuously loop. So now, we’re going to create two functions, one called beginCode() and another called makeLvl(). beginCode() will only be run once every level, while makeLvl will run the entire level. Here’s the code:

function beginCode():void{
	addEventListener(Event.ENTER_FRAME, makeLvl);
}
 
function makeLvl(e:Event):void{
 
}
 
beginCode();

Right now, this code won’t do anything. Now we have to make some variables that will aid in our level creation. Place this code at the top:

//VARIABLES
//sTime is the current frame that is being played
//Once it reaches sTempo, then it will be reset
//and a note will be created
var sTime:int = 0;
//sTempo is how many frames it takes before
//a note is created. Because it's 12, and
//the frame rate is 24, it will take a half of a second
//for a note to be made
var sTempo:Number = 12;
//sNote is the current arrow of the level that is created
//0 makes no arrow
//1 makes a left arrow
//2 makes an up arrow
//3 makes a down arrow
//4 makes a right arrow
var sArrow:int = 0;
//arrowSpeed is how fast the arrow moves up the screen
var arrowSpeed:Number = 10;
//gameIsOver is whether the game's over
var gameIsOver:Boolean = false;

I really commented out this one so you’d understand what the variables do. If you still don’t, then maybe the code within the makeLvl() function might help explain:

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;
				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;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				currentArrow = new arrowDown();
				currentArrow.x = 275;
				currentArrow.y = 500;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				currentArrow = new arrowRight();
				currentArrow.x = 345;
				currentArrow.y = 500;
				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;
		}
	}
}

Again, I did a lot of commenting to help you out. Right now, if you test the movie, nothing will really happen except that the game will black out for a millisecond. But, if you change the code that I gave you a bit, I’m sure you make it so you see the results. (Hint, change the y value). Well, that’s all that I’m going to teach this lesson. Next lesson, we’ll continue coding the arrows, making the move and hit testing them with the receptors.

Final Product

Source .fla File

Tutorial: Make a Rhythm Game in AS3 – Part 2

MrSun — Sat, 24 Jan 2009 12:02:00 +0000

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 and art that are needed for the game creation. Let’s get the list that we made the last step:

List of MovieClips

Left Arrow
Up Arrow
Right Arrow
Down Arrow
Receptors
Health Bar
Combo Counter
Score
Accuracy Meter

Let’s start with making the arrows. They seem to be the easiest. First we’re going to make the background black, just because I like black backgrounds. We’re going to make most of the art white, just to keep it simple. Here are the arrows that I drew. They are 60×60 pixels.

When you turn your shapes into arrows, make sure that you check “Export for ActionScript” and to name them arrowSide (ex: arrowLeft or arrowRight).

Now we’re going to create the receptor. You have to be careful in spacing each of the arrows a certain amount of pixels apart. Mine are 10 pixels apart.

If you want to make yours more decorative, nobody’s stopping you.

Now, we have to make all of the statistical symbols. Actually, we don’t really need a symbol for the combo counter, health bar, or the accuracy meter. They can all be dynamic text fields. But, we definitely will need to make the health bar a symbol.

Our health bar symbol will be very simple, just one layer of a green rectangle. It’s going to be 550×15 pixels.

You don’t need to add any layers of frames to this, we will change its width later with ActionScript.

Well, those are all of the symbols that we need. Now, the next simple step is to get a basic placement of them on stage.

Final Product

Source .fla File

Now that we’re finally done with the brainstorming and art creating, we can finally continue on to program the game. That is what we’re going to do in the next part.

Tutorial: Make a Rhythm Game in AS3

MrSun — Sat, 24 Jan 2009 12:01:16 +0000

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 out what movieclips we are going to have to make. What are the key symbols that we need for gameplay? If anything, it’s going to be the arrows.

So far on the MovieClip list:

Left Arrow
Up Arrow
Right Arrow
Down Arrow

Of course, the arrows are going to have to have a receptor that it hits when you have to press the certain key.

So far on the MovieClip List:

Left Arrow
Up Arrow
Right Arrow
Down Arrow
Receptors

There are four final MovieClips that we are going to have to create, and all of them have to do with scoring. One of them is the health bar, the second is the combo counter, the third is the players score, and the fourth is the word that tells the user how accurately they hit the key (Perfect, Awesome, Good, OK, Bad).

The Final MovieClip List:

Left Arrow
Up Arrow
Right Arrow
Down Arrow
Receptors
Health Bar
Combo Counter
Score
Accuracy Meter

Well, that’s all we’re going to do for brainstorming.

Tutorial: Make a Vertical Shooter in AS2 – Part 6

MrSun — Sat, 17 Jan 2009 12:06:47 +0000

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, there will always be source files at the bottom if you need to clear anything up.

The first thing I want to do is show the score on the “lose” screen. That’ll be pretty easy, just add a dynamic text field there.

Next, we can make some particles move down the screen so it looks like the player is actually moving forward. We’re going to make them the same speed as the enemies. I’m actually show some code for this one, because it’s also a pretty new thing for me. We’re not going to make a MovieClip for this, we’re going to make dynamic shapes through ActionScript. First, we have to add a totalBgShapes variable to the top of the code. Next, create an empty MovieClip called bgHolder Then, here’s the code to place at the bottom of the onEnterFrame function:

//creating background particles
bgHolder.createEmptyMovieClip("bg"+totalBgShapes, bgHolder.getNextHighestDepth());
bgHolder["bg"+totalBgShapes].beginFill(0x333333); //this just determines the shape's color
bgHolder["bg"+totalBgShapes]._x = int(Math.random()*550);
gHolder["bg"+totalBgShapes]._y = -50 - bgHolder._y;
//creating 4 random points to make a random shape
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].endFill();//finishes up the shape
 
bgHolder["bg"+totalBgShapes].onEnterFrame = function(){//giving it some actions
	if(this._y > 450 - bgHolder._y || _root.gameOver){//if it goes off the stage or game is over
		//then destroy it
		this.removeMovieClip();
	}
}
 
totalBgShapes ++;
bgHolder._y += 2;

Pretty intense, eh? Well, this is a finishing touch, and most finishing touches are pretty intense. Now, we have to make it so mcMain is on top of everything with this code at the end:

mcMain.swapDepths(1000);

Also, remove mcMain when gameOver is true or else strange things will happen.

There is one final thing that I want to do before actually wrapping up this tutorial. For some reason, there is a bug where a bullet disappears for some strange reason. I think I know exactly how to fix it. When we added the bullet to the stage, we made its depth the _root.getNextHighestDepth. I’m sorry, it should actually be bulletHolder.getNextHighestDepth.

Well, that’s actually all that I really have to finish off the game. I hope you had fun making it!

The Final Product:

Source .fla File

Tutorial: Make a Vertical Shooter in AS2 – Part 5

MrSun — Sat, 17 Jan 2009 12:05:02 +0000

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 have a function run when the player is hit by an enemy. Let’s start with this one first, eh?

In order to do this, we have to make a frame called “lose”. This will be the frame that we’ll navigate to when we get hit. It’ll be simple, just some text that says “You Lose” and a listener for keystrokes that will return us to play another game. First, make the frame called “lose”. I recommend making an entire new layer for labels, but this isn’t required. In that frame, draw or type in whatever you want to signify that the player has lost the game. I’m just going to put the text, “YOU LOSE” and, in smaller text, “Press Space to Restart”.

Then, in the actions, type in the following code:

stop();//stops the game so nothing goes wrong
 
_root.onEnterFrame = function(){ //create a function to check for keystrokes
	if(Key.isDown(32)){//if the space key is down...
		gotoAndStop(1); //then go back to the first frame, restarting the game
	}
}

Now, I’ve noticed a bit of a problem in the main code. For some reason, the game thinks that you get hit whenever you shoot an enemy. I’ve found a way around this strange behavior, however. First of all, add this variable to the top of the code:

//showing the amount of enemies that have been added to the stage
var enemyTotal:Number = 0;

Next, find the code where we have to create the enemy and add it to the stage. Change it to this:

_root.attachMovie('mcEnemy', 'en'+enemyTotal,_root.getNextHighestDepth());//then add the enemy
//setting it's coordinates
_root['en'+enemyTotal]._x = int(Math.random()*Stage.width);//randomly within the boundaries
_root['en'+enemyTotal]._y = -50; //sets this offstage at first
_root['en'+enemyTotal].onEnterFrame = function(){//then give it some functions
	this._y += 5;
 
	//run a loop checking if it's touching any bullets
	for(var cBullet:String in _root.bulletHolder){
		//if it's touching the bullet
		//we have to use coordinates because hit testing doesn't seem to work
		if(this._y >= _root.bulletHolder[cBullet]._y-30 && this._y <= _root.bulletHolder[cBullet]._y){
			if(this._x <= _root.bulletHolder[cBullet]._x+5 && this._x >= _root.bulletHolder[cBullet]._x -35){
				//then destroy this guy
				this.removeMovieClip();
				//and destroy the bullet
				_root.bulletHolder[cBullet].removeMovieClip();
			}
		}
	}
 
	//hit testing with the user
	if(this.hitTest(_root.mcMain)){
		//we'll add code here in the next part
		//but for now, we'll just trace something
		trace('You just got hit!');
	}
}
enemyTime = 0;//reset the time
enemyTotal ++; //add 1 more to the amount of enemies total

I’m sorry about this delay, but we need this to continue on with our game.

Now, we have to create a new variable at the top that will say whether or not the game has been ended:

stop();//add a stop function too!
 
var gameOver:Boolean = false;

Then, add this code to both the mcBullet‘s and mcEnemy‘s onEnterFrame functions:

//checking if the game is over
if(gameOver){
	//destroy this guy if the game is over
	this.removeMovieClip();
}

Now, we can make this Boolean false when the user gets touched by the enemy. Find where we hit test for mcMain and replace that trace statement with:

//hit testing with the user
if(this.hitTest(_root.mcMain)){
	//set the game to be over and go to lose screen
	gameOver = true;
	gotoAndStop('lose');
}

Phew, that was a lot of work, wasn’t it? Now we can move onto actually scoring the game. First, we have to define a score variable at the top:

//the player's score
var score:Number = 0;

Then, increment the score every time an enemy is killed. Place this code in the Enemy’s hit testing for the bullet.

//up the score
_root.score += 5;

Now, we can show the score to the user with a dynamic text field. Make one at the bottom of the stage and give it an instance name of txtScore. Next, place this code into the onEnterFrame function.

//updating the score text field
txtScore.text = 'Score:  '+score;

Pretty easy, right? Well, that’s all we’re going to do for scoring. Next, we’ll add some sweet finishing touches, eh?

The Final Product:

Source .fla File

Tutorial: Make a Vertical Shooter in AS2 – Part 4

MrSun — Sat, 17 Jan 2009 12:04:34 +0000

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 thing a game. There are two ways that I know of to accomplish this task. The first one is to have the bullet listen for hit testing the enemy, or the enemy listen for the bullet. It’s basically the same thing. However, I’m going to have the enemy listen for the bullet, just because I feel like it.

The first thing we need to do in order to accomplish this feat is to create a container for all of the bullets. This way, we can access all of the bullets through the container. I can’t really explain this too well, so I’ll just demonstrate it for you. At the top of the code, add the following:

//this movieclip will hold all of the bullets
_root.createEmptyMovieClip('bulletHolder', _root.getNextHighestDepth());

The bulletHolder is invisible and is just a container for all of the bullets. In order for this to be any use to us, we need to actually add the bullets to this container. This will be easy. Find where we add the bullet to the stage:

_root.attachMovie('mcBullet', 'Bullet'+bulletID,_root.getNextHighestDepth());
//setting the coordinates of the bullet to be the same as the main character
_root['Bullet'+bulletID]._x = mcMain._x + mcMain._width/2 - _root['Bullet'+bulletID]._width/2;
_root['Bullet'+bulletID]._y = mcMain._y;
	_root['Bullet'+bulletID].onEnterFrame = function(){
	//giving the bullet some actions
	this._y -= 10; //moving the bullet
	if(this._y < -1 * this._height){//if the bullet goes off stage
		//then destroy it
		this.removeMovieClip();
	}
}

Change it to this:

bulletHolder.attachMovie('mcBullet', 'Bullet'+bulletID,_root.getNextHighestDepth());
//setting the coordinates of the bullet to be the same as the main character
bulletHolder['Bullet'+bulletID]._x = mcMain._x + mcMain._width/2 - bulletHolder['Bullet'+bulletID]._width/2;
bulletHolder['Bullet'+bulletID]._y = mcMain._y;
bulletHolder['Bullet'+bulletID].onEnterFrame = function(){
	//giving the bullet some actions
	this._y -= 10; //moving the bullet
	if(this._y < -1 * this._height){//if the bullet goes off stage
		//then destroy it
		this.removeMovieClip();
	}
}

Now we enter complicated territory. Find the onEnterFrame function we added to the Enemy. Add the following to it:

//run a loop checking if it's touching any bullets
for(var cBullet:String in _root.bulletHolder){
	//if it's touching the bullet
	//we have to use coordinates because hit testing doesn't seem to work
	if(this._y >= _root.bulletHolder[cBullet]._y-30 && this._y <= _root.bulletHolder[cBullet]._y){
		if(this._x <= _root.bulletHolder[cBullet]._x+5 && this._x >= _root.bulletHolder[cBullet]._x -35){
			//then destroy this guy
			_root['en'+enID].removeMovieClip();
			//and destroy the bullet
			_root.bulletHolder[cBullet].removeMovieClip();
		}
	}
}

Now, try out your game. It should work pretty well now. The only problem with it, however, is that it doesn’t do anything when it touches the player. We aren’t going to really do anything with this right now, but we will set it up so we can make a function for it in the next part of the tutorial, “Scoring”. Just place the following code in the Enemy‘s onEnterFrame() function:

			//hit testing with the user
			if(this._y >= _root.mcMain._y-30 && this._y <= _root.mcMain._y){
				if(this._x <= _root.mcMain._x+30 && this._x >= _root.mcMain._x -30){
					//we'll add code here in the next part
					//but for now, we'll just trace something
					trace('You got hit!');
				}
			}

Well, that’s all for today. Join us next time when we score the game!

The Final Product:

Source .fla File

Mr Sun Studios » Intermediate Tutorials

Tutorial: Make a Rhythm Game in AS3 – Part 7

Step 7: Finishing Touches

Final Product

Tutorial: Make a Rhythm Game in AS3 – Part 6

Step 6: Scoring

Final Product

Tutorial: Make a Rhythm Game in AS3 – Part 5

Step 5: Make a Level (or five)

Final Product

Tutorial: Make a Rhythm Game in AS3 – Part 4

Step 4: Programming the Arrows: Part 2

Final Product

Tutorial: Make a Rhythm Game in AS3 – Part 3

Programming the Arrows

Final Product

Tutorial: Make a Rhythm Game in AS3 – Part 2

Step 2: Create the Require Symbols/Art

List of MovieClips

Final Product

Tutorial: Make a Rhythm Game in AS3

So far on the MovieClip list:

So far on the MovieClip List:

The Final MovieClip List:

Tutorial: Make a Vertical Shooter in AS2 – Part 6

Table of Contents

Step 6: Finishing Touches

The Final Product:

Tutorial: Make a Vertical Shooter in AS2 – Part 5

Table of Contents

Step 5: Scoring

The Final Product:

Tutorial: Make a Vertical Shooter in AS2 – Part 4

Table of Contents

Step 4: Programming the Enemies

The Final Product: