{"id":1171,"date":"2009-01-24T08:05:31","date_gmt":"2009-01-24T12:05:31","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1171"},"modified":"2022-05-29T08:23:30","modified_gmt":"2022-05-29T12:23:30","slug":"tutorial-make-a-rhythm-game-in-as3-part-5","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-make-a-rhythm-game-in-as3-part-5\/","title":{"rendered":"Tutorial: Make a Rhythm Game in AS3 – Part 5"},"content":{"rendered":"
\n
    \n
  1. The Brainstorming<\/a><\/li>\n
  2. Create the Required Symbols\/Art<\/a><\/li>\n
  3. Programming the Arrows<\/a><\/li>\n
  4. Programming the Arrows Part 2<\/a><\/li>\n
  5. Make a Level<\/a><\/li>\n
  6. Scoring<\/a><\/li>\n
  7. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 5: Make a Level (or five)<\/span><\/h3>\n

    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.<\/p>\n

    Let’s first create the 5 levels that we’re going to need. Place this code in your first frame.<\/p>\n

    \r\n\/\/The array for the first level of the game\r\nvar lvlArray0:Array = new Array(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4);\r\nvar lvlArray1:Array = new Array(1,3,2,4,1,3,2,4,1,3,2,4,1,3,2,4);\r\nvar lvlArray2:Array = new Array(4,3,2,1,4,3,2,1,4,3,2,1,4,3,2,1);\r\nvar lvlArray3:Array = new Array(4,2,3,1,4,2,3,1,4,2,3,1,4,2,3,1);\r\nvar lvlArray4:Array = new Array(2,1,4,3,2,1,4,3,2,1,4,3,2,1,4,3);\r\n\/\/The names of all of the levels\r\nvar lvlNames:Array = new Array('level1','level2','level3','level4','level5');\r\n\/\/The array holding all of the lvl arrays\r\nvar lvlArrayAll:Array = new Array(lvlArray0,lvlArray1,lvlArray2,lvlArray3,lvlArray4);\r\n<\/pre>\n
    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”.<\/p>\n
    Next, create a “menu” frame in between the first frame and the game frame. So far, the frames should look like this:
    \n\"How<\/p>\n
    Ok, now for the menu. First, we’re going to have to put a stop();<\/tt> 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<\/tt>. 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.<\/p>\n
    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 “<Instance Name>”, type in txtName<\/tt>. This is what your symbol should look like so far:
    \n\"What<\/p>\n
    Now, make a new layer above “Layer 1” and add the following code onto the first frame:<\/p>\n
    \r\n\/\/lvlID will be passed into this MovieClip\r\n\/\/when we dynamically place it onto the stage\r\n\/\/It is the index number of the level and name arrays\r\nvar lvlID:int;\r\n\/\/lvlName is the variable that holds the name of the\r\n\/\/level that this button navigates to\r\nvar lvlName:String = MovieClip(root).lvlNames[lvlID];\r\n\/\/makes it so this movieclip doesn't keep on playing\r\nvar destroy:Boolean = false;\/\/whether or not to destroy this\r\nstop();\r\n\r\n\/\/setting the text\r\ntxtName.text = 'Level '+lvlID;\r\n\r\nthis.addEventListener(MouseEvent.CLICK,clickThis);\r\n\r\nfunction clickThis(e:MouseEvent):void{\r\n\t\/\/if the user clicks on this button\r\n\t\/\/make the current level the one that this represents\r\n\tMovieClip(root).lvlCurrent = lvlID;\r\n\t\/\/go to the game frame\r\n\tMovieClip(root).gotoAndStop('game');\r\n\t\/\/and remove the buttons from the stage\r\n\t\/\/(we'll define this function in a bit)\r\n\tMovieClip(root).removeButtons();\r\n}\r\n\r\nthis.addEventListener(Event.ENTER_FRAME, eFrame);\r\n\r\nfunction eFrame(e:Event):void{\r\n\tif(destroy){\/\/if destroy is set to true\r\n\t\tthis.parent.removeChild(this);\/\/then remove this\r\n\t\t\/\/and remove all listeners as well\r\n\t\tremoveEventListener(MouseEvent.CLICK,clickThis);\r\n\t\tremoveEventListener(Event.ENTER_FRAME, eFrame);\r\n\t}\r\n}\r\n<\/pre>\n
    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:<\/p>\n
    \r\n\/\/stop the frame\r\nstop();\r\n\r\n\/\/this loop will create the buttons\r\nfor(var i:int=0;i\n
    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?<\/p>\n
    \r\n\/\/get the next arrow if it the song isn't finished\r\nif(sArrow < lvlArrayAll[lvlCurrent].length){\r\n\tsArrow ++;\r\n} else {\r\n\t\/\/if the song is finished, then reset the game\r\n\t\/\/of course, we don't have the code for that yet\r\n\t\/\/so we're just going to go back to the first frame\r\n\tgotoAndPlay(1);\r\n\tgameIsOver = true;\r\n}\r\n<\/pre>\n
    Well, we can change a few bits of it to make this:<\/p>\n
    \r\n\/\/get the next arrow if it the song isn't finished\r\nif(sArrow < lvlArrayAll[lvlCurrent].length){\r\n\tsArrow ++;\r\n} else {\r\n\t\/\/if the song is finished, then reset the game\r\n\tgotoAndStop('menu');\r\n\tgameIsOver = true;\r\n\t\/\/then remove this enter_frame listener\r\n\tremoveEventListener(Event.ENTER_FRAME, makeLvl);\r\n}\r\n<\/pre>\n
    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()<\/tt> part.<\/p>\n
    Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source Files (zipped)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    The Brainstorming Create the Required Symbols\/Art Programming the Arrows Programming the Arrows Part 2 Make a Level Scoring Finishing Touches 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,4,6,68],"tags":[25,8,19,18,68,70,69,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1171"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=1171"}],"version-history":[{"count":13,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1171\/revisions"}],"predecessor-version":[{"id":1223,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1171\/revisions\/1223"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1171"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}