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

    The first step to creating such a thing is to create a new Actionscript (.as) file. Immediately save it as “Arrow.as” and place the following code into it:<\/p>\n

    \r\npackage{\r\n\timport flash.display.MovieClip;\r\n\timport flash.events.*;\r\n\tpublic class Arrow extends MovieClip{\r\n\t\tpublic function Arrow(){\r\n\t\t\t \r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    This is the basic skeleton for any AS3 class.  But, before we add any more code to it, we have to set it as the base class for all of the arrows. Right click on any of the arrow symbols in the library and click on “Properties…”. Under the “Class:” field, there should be another field called “Base Class:”. Right now, it’s set as flash.display.MovieClip<\/tt>. Set it now as “Arrow”. Do this for all four of the arrows. Now, we can add code to the class:<\/p>\n
    \r\npackage{\r\n\timport flash.display.MovieClip;\r\n\timport flash.events.*;\r\n\tpublic class Arrow extends MovieClip{\r\n\t\tprivate var _root:Object;\/\/we'll use this to refer to main timeline\r\n\t\tpublic var arrowCode:int;\/\/the key that needs to be pressed\r\n\t\tpublic function Arrow(){\r\n\t\t\t this.addEventListener(Event.ADDED, beginClass);\r\n\t\t\t this.addEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t}\r\n\t\tprivate function beginClass(e:Event):void{\r\n\t\t\t_root = MovieClip(root); \/\/typing _root is much easier than MovieClip(root)\r\n\t\t\t\r\n\t\t\tstage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeys);\r\n\t\t}\r\n\t\tprivate function eFrame(e:Event):void{\r\n\t\t\tthis.y -= _root.arrowSpeed;\/\/move it up the stage\r\n\t\t\t\r\n\t\t\t\/\/if game is over or it's off the stage, destroy it\r\n\t\t\tif(_root.gameOver || this.y < -60){\r\n\t\t\t\tdestroyThis();\r\n\t\t\t}\r\n\t\t}\r\n\t\tprivate function checkKeys(e:KeyboardEvent):void{\r\n\t\t\t\/\/checking if a certain key is down and it's touching the receptor\r\n\t\t\tif(e.keyCode == arrowCode && this.hitTestObject(_root.mcReceptor)){\r\n\t\t\t\tdestroyThis();\/\/remove it from stage\r\n\t\t\t}\r\n\t\t}\r\n\t\tprivate function destroyThis():void{\r\n\t\t\tthis.removeEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t\tstage.removeEventListener(KeyboardEvent.KEY_DOWN, checkKeys);\r\n\t\t\t_root.removeChild(this);\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    Now, in order for this code to work, we have to add some stuff to the makeLvl<\/tt> function. Just change it to this:<\/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\t\/\/setting the key that needs to be pressed\r\n\t\t\t\tcurrentArrow.arrowCode = 37;\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\tcurrentArrow.arrowCode = 38;\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\tcurrentArrow.arrowCode = 40;\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\tcurrentArrow.arrowCode = 39;\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
    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 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 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 […]<\/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\/1162"}],"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=1162"}],"version-history":[{"count":5,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1162\/revisions"}],"predecessor-version":[{"id":1387,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1162\/revisions\/1387"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1162"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}