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

    Well, here we are in our first advanced tutorial. This time we’ll be creating a platform game similar to my GlowSticks<\/a> except in ActionScript 3 and coded better. Let’s begin, shall we?<\/p>\n

    Let’s first begin with the basic setup of our game. I’m going to make the background black and the frame rate 24 fps (like in previous tutorials). The first thing to make is our little character. I won’t be too artistic with this one, just a little white circle
    \n\"My
    \nIts dimensions are 25×25 pixels.<\/p>\n

    Next, convert it into a MovieClip and give it an instance name of mcMain<\/tt>. Now, we can add code to move this character.<\/p>\n

    Just create a new “actions” layer and place this code in the first frame:<\/p>\n

    \r\n\/\/These variables will note which keys are down\r\n\/\/We don't need the up or down key just yet\r\n\/\/but we will later\r\nvar leftKeyDown:Boolean = false;\r\nvar upKeyDown:Boolean = false;\r\nvar rightKeyDown:Boolean = false;\r\nvar downKeyDown:Boolean = false;\r\n\/\/the main character's speed\r\nvar mainSpeed:Number = 7;\r\n\r\n\/\/adding a listener to mcMain which will make it move \r\n\/\/based on the key strokes that are down\r\nmcMain.addEventListener(Event.ENTER_FRAME, moveChar);\r\nfunction moveChar(event:Event):void{\r\n\t\/\/if certain keys are down then move the character\r\n\tif(leftKeyDown){\r\n\t\tmcMain.x -= mainSpeed;\r\n\t}\r\n\tif(rightKeyDown){\r\n\t\tmcMain.x += mainSpeed;\r\n\t}\r\n\tif(upKeyDown || mainJumping){\r\n\t\tmainJump();\r\n\t}\r\n}\r\n\r\n\/\/listening for the keystrokes\r\n\/\/this listener will listen for down keystrokes\r\nstage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeysDown);\r\nfunction checkKeysDown(event:KeyboardEvent):void{\r\n\t\/\/making the booleans true based on the keycode\r\n\t\/\/WASD Keys or arrow keys\r\n\tif(event.keyCode == 37 || event.keyCode == 65){\r\n\t\tleftKeyDown = true;\r\n\t}\r\n\tif(event.keyCode == 38 || event.keyCode == 87){\r\n\t\tupKeyDown = true;\r\n\t}\r\n\tif(event.keyCode == 39 || event.keyCode == 68){\r\n\t\trightKeyDown = true;\r\n\t}\r\n\tif(event.keyCode == 40 || event.keyCode == 83){\r\n\t\tdownKeyDown = true;\r\n\t}\r\n}\r\n\/\/this listener will listen for keys being released\r\nstage.addEventListener(KeyboardEvent.KEY_UP, checkKeysUp);\r\nfunction checkKeysUp(event:KeyboardEvent):void{\r\n\t\/\/making the booleans false based on the keycode\r\n\tif(event.keyCode == 37 || event.keyCode == 65){\r\n\t\tleftKeyDown = false;\r\n\t}\r\n\tif(event.keyCode == 38 || event.keyCode == 87){\r\n\t\tupKeyDown = false;\r\n\t}\r\n\tif(event.keyCode == 39 || event.keyCode == 68){\r\n\t\trightKeyDown = false;\r\n\t}\r\n\tif(event.keyCode == 40 || event.keyCode == 83){\r\n\t\tdownKeyDown = false;\r\n\t}\r\n}\r\n<\/pre>\n
    This code will simply make the character move left and right. Now, we have to make the character jump. We’ll accomplish this with a jump function and running it whenever the up key is down. First, we have to define a few variables:<\/p>\n
    \r\n\/\/whether or not the main guy is jumping\r\nvar mainJumping:Boolean = false;\r\n\/\/how quickly should the jump start off\r\nvar jumpSpeedLimit:int = 15;\r\n\/\/the current speed of the jump;\r\nvar jumpSpeed:Number = jumpSpeedLimit;\r\n<\/pre>\n
    Then, we’ll define a function which will make the guy jump. It’ll take some complicated math.<\/p>\n
    \r\n\/\/jumping function\r\nfunction mainJump():void{\r\n\t\/\/if main isn't already jumping\r\n\tif(!mainJumping){\r\n\t\t\/\/then start jumping\r\n\t\tmainJumping = true;\r\n\t\tjumpSpeed = jumpSpeedLimit*-1;\r\n\t\tmcMain.y += jumpSpeed;\r\n\t} else {\r\n\t\t\/\/then continue jumping if already in the air\r\n\t\t\/\/crazy math that I won't explain\r\n\t\tif(jumpSpeed < 0){\r\n\t\t\tjumpSpeed *= 1 - jumpSpeedLimit\/75;\r\n\t\t\tif(jumpSpeed > -jumpSpeedLimit\/5){\r\n\t\t\t\tjumpSpeed *= -1;\r\n\t\t\t}\r\n\t\t}\r\n\t\tif(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){\r\n\t\t\tjumpSpeed *= 1 + jumpSpeedLimit\/50;\r\n\t\t}\r\n\t\tmcMain.y += jumpSpeed;\r\n\t\t\/\/if main hits the floor, then stop jumping\r\n\t\t\/\/of course, we'll change this once we create the level\r\n\t\tif(mcMain.y >= stage.stageHeight - mcMain.height){\r\n\t\t\tmainJumping = false;\r\n\t\t\tmcMain.y = stage.stageHeight - mcMain.height;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    That’s some pretty intense code, eh? And you would have never thought that making a simple platform game would be so intense, right? Well, there’s a reason why this tutorial is labeled “Advanced”.<\/p>\n
    But now, it is time to close up this part of the tutorial. Next time, we’ll create a level with blocks we can walk on!<\/p>\n
    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 1: Basic Character Programming Well, here we are in our first advanced tutorial. This time we’ll be creating a platform game similar to my GlowSticks except in ActionScript 3 and coded […]<\/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\/660"}],"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=660"}],"version-history":[{"count":9,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/660\/revisions"}],"predecessor-version":[{"id":1343,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/660\/revisions\/1343"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=660"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}