{"id":1035,"date":"2009-01-03T08:03:01","date_gmt":"2009-01-03T12:03:01","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1035"},"modified":"2022-05-29T08:23:32","modified_gmt":"2022-05-29T12:23:33","slug":"tutorial-create-a-platform-game-in-as2-part-4","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-platform-game-in-as2-part-4\/","title":{"rendered":"Tutorial: Create a Platform Game in AS2 – Part 4"},"content":{"rendered":"
\n

Table of Contents<\/h3>\n
    \n
  1. Basic Character Programming<\/a><\/li>\n
  2. Creating The Level<\/a><\/li>\n
  3. Programming the Level<\/a><\/li>\n
  4. Adding Level Elements<\/a><\/li>\n
  5. Adding Enemies<\/a><\/li>\n
  6. Goals and Level Completion<\/a><\/li>\n
  7. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 4: Adding Level Elements<\/h3>\n

    In this lesson, we’re going to add elements to the level, like obstacles and ladders. Here’s a list of what we’re going to add:<\/p>\n

      \n
    • Ladders<\/li>\n
    • Bumpers<\/li>\n
    • Trampolines<\/li>\n<\/ul>\n

      Adding Ladders<\/h4>\n

      First on our list is to add ladders. Our ladders are going to be squares just like the blocks, except a different color, yellow. Just create another MovieClip just like the block, except yellow, export it for ActionScript, and name it “mcLadder”. We also have to make an Object that will hold the entire level, including the blockHolder<\/tt>. Within that, we’ll create a Sprite that will hold all of the ladders. Replace the part where we add the blockHolder<\/tt> before the function with this:<\/p>\n

      \n\/\/this empty mc will hold the entire level\n_root.createEmptyMovieClip('lvlHolder', _root.getNextHighestDepth());\n\/\/this empty movieclip will hold all of the blocks\nlvlHolder.createEmptyMovieClip('blockHolder',_root.getNextHighestDepth());\n\/\/this empty mc will hold all of the ladders\nlvlHolder.createEmptyMovieClip('ladderHolder',_root.getNextHighestDepth());\n<\/pre>\n
      Now, we’re going to have to add “lvlHolder.<\/tt>” to the beginning of blockHolder<\/tt> every time we see it. There is an easier way to do this than to just manually type it in. We are going to use the “Find and Replace” feature of Flash. First, press Ctrl+F or Command+F if on a Mac while in the actions panel. In the “Find What:” field, type in “blockHolder”. Then, in the “Replace With:” Field, type in “lvlHolder.blockHolder”. Then, click on “Replace All”.<\/p>\n
      \"Finding<\/center><\/p>\n
      There is only one part where the replacement happened where we didn’t want it, and that’s where we create the empty MovieClip to hold the blocks (~Line 119). Just change it back to:<\/p>\n
      \nlvlHolder.createEmptyMovieClip('blockHolder',_root.getNextHighestDepth());\n<\/pre>\n
      Also, because now it is in the lvlHolder<\/tt>, make it lvlHolder.getNextHighestDepth()<\/tt> instead of using _root<\/tt>. The next thing we have to do is move the lvlHolder<\/tt> instead of blockHolder<\/tt> when an arrow key is pressed down. Hopefully, you know how to do this. Here’s a hint, look in the main onEnterFrame()<\/tt> function.<\/p>\n
      Add this to the createLvl()<\/tt> function, so the ladders are added to the stage:<\/p>\n
      \n else if (lvlArray[i] == 2){\n\tlvlHolder.ladderHolder.attachMovie('mcLadder', 'Ladder'+i,lvlHolder.ladderHolder.getNextHighestDepth());\n\tlvlHolder.ladderHolder['Ladder'+i]._x = (i-(row-1)*lvlColumns)*25;\n\tlvlHolder.ladderHolder['Ladder'+i]._y = (row-1)*25;\n}\n<\/pre>\n
      Now, we have to actually add some functionality to the ladders. The first thing we have to do is add a variable that will tell us if the player is touching a ladder.<\/p>\n
      \n\/\/checking if the guy is on a ladder\nvar mainOnLadder:Boolean = false;\n<\/pre>\n
      Next, we’re going to add a loop that will hit test with the ladders. Add this code to some part of the main onEnterFrame()<\/tt> function:<\/p>\n
      \n\/\/hit testing for ladders\n\tfor(var cLadder:String in lvlHolder.ladderHolder){ \/\/using a for ... in loop again\n\t\tif(mcMain.hitTest(lvlHolder.ladderHolder[cLadder])){\n\t\t\t\/\/checking if main is close enough to climb the ladder\n\t\t\tif(mcMain._x >= lvlHolder.ladderHolder[cLadder]._x + lvlHolder._x - 10){\/\/if close enough on the left\n\t\t\t\t\/\/if close enough on the right\n\t\t\t\tif(mcMain._x <= lvlHolder.ladderHolder[cLadder]._x + lvlHolder._x + 35){\n\t\t\t\t\t\/\/then we can truly say that he's touching a ladder\n\t\t\t\t\tmainOnLadder = true;\n\t\t\t\t\tjumpSpeed = jumpSpeedLimit;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tmainOnLadder = false; \/\/if we don't break, then he won't be on the ladder\n\t}\n<\/pre>\n
      Now, we can't allow the guy to jump if he's on a ladder. Also, we have to make him move up or down depending on what keys are pressed. Add this code near the key checks in the main onEnterFrame<\/tt> function:<\/p>\n
      \n\tif(Key.isDown(38) || Key.isDown(87)){ \/\/the up key or \"W\" key\n\t\t\/\/checking if on ladder\n\t\tif(mainOnLadder){\n\t\t\tmcMain._y -= mainSpeed;\n\t\t}\n\t}\n\tif(Key.isDown(40) || Key.isDown(83)){ \/\/the down key or \"S\" key\n\t\t\/\/checking if on ladder\n\t\tif(mainOnLadder){\n\t\t\tmcMain._y += mainSpeed;\n\t\t}\n\t}\n<\/pre>\n
      We have to do one last thing before the ladders actually work. We have change a few things in the mainJump()<\/tt> function so jumping is not allowed while on a ladder. Do this by adding a && !mainOnLadder<\/tt> to the if and else statement so it looks like this:<\/p>\n
      \nif(!mainJumping){\n\tif(Key.isDown(38) || Key.isDown(87)){\n\t\tif(!mainOnLadder){\n\t\t\t[...OTHER CODE HERE...]\n\t\t}\n\t}\n} else if(!mainOnLadder) {\n<\/pre>\n
      Now, we can change the level code to check if the ladders work:<\/p>\n
      \nvar lvlArray1:Array = new Array(\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,X,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0\n);\n<\/pre>\n
      If you test it out, it should work pretty well. The only problem that I see is that the user is always a layer below the ladder. This can be easily fixed. Just add this to the end of our code:<\/p>\n
      \nmcMain.swapDepths(10000);\n<\/pre>\n
      Now, the character will always appear in front of everything else, unless you decide to add more than 10000 objects to the stage at once, which is highly unlikely.<\/p>\n
      Adding Bumpers<\/h4>\n
      Phew. Now that we're done with the ladders, we can now make the next thing on our list, bumpers. These will just act as a sort of wall that will make the user bounce back when touching it. Yet again, create another MovieClip that's a square, but this time the color green and with the name, mcBumper<\/tt>. Now, of course, we have to have a bumper holder:<\/p>\n
      \n\/\/this empty mc will hold all of the bumpers\nlvlHolder.createEmptyMovieClip('bumperHolder',lvlHolder.getNextHighestDepth());\n<\/pre>\n
      Add this code to the bottom of the createLvl()<\/tt> function's for<\/tt> loop:<\/p>\n
      \nelse if (lvlArray[i] == 3){\n\tlvlHolder.bumperHolder.attachMovie('mcBumper', 'Bumper'+i,lvlHolder.bumperHolder.getNextHighestDepth());\n\tlvlHolder.bumperHolder['Bumper'+i]._x = (i-(row-1)*lvlColumns)*25;\n\tlvlHolder.bumperHolder['Bumper'+i]._y = (row-1)*25;\n}\n<\/pre>\n
      This will just add the bumper to stage. Now, we have to make the main guy bump whenever he touches the bumper. We'll do this similarly to the way that we did the jumping. We first have to define some variables that will help with our bumping:<\/p>\n
      \n\/\/BUMPING VARIABLES\n\/\/if main is being bumped\nvar mainBumping:Boolean = false;\n\/\/how quickly he should be bumped\nvar bumpSpeed:Number = 10;\n<\/pre>\n
      Next, we have to make a function that will run whenever the guy bumps into it:<\/p>\n
      \n\/\/bumping function\nfunction mainBump():Void{\n\t\/\/testing the direction of bump\n\tvar bumpDirection:Number;\n\tif(Key.isDown(37) || Key.isDown(65)){\n\t\tbumpDirection = 1;\n\t} else if (Key.isDown(39) || Key.isDown(68)){\n\t\tbumpDirection = -1;\n\t}\n\tif(mainBumping){\n\t\tlvlHolder._x -= bumpDirection*bumpSpeed;\n\t\tbumpSpeed *= .5;\n\t\tif(bumpSpeed <= 1){\n\t\t\tmainBumping = false;\n\t\t}\n\t}\n}\n<\/pre>\n
      Then, we add this code to the end of the main onEnterFrame()<\/tt> function:<\/p>\n
      \n\/\/hit testing for bumpers\nfor(var cBumper:String in lvlHolder.bumperHolder){\n\t\/\/hit testing with the bumper\n\tif(mcMain.hitTest(lvlHolder.bumperHolder[cBumper])){\n\t\tmainBumping = true;\n\t\tbumpSpeed = 20;\n\t}\n}\n\/\/run mainBump\nmainBump();\n<\/pre>\n
      That's all we need to do for the bumper. If you want to, you can test it out by changing the level code and adding some 3's.<\/p>\n
      Adding Trampolines<\/h4>\n
      The final level element we need is the trampoline. This will just make us jump whenever we touch it. I'm going to make mine green like the bumper, but instead of making it a square, it'll be a half circle shape. Do as we always do and create a half circle that's 25x25 and green, then turn it into a MovieClip, export it for ActionScript, and name it \"mcTramp\". Here we go.<\/p>\n
      First, we have to create a holder for the trampoline, as always:<\/p>\n
      \n\/\/this empty mc will hold all of the trampolines\nlvlHolder.createEmptyMovieClip('trampHolder',lvlHolder.getNextHighestDepth());\n<\/pre>\n
      Then, add this code to the createLvl()<\/tt> function's for<\/tt> loop.<\/p>\n
      \n else if (lvlArray[i] == 4){\n\tlvlHolder.trampHolder.attachMovie('mcTramp', 'Tramp'+i,lvlHolder.trampHolder.getNextHighestDepth());\n\tlvlHolder.trampHolder['Tramp'+i]._x = (i-(row-1)*lvlColumns)*25;\n\tlvlHolder.trampHolder['Tramp'+i]._y = (row-1)*25;\n}\n<\/pre>\n
      If you want, you can change the level code to this in order to test out the trampoline:<\/p>\n
      \nvar lvlArray1:Array = new Array(\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,4,0,0,0,X,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\n\t0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0\n);\n<\/pre>\n
      Now, we have to hit test for the trampoline. Just like before, we can do this by adding this code to the onEnterFrame()<\/tt> function:<\/p>\n
      \n\t\/\/hit testing trampolines\n\tfor(var cTramp:String in lvlHolder.trampHolder){\n\t\tif(mcMain.hitTest(lvlHolder.trampHolder[cTramp])){\n\t\t\t\/\/just make him jump\n\t\t\tmainJumping = true;\n\t\t\tjumpSpeed = jumpSpeedLimit*-1;\n\t\t\tmcMain._y += jumpSpeed;\n\t\t}\n\t}\n<\/pre>\n
      That's probably the easiest of the level elements to make. Also, that finished our list of elements to create. In the next part of our tutorial, we're going to add some enemies!<\/p>\n
      The Final Product<\/h4>\n
      <\/embed><\/object><\/p>\n
      Source .fla File<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      Table of Contents Basic Character Programming Creating The Level Programming the Level Adding Level Elements Adding Enemies Goals and Level Completion Finishing Touches Step 4: Adding Level Elements In this lesson, we’re going to add elements to the level, like obstacles and ladders. Here’s a list of what we’re going to add: Ladders Bumpers Trampolines […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[160,5,7,4,6],"tags":[25,160,7,162,19,18,161,22,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1035"}],"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=1035"}],"version-history":[{"count":6,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1035\/revisions"}],"predecessor-version":[{"id":1192,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1035\/revisions\/1192"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1035"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}