How to Make a Rhythm Game in AS2 – Part 5
Part 5: Making a Level
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 inside 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 “Var:”, type in lvlName. This is what your symbol should look like so far:
Now, add a second frame. This is just going to be the frame that it goes to when the gamer rolls over the button. I won’t make mine too fancy. 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:Number; //lvlName is the variable that holds the name of the //level that this button navigates to var lvlName:String = _root.lvlNames[lvlID]; //makes it so this movieclip doesn't keep on playing stop(); onRollOver = function(){ //when the user rolls over this symbol, //jump to the next frame nextFrame(); } onRollOut = function(){ //when the user rolls out of this symbol, //back to the previous frame prevFrame(); } onRelease = function(){ //if the user clicks on this button //make the current level the one that this represents _root.lvlCurrent = lvlID; //go to the game frame _root.gotoAndStop('game'); //and remove the buttons from the stage //(we'll define this function in a bit) _root.removeButtons(); }
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(i=0;i<lvlArrayAll.length;i++){ //we're going to attach the btnSongSelect MC to the stage attachMovie('btnSongSelect', 'sngButton'+i, getNextHighestDepth()); //the _x value will be 130, centered this['sngButton'+i]._x = 130; //the y value will be at a minimum of 70 and then continue //to be added by 60 every subsequent button this['sngButton'+i]._y = 70+60*i; //define the id of this button, or which level it //represents this['sngButton'+i].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(i=0;i<lvlArrayAll.length;i++){ //but this time, it removes all of these buttons _root['sngButton'+i].removeMovieClip(); } }
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 95?
//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<sArrow;i++){ _root['arrow'+i].removeMovieClip(); }
Well, we can change a few bits of it to make this:
//if the song is finished, then reset the game //and go back to the menu gotoAndStop('menu'); gameIsOver = true; //and then delete all of the arrows for(var i:Number = 0;i<sArrow;i++){ _root['arrow'+i].removeMovieClip(); } //remove the onEnterFrame event or else this code //will keep on running onEnterFrame = null;
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.
Subscribe!
Awesome Tutorials
