{"id":1256,"date":"2009-01-07T08:01:19","date_gmt":"2009-01-07T12:01:19","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1256"},"modified":"2022-05-29T08:23:32","modified_gmt":"2022-05-29T12:23:32","slug":"tutorial-create-a-game-like-winter-bells-in-as3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-game-like-winter-bells-in-as3\/","title":{"rendered":"Tutorial: Create a Game Like Winter Bells in AS3"},"content":{"rendered":"
\n
    \n
  1. Basic Character Programming<\/a><\/li>\n
  2. Programming the “Bells”<\/a><\/li>\n
  3. Level Creation<\/a><\/li>\n
  4. Scoring<\/a><\/li>\n
  5. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 1: Basic Character Programming<\/h3>\n

    Welcome, people, and get ready for yet another tutorial! In celebration of the winter season, we’re going to make a game like Winter Bells<\/a>, in ActionScript 3.0. Let us begin, shall we?<\/p>\n

    The basic concept of Winter Bells is to get as high as you can by jumping on bells. It’s extremely addictive, and if you haven’t, you should play it<\/a> now.<\/p>\n

    First of all, let’s set up our flash file. Keep the default dimensions of the file the same (550×400), but change the background of the stage to black, and make the frame rate 24 fps. This way, it’ll look nicer and smoother. The second thing we’ve got to do is create a character that we’re going to use. I won’t go overboard in detail on mine, so it’s going to be a simple 25×25 white circle. Next, convert it into a MovieClip called “mcMain”. Also, give it an instance name of the same thing, “mcMain”.<\/p>\n

    <\/center><\/p>\n

    Next, set it so that the crosshair is on the center of the circle. You can do this by double clicking on the MovieClip to edit it. Then, change the circle’s coordinates to -12.5, -12.5. This will make it in the exact center of the MovieClip.<\/p>\n

    Now, let’s add some actions to this character. Create a new layer named “actions” and then add the following code to it:<\/p>\n

    \r\nvar mainSpeed:int = 25; \/\/how fast the character move side to side\r\n\r\n\r\naddEventListener(Event.ENTER_FRAME, eFrame);\r\n\r\nfunction eFrame(e:Event):void{\r\n\t\/\/making the character follow the mouse\r\n\tif(mouseX > mcMain.x + 25){ \/\/if the mouse is to the right of mcMain\r\n\t\tmcMain.x += mainSpeed;\/\/move mcMain to the right\r\n\t} else if (mouseX < mcMain.x - 25){\/\/same thing with the left side\r\n\t\tmcMain.x -= mainSpeed;\r\n\t} else {\r\n\t\tmcMain.x = mouseX;\/\/if it's close enough, then make it the same x  value\r\n\t}\r\n}\r\n<\/pre>\n
    This code will simply make mcMain<\/tt> follow the mouse on it's x<\/tt> value. That was pretty easy, right? Now, we have to make it so it can jump. First, we have to add some variables to the top of the stage:<\/p>\n
    \r\nvar mainJumping = false; \/\/whether or not main is in the air\r\nvar jumpSpeed:Number = 0; \/\/how quickly he's jumping at the moment\r\nvar jumpSpeedLimit:int = 25; \/\/how quickly he'll be able to jump\r\n<\/pre>\n
    Next, add these two functions to the bottom of the stage:<\/p>\n
    \r\nstage.addEventListener(MouseEvent.CLICK, startJump);\/\/if the user clicks\r\n\r\nfunction startJump(e:MouseEvent):void{\/\/then run this function\r\n\tif(!mainJumping){\/\/main isn't already jumping\r\n\t\tmainJumping = true;\/\/then we can start jumping\r\n\t\tjumpSpeed = jumpSpeedLimit*-1;\/\/change the jumpSpeed so that we can begin jumping\r\n\t}\r\n}\r\n\r\nfunction mainJump():void{\r\n\tif(mainJumping) {\/\/if jumping has been initiated\r\n\t\tif(jumpSpeed < 0){\/\/if the guy is still going up\r\n\t\t\tjumpSpeed *= 1 - jumpSpeedLimit\/120;\/\/decrease jumpSpeed slightly\r\n\t\t\tif(jumpSpeed > -jumpSpeedLimit*.1){\/\/if jumpSpeed is small enough\r\n\t\t\t\tjumpSpeed *= -1;\/\/then begin to go down\r\n\t\t\t}\r\n\t\t}\r\n\t\tif(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){\/\/if main is going down\r\n\t\t\tjumpSpeed *= 1 + jumpSpeedLimit\/120;\/\/incrase the falling speed\r\n\t\t}\r\n\t\tmcMain.y += jumpSpeed;\/\/finally, apply jumpSpeed to mcMain\r\n\t\t\/\/if main hits the floor, then stop jumping\r\n\t\tif(mcMain.y >= 387.5){\r\n\t\t\tmainJumping = false;\r\n\t\t\tmcMain.y = 387.5;\r\n\t\t}\r\n\t}\r\n\tif(mcMain.y > 387.5){\r\n\t\tmcMain.y = 387.5;\r\n\t}\r\n}\r\n<\/pre>\n
    I've tried to comment the code as best as I can. Hopefully, you can decipher this code. There is one final thing to do in order to make this code to work, however. In the eFrame()<\/tt> function, run the mainJump()<\/tt> function. Now, if you test the game, you're character should be able to jump!!!<\/p>\n
    Well, this wraps up this part of the tutorial! Next, we'll create \"bells\" to be added to the stage!<\/p>\n
    The Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source .fla File<\/a><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
    Basic Character Programming Programming the “Bells” Level Creation Scoring Finishing Touches Step 1: Basic Character Programming Welcome, people, and get ready for yet another tutorial! In celebration of the winter season, we’re going to make a game like Winter Bells, in ActionScript 3.0. Let us begin, shall we? The basic concept of Winter Bells is […]<\/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":[8,233,235,18,68,234,236,11,232],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1256"}],"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=1256"}],"version-history":[{"count":9,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1256\/revisions"}],"predecessor-version":[{"id":1342,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1256\/revisions\/1342"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1256"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}