{"id":324,"date":"2008-08-04T07:36:53","date_gmt":"2008-08-04T11:36:53","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=324"},"modified":"2022-05-29T08:23:37","modified_gmt":"2022-05-29T12:23:37","slug":"tutorial-make-a-rhythm-game-in-as2-part-6","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-make-a-rhythm-game-in-as2-part-6\/","title":{"rendered":"Tutorial: Make a Rhythm Game in AS2 – Part 6"},"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 6: Scoring<\/h3>\n

    The next step in making our rhythm game is scoring. The user will get points depending on how far away the arrow is from the receptor when it hits it. We’re also going to make the health bar gain and lose parts when the user hits or misses the receptor. First of all, we need to define a score variable at the top of the game frame. We also have to define a String variable that will show how well the user hit the arrow.<\/p>\n

    \r\n\/\/the score variable\r\nvar score:Number = 0;\r\n\/\/either perfect, great, nice, or good\r\nvar scoreString:String = '';\r\n<\/pre>\n
    That was pretty easy. Next, we want to increase the score whenever the user hits the right key when it hits the score. We’re going to make it increase by 10 for a perfect hit, 8 for a great hit, 6 for an nice hit, and 4 for a good hit.<\/p>\n
    \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\t\/\/if the user hits it about perfectly\r\n\t\t\/\/the receptors y coordinate is about 10 px away from the\r\n\t\t\/\/symbol's y coordinate.\r\n\t\tif(this._y <= mcReceptor._y + 15 && this._y >= mcReceptor._y + 5){\r\n\t\t\tscore += 10;\r\n\t\t\tscoreString = 'Perfect';\r\n\t\t} else if (this._y <= mcReceptor._y + 25 && this._y >= mcReceptor._y-5){\r\n\t\t\tscore += 8;\r\n\t\t\tscoreString = 'Great';\r\n\t\t} else if (this._y <= mcReceptor._y + 40 && this._y >= mcReceptor._y -30){\r\n\t\t\tscore += 6;\r\n\t\t\tscoreString = 'Nice';\r\n\t\t} else {\r\n\t\t\tscore += 4;\r\n\t\t\tscoreString = 'Good';\r\n\t\t}\r\n\t\tthis.removeMovieClip();\r\n\t}\r\n}\r\n<\/pre>\n
    The next thing we have to do now is program the health bar. If the user misses or hits the arrow key at the wrong time, then we have to lose health. If the user hits it right though, the health will increase. First of all, give the health bar an instance name, mcHealth<\/tt>. Then, we’re going to make a function for this, so we don’t have to write all the if statements repeatedly. Define this function at the bottom of your code.<\/p>\n
    \r\n\/\/this function will change the health depending on how much health change\r\n\/\/it needs, positive or negative\r\nfunction changeHealth(healthDiff:Number):Void{\r\n\t\/\/checking if the health is already at it's full\r\n\t\/\/or will be full after this hit\r\n\tif(mcHealth._xscale + healthDiff >= 100){\r\n\t\tmcHealth._xscale = 100;\r\n\t} else if(mcHealth._xscale + healthDiff <= 0){\r\n\t\t\/\/checking if the health will be equal or below 0\r\n\t\t\/\/lose function will go here\r\n\t} else {\r\n\t\t\/\/if there are no problems\r\n\t\tmcHealth._xscale += healthDiff;\r\n\t}\r\n}\r\n<\/pre>\n
    The next thing we're going to do is run this function positively when the user hits the key correctly. In the arrow's code where it hit tests with the receptor, put this code for perfect:<\/p>\n
    \r\nchangeHealth(5);\r\n<\/pre>\n
    This will increase the health by 5. You can do the rest yourself, just keep on decrementing the health change by 1, and you'll be good.<\/p>\n
    Next comes the hard part, making the user lose health. Again, we have to define a few variables at the top. They will be Booleans saying whether or not the receptor is touching a certain key.<\/p>\n
    \r\n\/\/Booleans checking if the arrows are touching the receptor\r\nvar touchLeft:Boolean = false;\r\nvar touchUp:Boolean = false;\r\nvar touchDown:Boolean = false;\r\nvar touchRight:Boolean = false;\r\n<\/pre>\n
    We're also going to have to write a new function for it. This will be an onEnterFrame<\/tt> function for the receptor.<\/p>\n
    \r\n\/\/the receptor will need this onEnterFrame function\r\nmcReceptor.onEnterFrame = function(){\r\n\t\/\/first we reset the variables we got last time\r\n\t\/\/just in case they aren't true anymore\r\n\ttouchLeft = false;\r\n\ttouchUp = false;\r\n\ttouchDown = false;\r\n\ttouchRight = false;\r\n\t\/\/this for loop will be used for the hit testing\r\n\t\/\/it starts off with sArrow-10 because\r\n\t\/\/more than that probably will not fit onto the screen and it would\r\n\t\/\/waste processing power to start with 0.\r\n\t\/\/we might change this later for even better efficiency\r\n\tfor(i=sArrow-10;i\n
    Now that we have the variables checking which arrow is touching the receptor, now we need some Key.isDown<\/tt> checkers. We can just add those to the bottom of the mcReceptor<\/tt> function.<\/p>\n
    \r\n\/\/checking if the keys are down when they aren't supposed to be\r\n\/\/and making the user lose health :O\r\nif(Key.isDown(Key.LEFT) && !touchLeft){\r\n\tchangeHealth(-10);\r\n}\r\nif(Key.isDown(Key.UP) && !touchUp){\r\n\tchangeHealth(-10);\r\n}\r\nif(Key.isDown(Key.DOWN) && !touchDown){\r\n\tchangeHealth(-10);\r\n}\r\nif(Key.isDown(Key.RIGHT) && !touchRight){\r\n\tchangeHealth(-10);\r\n}\r\n<\/pre>\n
    The problem with this code is that the user will lose health even when it hits a key, unless he's amazingly quick. It doesn't give the user any time to let go of the key before making them lose a bunch of health. There are a few ways to fix this problem. If you find a better way to do it, then go ahead, but this is how my idea works.<\/p>\n
    Instead of removing the arrow when the user hits the key, we just make it invisible, inactive, but still moving. This way, it'll still be hit testing the receptor until it leaves. It also helps with the next part of losing health, missing the arrow itself. Place this code in the spot where this.removeMovieClip();<\/tt> is in the arrow's enterFrame function.<\/p>\n
    \r\nthis._visible = false;\r\nthis.gotHit = true;\r\n<\/pre>\n
    Now we have to define the gotHit<\/tt> variable. We can do this in the spot where we also define the _y<\/tt> coordinate.<\/p>\n
    \r\n_root['arrow'+sArrow].gotHit = false;\r\n<\/pre>\n
    Right now, the variable really doesn't do anything. We have to turn off the hit testing when gotHit<\/tt> is true. Just replace the hitTest<\/tt> condition with this.<\/p>\n
    \r\nif(this.hitTest(_root.mcReceptor) && !this.gotHit){\r\n<\/pre>\n
    Phew, that took a while. Now, for the final part of losing health, when the person misses the arrow altogether. Place this code at the end of the arrow's onEnterFrame<\/tt> function.<\/p>\n
    \r\n\/\/if the arrow leaves the stage\r\nif(this._y <= -50){\r\n\t\/\/if the user didn't already hit the arrow\r\n\tif(!this.gotHit){\r\n\t\tchangeHealth(-10);\r\n\t}\r\n\t\/\/destroy this movieclip\r\n\tthis.removeMovieClip();\r\n}\r\n<\/pre>\n
    Well, that's all for scoring. This probably has been the longest lesson in the series. If you survived through this without having any trouble, then you can do the next part without my help, the finishing touches.<\/p>\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 6: Scoring The next step in making our rhythm game is scoring. The user will get points depending on how far away the arrow is from the receptor when it hits […]<\/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\/324"}],"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=324"}],"version-history":[{"count":2,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":414,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions\/414"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}