Tutorial: Make a Rhythm Game in AS2 – Part 4


Written By MrSun at 7:34 am - Monday, August 04th, 2008
Categories: Flash

Table of Contents

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 without putting even a line of code in the arrow MovieClips. Let’s take a look back at the code which placed the arrows onto the stage.

function makeLvl():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;
		//and create an corresponding arrow with the
		//number within the level array
		
		//if an actual arrow can be made
		if(lvlArrayAll[lvlCurrent][sArrow] != 0){
			if(lvlArrayAll[lvlCurrent][sArrow] == 1){
				//place a left arrow onto the stage
				attachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());
				//set the _x value of the arrow so that it is in the
				//right place to touch the receptor
				_root['arrow'+sArrow]._x = 135;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
				//place an up arrow onto the stage
				attachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 205;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				attachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 275;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				attachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 345;
			}
			//set the arrow's y coordinate off of the stage
			//so that the user can't see it when it appears
			_root['arrow'+sArrow]._y = 500;
		}
		//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;
			//and then delete all of the arrows
			for(var i:Number = 0;i

What we're going to do is add enterFrame function to the arrow. If you have no idea how to do this, then I'm happy to tell you that it is actually very simple. Insert this code into the makeLvl() function after we defined the _y value of the MovieClip.

//adding enterFrame events to the arrow
_root['arrow'+sArrow].onEnterFrame = function(){
	//making the arrow move up
	this._y -= arrowSpeed;
}

Next, we have to give the receptors an instance name. We're going to name it mcReceptor. That's easy to remember, right? Also, we forgot to place some code when creating the arrow. We have to set the arrow's id, which is the actually arrow key that needs to be pressed. Change the following code to the makeLvl function.

if(lvlArrayAll[lvlCurrent][sArrow] == 1){
	//place a left arrow onto the stage
	attachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());
	//set the _x value of the arrow so that it is in the
	//right place to touch the receptor
	_root['arrow'+sArrow]._x = 135;
	//setting the arrowCode of the arrow
	_root['arrow'+sArrow].arrowCode = Key.LEFT;
} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
	//place an up arrow onto the stage
	attachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());
	_root['arrow'+sArrow]._x = 205;
	_root['arrow'+sArrow].arrowCode = Key.UP;
} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
	//place a down arrow onto the stage
	attachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());
	_root['arrow'+sArrow]._x = 275;
	_root['arrow'+sArrow].arrowCode = Key.DOWN;
} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
	//place a right arrow onto the stage
	attachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());
	_root['arrow'+sArrow]._x = 345;
	_root['arrow'+sArrow].arrowCode = Key.RIGHT;
}

Anyway, after doing this, we're going to place the following code into the arrow's onEnterFrame function.

//hitTesting with the receptor
if(this.hitTest(_root.mcReceptor)){
	if(Key.isDown(this.arrowCode)){
		//checking if the correct key is down
		this.removeMovieClip();
	}
}

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 Code for the Game Frame

stop();
//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:Number = 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:Number = 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;

