{"id":1159,"date":"2009-01-24T08:03:06","date_gmt":"2009-01-24T12:03:06","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1159"},"modified":"2022-05-29T08:23:30","modified_gmt":"2022-05-29T12:23:30","slug":"tutorial-make-a-rhythm-game-in-as3-part-3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-make-a-rhythm-game-in-as3-part-3\/","title":{"rendered":"Tutorial: Make a Rhythm Game in AS3 – Part 3"},"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

    Programming the Arrows<\/h3>\n

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

    We are going to make an array for our levels, just as we did in the Brick Breaker Tutorial<\/a>. 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:<\/p>\n

    \r\n\/\/The current level the player is on\r\nvar lvlCurrent:Number = 0;\r\n\/\/The array for the first level of the game\r\nvar lvlArray0:Array = new Array(1,2,3,4);\r\n\/\/The array holding all of the lvl arrays\r\nvar lvlArrayAll:Array = new Array(lvlArray0);\r\n<\/pre>\n
    The second frame will be where the game will take place. For now, just put a stop();<\/tt> there, so the game doesn’t continuously loop. So now, we’re going to create two functions, one called beginCode()<\/tt> and another called makeLvl()<\/tt>. beginCode()<\/tt> will only be run once every level, while makeLvl will run the entire level. Here’s the code:<\/p>\n
    \r\nfunction beginCode():void{\r\n\taddEventListener(Event.ENTER_FRAME, makeLvl);\r\n}\r\n\r\nfunction makeLvl(e:Event):void{\r\n\t\r\n}\r\n\r\nbeginCode();\r\n<\/pre>\n
    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:<\/p>\n
    \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:int = 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:int = 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<\/pre>\n
    I really<\/em> commented out this one so you’d understand what the variables do. If you still don’t, then maybe the code within the makeLvl()<\/tt> function might help explain:<\/p>\n
    \r\nfunction makeLvl(e:Event):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\/\/if an actual arrow can be made\r\n\t\tif(lvlArrayAll[lvlCurrent][sArrow] != 0){\r\n\t\t\tvar currentArrow:MovieClip; \/\/this will hold the current arrow\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\tcurrentArrow = new arrowLeft();\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\tcurrentArrow.x = 135;\r\n\t\t\t\t\/\/set the arrow's y coordinate off of the stage\r\n\t\t\t\t\/\/so that the user can't see it when it appears\r\n\t\t\t\tcurrentArrow.y = 500;\r\n\t\t\t\taddChild(currentArrow);\/\/add it to stage\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\tcurrentArrow = new arrowUp();\r\n\t\t\t\tcurrentArrow.x = 205;\r\n\t\t\t\tcurrentArrow.y = 500;\r\n\t\t\t\taddChild(currentArrow);\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\tcurrentArrow = new arrowDown();\r\n\t\t\t\tcurrentArrow.x = 275;\r\n\t\t\t\tcurrentArrow.y = 500;\r\n\t\t\t\taddChild(currentArrow);\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\tcurrentArrow = new arrowRight();\r\n\t\t\t\tcurrentArrow.x = 345;\r\n\t\t\t\tcurrentArrow.y = 500;\r\n\t\t\t\taddChild(currentArrow);\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}\r\n\t}\r\n}\r\n<\/pre>\n
    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<\/tt> 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.<\/p>\n
    Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source .fla File<\/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 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 […]<\/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\/1159"}],"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=1159"}],"version-history":[{"count":5,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1159\/revisions"}],"predecessor-version":[{"id":1221,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1159\/revisions\/1221"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1159"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}