{"id":675,"date":"2008-08-30T08:02:24","date_gmt":"2008-08-30T12:02:24","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=675"},"modified":"2022-05-29T08:23:35","modified_gmt":"2022-05-29T12:23:35","slug":"tutorial-create-a-platform-game-in-as3-part-3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-platform-game-in-as3-part-3\/","title":{"rendered":"Tutorial: Create a Platform Game in AS3 – Part 3"},"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 3: Programming the Level<\/h3>\n

    Now that we’ve set up all of the blocks onto the stage, we can actually add some code to them. The first thing we’re going to do is to make it so the blocks are the only thing that the main guy can stand on. Replace this code in the mainJump()<\/tt> function:<\/p>\n

    \r\n\/\/if main hits the floor, then stop jumping\r\n\/\/of course, we'll change this once we create the level\r\nif(mcMain.y >= stage.stageHeight - mcMain.height){\r\n\tmainJumping = false;\r\n\tmcMain.y = stage.stageHeight - mcMain.height;\r\n}\r\n<\/pre>\n
    With this:<\/p>\n
    \r\n\/\/if main hits a block, then stop jumping\r\n\/\/this loop will check a hit test with any block\r\nfor(var i:int = 0;i\n
    Now, we have to make the character fall when he isn't on a block. First, define a variable, mainOnGround<\/tt> at the top, and set it as a false boolean. Then, set it to true if mcMain<\/tt> hits a block in the mainJump()<\/tt> function. Hopefully, I don't have to walk you through this one. Next, add the following code to moveChar()<\/tt>:<\/p>\n
    \r\n\/\/checking if he isn't on ground\r\n\/\/run the loop checking if he's touching any blocks again\r\nfor(var i:int = 0;i\n
    The next thing we're going to do is make the guy bounce off of the bricks if he hits them below. Otherwise, he'd somehow get on top of the bricks from below, which we don't want. To do this, we're going to have to change the for<\/tt> loop in the mainJump()<\/tt> function. Here's what you should replace it with:<\/p>\n
    \r\nfor(var i:int = 0;i 0){\r\n\t\t\t\/\/stop jumping\r\n\t\t\tmainJumping = false;\r\n\t\t\t\/\/and set the guys coordinates to be on top of the block\r\n\t\t\tmcMain.y = hitBlock.y - mcMain.height;\r\n\t\t\t\/\/he's on solid ground\r\n\t\t\tmainOnGround = true;\r\n\t\t\t\/\/break out of the loop\r\n\t\t\tbreak;\r\n\t\t} else {\r\n\t\t\tjumpSpeed = Math.abs(jumpSpeed);\r\n\t\t\t\/\/making the main guy get away from the block\r\n\t\t\tmcMain.y = hitBlock.y + hitBlock.height + 1;\r\n\t\t}\r\n\t\t\r\n\t}\r\n}\r\n<\/pre>\n
    Now, if you test it out, the guy bounces when hitting the block. Now, the last thing we're going to do is make the background move with the character if he moves too far to the left or right. In order to do this, I'm going to change around lvlArray1<\/tt> so the changes are more necessary. Here's what I'll change it to:<\/p>\n
    \r\nvar lvlArray1:Array = new Array(\r\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,\r\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,\r\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,\r\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,\r\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,\r\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,\r\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,\r\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,\r\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,\r\n\t0,0,0,0,0,0,0,0,0,0,0,0,0,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,\r\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,\r\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,\r\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,\r\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,\r\n\t0,0,X,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\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\r\n);\r\n<\/pre>\n
    Now, we have to edit the createLvl<\/tt> function first it centers the main character and actually makes this code work. Replace the current function with this code:<\/p>\n
    \r\nfunction createLvl():void{\r\n\t\/\/getting the current level that we are on\r\n\tvar lvlArray:Array = MovieClip(root)['lvlArray'+lvlCurrent];\r\n\t\/\/we have to find how far this level goes\r\n\t\/\/this will be used so we know when to move to the next row\r\n\t\/\/there will always be 16 rows, so this is how we find it out\r\n\t\/\/of course, this will make the lvl formatting very strict\r\n\tvar lvlColumns:int = Math.ceil(lvlArray.length\/16);\r\n\t\/\/now we must create the level\r\n\tfor(var i:int = 0;i\n
    This code makes me very happy. The screen will now center on the main character in every level, no matter where you place him. Next, we want the actual background to move instead of the character when he moves so we can keep track of him at all times. This'll be easy. In the moveChar()<\/tt> function, replace:<\/p>\n
    \r\nif(leftKeyDown){\r\n\tmcMain.x -= mainSpeed;\r\n}\r\nif(rightKeyDown){\r\n\tmcMain.x += mainSpeed;\r\n}\r\n<\/pre>\n
    with this:<\/p>\n
    \r\nif(leftKeyDown){\r\n\tblockHolder.x += mainSpeed;\r\n}\r\nif(rightKeyDown){\r\n\tblockHolder.x -= mainSpeed;\r\n}\r\n<\/pre>\n
    Pretty easy, eh? Now there's only one problem I want to fix before I end this lesson. The character doesn't really jump high enough. So, we're just going to recode this part a bit:<\/p>\n
    \r\n\/\/then continue jumping if already in the air\r\n\/\/crazy math that I won't explain\r\nif(jumpSpeed < 0){\r\n\tjumpSpeed *= 1 - jumpSpeedLimit\/75;\r\n\tif(jumpSpeed > -jumpSpeedLimit\/5){\r\n\t\tjumpSpeed *= -1;\r\n\t}\r\n}\r\nif(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){\r\n\tjumpSpeed *= 1 + jumpSpeedLimit\/50;\r\n}\r\nmcMain.y += jumpSpeed;\r\n<\/pre>\n
    Replace it with this code:<\/p>\n
    \r\n\/\/then continue jumping if already in the air\r\n\/\/crazy math that I won't explain\r\nif(jumpSpeed < 0){\r\n\tjumpSpeed *= 1 - jumpSpeedLimit\/125;\r\n\tif(jumpSpeed > -jumpSpeedLimit\/5){\r\n\t\tjumpSpeed *= -1;\r\n\t}\r\n}\r\nif(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){\r\n\tjumpSpeed *= 1 + jumpSpeedLimit\/50;\r\n}\r\nmcMain.y += jumpSpeed;\r\n<\/pre>\n
    Also, change the jumpSpeedLimit<\/tt> to 20, eh?<\/p>\n
    Now, we're done with the intense block programming. Next lesson, we'll add some stuff to the level, like ladders and other obstacles. We also have to make it so that when we run into a wall, we're stopped by it. Stay tuned...<\/p>\n
    Final Product<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source Files (zipped)<\/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 3: Programming the Level Now that we’ve set up all of the blocks onto the stage, we can actually add some code to them. The first thing we’re going to do […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[160,5,8,4,6],"tags":[25,160,8,162,19,18,161,22,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/675"}],"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=675"}],"version-history":[{"count":6,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":738,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/738"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}