function beginCode():Void{
	//Code here will only be run once at the beginning
	//of the game
	
	//every frame, run makeLvl()
	onEnterFrame = function(){
		makeLvl();
	}
	
	//make the level array longer
	lvlArrayAll[lvlCurrent].push(0,0,0,0,0);
}
function makeLvl():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;
		//and create an corresponding arrow with the
		//number within the level array
		
		//if an actual arrow can be made
		if(lvlArrayAll[lvlCurrent][sArrow] != 0){
			if(lvlArrayAll[lvlCurrent][sArrow] == 1){
				//place a left arrow onto the stage
				attachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());
				//set the _x value of the arrow so that it is in the
				//right place to touch the receptor
				_root['arrow'+sArrow]._x = 135;
				//setting the arrowCode of the arrow
				_root['arrow'+sArrow].arrowCode = Key.LEFT;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
				//place an up arrow onto the stage
				attachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 205;
				_root['arrow'+sArrow].arrowCode = Key.UP;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				attachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 275;
				_root['arrow'+sArrow].arrowCode = Key.DOWN;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				attachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 345;
				_root['arrow'+sArrow].arrowCode = Key.RIGHT;
			}
			//set the arrow's y coordinate off of the stage
			//so that the user can't see it when it appears
			_root['arrow'+sArrow]._y = 500;
			//adding enterFrame events to the arrow
			_root['arrow'+sArrow].onEnterFrame = function(){
				//making the arrow move up
				this._y -= arrowSpeed;
				//hitTesting with the receptor
				if(this.hitTest(_root.mcReceptor)){
					if(Key.isDown(this.arrowCode)){
						//checking if the correct key is down
						this.removeMovieClip();
					}
				}
			}
		}
		//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;
			//and then delete all of the arrows
			for(var i:Number = 0;i

The Final Product

Source .fla File

Read More...

Tutorial: Make a Rhythm Game in AS2 – Part 3


Written By MrSun at 7:33 am - Monday, August 04th, 2008
Categories: Flash

Table of Contents 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 […]

Read More...

Tutorial: Make a Rhythm Game in AS2 – Part 2


Written By MrSun at 7:32 am - Monday, August 04th, 2008
Categories: Flash

Table of Contents 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 […]

Read More...

Tutorial: Make a Rhythm Game in AS2


Written By MrSun at 7:31 am - Monday, August 04th, 2008
Categories: Flash

Today, we’re going to make a rhythm game like Flash Flash Revolution in ActionScript 2.0. This will be a pretty intense game, so it will be made up of quite a few parts. This is the first. Here is a list of the steps in making this game: The Brainstorming Create the Required Symbols/Art Programming […]

Read More...

Comments Re-opened!


Written By MrSun at 11:44 pm - Sunday, August 03rd, 2008
Categories: Uncategorized

Well, I’ve just decided that I’m going to re-open comments. We’ll see how well this turns out, eh?

Read More...

Link Post Sunday 08/03


Written By MrSun at 12:00 pm - Sunday, August 03rd, 2008
Categories: Uncategorized

Creative Code: 14 Ways to Learn from Creative Programmers by Life Dev AS3 | 19 Custom AS3 Classes Roundup by Flash Enabled Blog Flash CS3: Easy to use XML Feed Class by Brian Connatser The Dude’s Flash Tutorials Being a Better Gamer: a Guide to Changing the World by Michael Thompson What is Open Source? […]

Read More...

6 Reasons Why People Play Flash Games


Written By MrSun at 8:00 am - Sunday, August 03rd, 2008
Categories: Flash

The Technical Reasons They’re Free The main reason why people play flash games over better-developed industrial games is that they’re free. The only downside for the players is that advertisements are what make them free, which isn’t too bad of a downside depending on the person. This is why I strongly discourage making premium versions […]

Read More...

6 Ways To Make Money From Your Flash Game


Written By MrSun at 12:00 pm - Saturday, August 02nd, 2008
Categories: Flash

Like it or not, we all love money. Making flash games can usually get you some of it. Here’s a list of a few ways to do so. 1. Get it Sponsored This is the most common way that game developers use to get money, If you don’t know what it is, it’s basically when […]

Read More...

Psychology Will Help you Make Better Games


Written By MrSun at 4:00 am - Saturday, August 02nd, 2008
Categories: Flash

Psychology is the study of the human mind. If you think about it, it becomes pretty obvious that this study could indeed help you make better games. I’m not saying that you need to enroll in a college course to make great games, but perhaps it could help. There is only one thing that you […]

Read More...

Scribefire Quickads Installed


Written By MrSun at 2:06 pm - Friday, August 01st, 2008
Categories: Uncategorized

Well, here’s just a quick post. Today, I somehow stumbled upon an interesting service called Scribefire Quickads. It’s a free service that lets you put advertisements from a bunch of networks into your blog. The setup was extremely quick and easy, and I am quite impressed by how it looks and works. The best part […]

Read More...