{"id":322,"date":"2008-08-04T07:34:54","date_gmt":"2008-08-04T11:34:54","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=322"},"modified":"2022-05-29T08:23:37","modified_gmt":"2022-05-29T12:23:37","slug":"tutorial-make-a-rhythm-game-in-as2-part-4","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-make-a-rhythm-game-in-as2-part-4\/","title":{"rendered":"Tutorial: Make a Rhythm Game in AS2 – Part 4"},"content":{"rendered":"

Table of Contents<\/h3>\n
\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 4: Programming the Arrows: Part 2 <\/h3>\n

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

    \r\nfunction makeLvl():Void{\r\n\t\/\/code here will create the level\r\n\tif(sTime < sTempo){\r\n\t\t\/\/if the required time hasn't reached the limit\r\n\t\t\/\/then update the time\r\n\t\tsTime ++;\r\n\t} else {\r\n\t\t\/\/if the time has reached the limit\r\n\t\t\/\/then reset the time\r\n\t\tsTime = 0;\r\n\t\t\/\/and create an corresponding arrow with the\r\n\t\t\/\/number within the level array\r\n\t\t\r\n\t\t\/\/if an actual arrow can be made\r\n\t\tif(lvlArrayAll[lvlCurrent][sArrow] != 0){\r\n\t\t\tif(lvlArrayAll[lvlCurrent][sArrow] == 1){\r\n\t\t\t\t\/\/place a left arrow onto the stage\r\n\t\t\t\tattachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t\/\/set the _x value of the arrow so that it is in the\r\n\t\t\t\t\/\/right place to touch the receptor\r\n\t\t\t\t_root['arrow'+sArrow]._x = 135;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){\r\n\t\t\t\t\/\/place an up arrow onto the stage\r\n\t\t\t\tattachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 205;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){\r\n\t\t\t\t\/\/place a down arrow onto the stage\r\n\t\t\t\tattachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 275;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){\r\n\t\t\t\t\/\/place a right arrow onto the stage\r\n\t\t\t\tattachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 345;\r\n\t\t\t}\r\n\t\t\t\/\/set the arrow's y coordinate off of the stage\r\n\t\t\t\/\/so that the user can't see it when it appears\r\n\t\t\t_root['arrow'+sArrow]._y = 500;\r\n\t\t}\r\n\t\t\/\/get the next arrow if it the song isn't finished\r\n\t\tif(sArrow < lvlArrayAll[lvlCurrent].length){\r\n\t\t\tsArrow ++;\r\n\t\t} else {\r\n\t\t\t\/\/if the song is finished, then reset the game\r\n\t\t\t\/\/of course, we don't have the code for that yet\r\n\t\t\t\/\/so we're just going to go back to the first frame\r\n\t\t\tgotoAndPlay(1);\r\n\t\t\tgameIsOver = true;\r\n\t\t\t\/\/and then delete all of the arrows\r\n\t\t\tfor(var i:Number = 0;i\n
    What we're going to do is add enterFrame<\/tt> 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()<\/tt> function after we defined the _y<\/tt> value of the MovieClip.<\/p>\n
    \r\n\/\/adding enterFrame events to the arrow\r\n_root['arrow'+sArrow].onEnterFrame = function(){\r\n\t\/\/making the arrow move up\r\n\tthis._y -= arrowSpeed;\r\n}\r\n<\/pre>\n
    Next, we have to give the receptors an instance name. We're going to name it mcReceptor<\/tt>. 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<\/tt> function.<\/p>\n
    \r\nif(lvlArrayAll[lvlCurrent][sArrow] == 1){\r\n\t\/\/place a left arrow onto the stage\r\n\tattachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\/\/set the _x value of the arrow so that it is in the\r\n\t\/\/right place to touch the receptor\r\n\t_root['arrow'+sArrow]._x = 135;\r\n\t\/\/setting the arrowCode of the arrow\r\n\t_root['arrow'+sArrow].arrowCode = Key.LEFT;\r\n} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){\r\n\t\/\/place an up arrow onto the stage\r\n\tattachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());\r\n\t_root['arrow'+sArrow]._x = 205;\r\n\t_root['arrow'+sArrow].arrowCode = Key.UP;\r\n} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){\r\n\t\/\/place a down arrow onto the stage\r\n\tattachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());\r\n\t_root['arrow'+sArrow]._x = 275;\r\n\t_root['arrow'+sArrow].arrowCode = Key.DOWN;\r\n} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){\r\n\t\/\/place a right arrow onto the stage\r\n\tattachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());\r\n\t_root['arrow'+sArrow]._x = 345;\r\n\t_root['arrow'+sArrow].arrowCode = Key.RIGHT;\r\n}\r\n<\/pre>\n
    Anyway, after doing this, we're going to place the following code into the arrow's onEnterFrame<\/tt> function.<\/p>\n
    \r\n\/\/hitTesting with the receptor\r\nif(this.hitTest(_root.mcReceptor)){\r\n\tif(Key.isDown(this.arrowCode)){\r\n\t\t\/\/checking if the correct key is down\r\n\t\tthis.removeMovieClip();\r\n\t}\r\n}\r\n<\/pre>\n
    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<\/tt> 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()<\/tt> function, add the following code.<\/p>\n
    \r\n\/\/make the level array longer\r\nlvlArrayAll[lvlCurrent].push(0,0,0,0,0);\r\n<\/pre>\n
    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.<\/p>\n
    Final Code for the Game Frame<\/h4>\n
    \r\nstop();\r\n\/\/VARIABLES\r\n\/\/sTime is the current frame that is being played\r\n\/\/Once it reaches sTempo, then it will be reset\r\n\/\/and a note will be created\r\nvar sTime:Number = 0;\r\n\/\/sTempo is how many frames it takes before\r\n\/\/a note is created. Because it's 12, and\r\n\/\/the frame rate is 24, it will take a half of a second\r\n\/\/for a note to be made\r\nvar sTempo:Number = 12;\r\n\/\/sNote is the current arrow of the level that is created\r\n\/\/0 makes no arrow\r\n\/\/1 makes a left arrow\r\n\/\/2 makes an up arrow\r\n\/\/3 makes a down arrow\r\n\/\/4 makes a right arrow\r\nvar sArrow:Number = 0;\r\n\/\/arrowSpeed is how fast the arrow moves up the screen\r\nvar arrowSpeed:Number = 10;\r\n\/\/gameIsOver is whether the game's over\r\nvar gameIsOver:Boolean = false;\r\n\r\nfunction beginCode():Void{\r\n\t\/\/Code here will only be run once at the beginning\r\n\t\/\/of the game\r\n\t\r\n\t\/\/every frame, run makeLvl()\r\n\tonEnterFrame = function(){\r\n\t\tmakeLvl();\r\n\t}\r\n\t\r\n\t\/\/make the level array longer\r\n\tlvlArrayAll[lvlCurrent].push(0,0,0,0,0);\r\n}\r\nfunction makeLvl():Void{\r\n\t\/\/code here will create the level\r\n\tif(sTime < sTempo){\r\n\t\t\/\/if the required time hasn't reached the limit\r\n\t\t\/\/then update the time\r\n\t\tsTime ++;\r\n\t} else {\r\n\t\t\/\/if the time has reached the limit\r\n\t\t\/\/then reset the time\r\n\t\tsTime = 0;\r\n\t\t\/\/and create an corresponding arrow with the\r\n\t\t\/\/number within the level array\r\n\t\t\r\n\t\t\/\/if an actual arrow can be made\r\n\t\tif(lvlArrayAll[lvlCurrent][sArrow] != 0){\r\n\t\t\tif(lvlArrayAll[lvlCurrent][sArrow] == 1){\r\n\t\t\t\t\/\/place a left arrow onto the stage\r\n\t\t\t\tattachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t\/\/set the _x value of the arrow so that it is in the\r\n\t\t\t\t\/\/right place to touch the receptor\r\n\t\t\t\t_root['arrow'+sArrow]._x = 135;\r\n\t\t\t\t\/\/setting the arrowCode of the arrow\r\n\t\t\t\t_root['arrow'+sArrow].arrowCode = Key.LEFT;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){\r\n\t\t\t\t\/\/place an up arrow onto the stage\r\n\t\t\t\tattachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 205;\r\n\t\t\t\t_root['arrow'+sArrow].arrowCode = Key.UP;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){\r\n\t\t\t\t\/\/place a down arrow onto the stage\r\n\t\t\t\tattachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 275;\r\n\t\t\t\t_root['arrow'+sArrow].arrowCode = Key.DOWN;\r\n\t\t\t} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){\r\n\t\t\t\t\/\/place a right arrow onto the stage\r\n\t\t\t\tattachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());\r\n\t\t\t\t_root['arrow'+sArrow]._x = 345;\r\n\t\t\t\t_root['arrow'+sArrow].arrowCode = Key.RIGHT;\r\n\t\t\t}\r\n\t\t\t\/\/set the arrow's y coordinate off of the stage\r\n\t\t\t\/\/so that the user can't see it when it appears\r\n\t\t\t_root['arrow'+sArrow]._y = 500;\r\n\t\t\t\/\/adding enterFrame events to the arrow\r\n\t\t\t_root['arrow'+sArrow].onEnterFrame = function(){\r\n\t\t\t\t\/\/making the arrow move up\r\n\t\t\t\tthis._y -= arrowSpeed;\r\n\t\t\t\t\/\/hitTesting with the receptor\r\n\t\t\t\tif(this.hitTest(_root.mcReceptor)){\r\n\t\t\t\t\tif(Key.isDown(this.arrowCode)){\r\n\t\t\t\t\t\t\/\/checking if the correct key is down\r\n\t\t\t\t\t\tthis.removeMovieClip();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/\/get the next arrow if it the song isn't finished\r\n\t\tif(sArrow < lvlArrayAll[lvlCurrent].length){\r\n\t\t\tsArrow ++;\r\n\t\t} else {\r\n\t\t\t\/\/if the song is finished, then reset the game\r\n\t\t\t\/\/of course, we don't have the code for that yet\r\n\t\t\t\/\/so we're just going to go back to the first frame\r\n\t\t\tgotoAndPlay(1);\r\n\t\t\tgameIsOver = true;\r\n\t\t\t\/\/and then delete all of the arrows\r\n\t\t\tfor(var i:Number = 0;i\n
    The Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source .fla File<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    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 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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7,4,6,68],"tags":[25,7,19,18,68,70,69,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/322"}],"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=322"}],"version-history":[{"count":7,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":412,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions\/412"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}