{"id":1268,"date":"2009-01-07T08:02:32","date_gmt":"2009-01-07T12:02:32","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1268"},"modified":"2022-05-29T08:23:32","modified_gmt":"2022-05-29T12:23:32","slug":"tutorial-create-a-game-like-winter-bells-in-as3-part-2","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-game-like-winter-bells-in-as3-part-2\/","title":{"rendered":"Tutorial: Create a Game Like Winter Bells in AS3 – Part 2"},"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 2: Programming the “Bells”<\/h3>\n

    Let’s get right to it. In this part of the tutorial, we’re going to add the “bells” to the stage. They’ll be 100% randomized so we can continue playing the game forever (You’d like that, wouldn’t you?). Anyway, we first have to create a new MovieClip to symbolize the bell. Because I ain’t the greatest artist, mine is going to be a 25×25 square. When you convert it into a MovieClip called mcBell<\/tt>, also Export it for ActionScript with a class of Bell<\/tt>, so we can add it to the stage through ActionScript.<\/p>\n

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

    Do the same thing we did with mcMain<\/tt> and set it to be the precise center of the MovieClip.<\/p>\n

    Now, we can add some intense actions. Are you ready? Let’s first define some variables at the top of the stage:<\/p>\n

    \r\nvar bellTime:int = 0;\/\/how many frames have elapsed since the last bell was made\r\nvar bellLimit:int = 20;\/\/how many frames it takes to create a new bell\r\nvar bellTop:Number = -50;\/\/the y coordinate that it'll have when we add it to stage\r\nvar bellTotal:int = 0;\/\/how many bells have already been added to stage\r\nvar bellLastCoord:Number = 0;\/\/the x value of the previous bell\r\n<\/pre>\n
    I’ve explained in detail which variable does what. Now, add this function to the bottom of the code:<\/p>\n
    \r\nvar bellHolder:MovieClip = new MovieClip();\/\/creating a MovieClip that will hold all the bells\r\naddChild(bellHolder);\/\/add this MovieClip to the stage\r\nfunction makeLvl():void{\/\/this function will add bells to the stage\r\n\tbellTime ++;\/\/increment the time\r\n\tif(bellTime >= bellLimit){\/\/if the time for bell creation has been reached\r\n\t\tbellTotal ++;\/\/increase the amount of bells created\r\n\t\tvar newBell:Bell = new Bell();\/\/create a new bell instance\r\n\t\tbellHolder.addChild(newBell);\/\/and add it to bellHolder\r\n\t\tbellTime = 0;\/\/reset the time for another creation\r\n\t}\r\n}\r\n<\/pre>\n
    Now, run the makeLvl()<\/tt> function in the eFrame()<\/tt> function. Next, we have to create an external ActionScript file for the Bell<\/tt> class. Go to File -> New…<\/strong> and select “ActionScript File”. Save it in the same folder as your .fla file as “Bell.as”. Now, place this code into it:<\/p>\n
    \r\npackage{\r\n\timport flash.display.MovieClip;\r\n\timport flash.events.*;\r\n\tpublic class Bell extends MovieClip {\r\n\t\t\r\n\t\tvar _root:Object;\/\/this will symbolize the main timeline\r\n\t\t\r\n\t\tpublic function Bell() {\r\n\t\t\taddEventListener(Event.ADDED, beginClass);\r\n\t\t\taddEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t}\r\n\t\t\r\n\t\tprivate function beginClass(e:Event):void{\r\n\t\t\t_root = MovieClip(root);\r\n\t\t\t\r\n\t\t\tif(_root.bellTotal == 1){\/\/if it's the first bell created\r\n\t\t\t\tthis.x = Math.random()*525;\/\/place it in a random spot on the stage\r\n\t\t\t\t_root.bellLastCoord = this.x;\r\n\t\t\t} else {\/\/otherwise, \r\n\t\t\t\t\/\/In order to keep the next bell from being too far away from the previous bell, place it up to 250px away\r\n\t\t\t\tthis.x = _root.bellLastCoord + (Math.random()*500)-250;\r\n\t\t\t\tif(this.x > 537.5){\/\/if it is off the stage to the right\r\n\t\t\t\t\tthis.x -= 250;\/\/set it inside the stage\r\n\t\t\t\t} else if (this.x < 12.5){\/\/same with too far left\r\n\t\t\t\t\tthis.x += 250;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis.y = _root.bellTop;\/\/set the y's value off the stage\r\n\t\t}\r\n\t\tprivate function eFrame(e:Event):void{\r\n\t\t\tthis.y += 3;\/\/move the bell slowly downwards\r\n\t\t\tif(this.hitTestObject(_root.mcMain)){\/\/if this touches the main character\r\n\t\t\t\t_root.mainJumping = true;\/\/make him jump\r\n\t\t\t\t_root.jumpSpeed = _root.jumpSpeedLimit*-1;\/\/reset the jumpSpeed\r\n\t\t\t\t\r\n\t\t\t\tthis.removeEventListener(Event.ENTER_FRAME, eFrame);\/\/remove the listeners\r\n\t\t\t\t_root.bellHolder.removeChild(this);\/\/and finally remove him from the stage\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    That's some pretty intense code, eh? Now, if you've ever played Winter Bells<\/a>, you should know that the greatest point booster of the game is the bird that doubles the score. We're going to create one of those in our game as well. It'll be very similar to the Bell<\/tt>, so don't worry.<\/p>\n
    First of all, let's create a \"bird\" MovieClip, eh? Mine is simply going to be a sideways triangle pointing right that is 25px wide and 12.5px high. I guess those are pretty good dimensions. Next, convert it into a MovieClip and Export it for ActionScript as Bird<\/tt>.<\/p>\n
    Now, let's add some actions to this birdy. Add this code to the bottom of the makeLvl()<\/tt> function:<\/p>\n
    \r\n\/\/every 20 bells, we'll create a bird, not including the first one\r\nif(int(bellTotal\/20) == bellTotal\/20 && bellTime == 1 && bellTotal != 0){\r\n\tvar newBird:Bird = new Bird();\r\n\tbellHolder.addChild(newBird);\r\n}\r\n<\/pre>\n
    Next, we'll create a Bird<\/tt> class, same as we did for the Bell<\/tt>. Create a new ActionScript File and name it \"Bird.as\". Now, place this code into it:<\/p>\n
    \r\npackage{\r\n\timport flash.display.MovieClip;\r\n\timport flash.events.*;\r\n\tpublic class Bird extends MovieClip {\r\n\t\t\r\n\t\tvar _root:Object;\/\/this will symbolize the main timeline\r\n\t\tvar speed:int = 5;\/\/how fast this bird will move side to side\r\n\t\t\r\n\t\tpublic function Bird() {\r\n\t\t\taddEventListener(Event.ADDED, beginClass);\r\n\t\t\taddEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t}\r\n\t\t\r\n\t\tprivate function beginClass(e:Event):void{\r\n\t\t\t_root = MovieClip(root);\r\n\t\t\t\r\n\t\t\tthis.x = -50;\/\/setting x value off the stage\r\n\t\t\tthis.y = _root.bellTop;\/\/set the y value off the stage\r\n\t\t}\r\n\t\tprivate function eFrame(e:Event):void{\r\n\t\t\tthis.y += 3;\/\/move the bell slowly downwards\r\n\t\t\t\r\n\t\t\tthis.x += speed;\/\/moving this guy based on it's speed\r\n\t\t\tif(this.x >= 537.5){\/\/if it goes too far right\r\n\t\t\t\tspeed = -5;\/\/make it go backwards\r\n\t\t\t\tscaleX = -1;\/\/and turn it around\r\n\t\t\t}\r\n\t\t\tif(this.x <= 12.5){\/\/same with too far left\r\n\t\t\t\tspeed = 5;\r\n\t\t\t\tscaleX = 1;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tif(this.hitTestObject(_root.mcMain)){\/\/if this touches the main character\r\n\t\t\t\t_root.mainJumping = true;\/\/make him jump\r\n\t\t\t\t_root.jumpSpeed = _root.jumpSpeedLimit*-1;\/\/reset the jumpSpeed\r\n\t\t\t\t\r\n\t\t\t\tthis.removeEventListener(Event.ENTER_FRAME, eFrame);\/\/remove the listeners\r\n\t\t\t\t_root.bellHolder.removeChild(this);\/\/and finally remove him from the stage\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    It's basically the same thing we did for the bell, except now it moves from side to side.<\/p>\n
    Well, here concludes the 2nd part of the tutorial. Next time, we'll make this level playable.<\/p>\n
    The Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source Files (zipped)<\/a><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
    Basic Character Programming Programming the “Bells” Level Creation Scoring Finishing Touches Step 2: Programming the “Bells” Let’s get right to it. In this part of the tutorial, we’re going to add the “bells” to the stage. They’ll be 100% randomized so we can continue playing the game forever (You’d like that, wouldn’t you?). Anyway, we […]<\/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\/1268"}],"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=1268"}],"version-history":[{"count":4,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1268\/revisions"}],"predecessor-version":[{"id":1341,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1268\/revisions\/1341"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1268"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}