{"id":716,"date":"2008-08-30T08:04:25","date_gmt":"2008-08-30T12:04:25","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=716"},"modified":"2022-05-29T08:23:35","modified_gmt":"2022-05-29T12:23:35","slug":"tutorial-create-a-platform-game-in-as3-part-5","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-platform-game-in-as3-part-5\/","title":{"rendered":"Tutorial: Create a Platform Game in AS3 &#8211; Part 5"},"content":{"rendered":"<div class=\"toc\">\n<h3>Table of Contents<\/h3>\n<ol>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3\">Basic Character Programming<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-2\">Creating The Level<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-3\">Programming the Level<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-4\">Adding Level Elements<\/a><\/li>\n<li class=\"c_chap\"><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-5\">Adding Enemies<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-6\">Goals and Level Completion<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-platform-game-in-as3-part-7\">Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n<h3>Step 5: Adding Enemies<\/h3>\n<p>The next step in making our exciting platform game is to add some enemies! In order to do this, we&#8217;re first going to have to make an <tt>Enemy<\/tt> class. We can do this by creating an external ActionScript file and naming it Enemy.as. Then, place the following code into the file. It&#8217;ll be similar to the &#8220;Block.as&#8221; file that we made earlier.<\/p>\n<pre lang=\"actionscript\">\r\npackage{\r\n\timport flash.display.Sprite;\r\n\timport flash.display.MovieClip;\r\n\timport flash.display.Shape;\r\n\timport flash.display.DisplayObject;\r\n\timport flash.events.*;\r\n\t\r\n\t\/\/sprites are just movieclips without any frames in them\r\n\tpublic class Enemy extends Sprite{\r\n\t\t\/\/_root will signify the root of the document\r\n\t\tprivate var _root:Object;\r\n\t\t\/\/how quickly the enemy can move\r\n\t\tprivate var speed:Number;\r\n\t\t\/\/-1 is left, 1 is right\r\n\t\tprivate var direction:int;\r\n\t\t\r\n\t\tpublic function Enemy(){\r\n\t\t\t\/\/this code will only be run once\r\n\t\t\taddEventListener(Event.ADDED, beginClass);\r\n\t\t\t\/\/this code will constantly be run\r\n\t\t\taddEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t}\r\n\t\t\r\n\t\tprivate function beginClass(event:Event):void{\r\n\t\t\t\/\/defining the root of the document\r\n\t\t\t_root = MovieClip(root);\r\n\t\t\t\/\/defining the movement variables of the enemy\r\n\t\t\tspeed = 5;\r\n\t\t\tdirection = 1;\r\n\t\t\t\/\/drawing the enemy (it'll be a red circle)\r\n\t\t\tthis.graphics.beginFill(0xFF0000,1);\r\n\t\t\tthis.graphics.drawCircle(12.5,12.5,12.5);\r\n\t\t}\r\n\t\t\r\n\t\tprivate function eFrame(event:Event):void{\r\n\t\t\t\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>All this code does is add the enemy to the stage and make it into a red ball. Before we actually add the <tt>enterFrame<\/tt> programming to it, I want to first add some code to the main timeline. This code will just add the enemy to stage and also some markers which will tell the enemy when to turn around. Add the following to the for loop in the <tt>createLvl()<\/tt> function:<\/p>\n<pre lang=\"actionscript\">\r\nif (lvlArray[i] == 5){\r\n\t\/\/adding an enemy\r\n\tnewPlacement = new Enemy();\r\n\tenemyHolder.addChild(newPlacement);\r\n} else if (lvlArray[i] == 6){\r\n\t\/\/adding an invisible marker for the enemy to turn around\r\n\tnewPlacement = new Shape();\r\n\tnewPlacement.graphics.beginFill(0x000000,0);\r\n\tnewPlacement.graphics.drawRect(0,0,25,25);\r\n\tinvisMarkerHolder.addChild(newPlacement);\r\n}\r\n<\/pre>\n<p>Of course, we&#8217;re going to have to add both an <tt>invisMarkerHolder<\/tt> and an <tt>enemyHolder<\/tt>. Hopefully, you can do this on your own. Just do the exact same thing we did with the other holders except with that name. Next, change the level array to this:<\/p>\n<pre lang=\"actionscript\">\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,6,0,0,0,0,0,5,0,0,0,0,6,0,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,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,\r\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,\r\n\t0,0,0,0,4,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,\r\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,\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,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<p>We can now add some real programming to the Enemy. Add the following code to the <tt>eFrame()<\/tt> function in Enemy.as:<\/p>\n<pre lang=\"actionscript\">\r\nprivate function eFrame(event:Event):void{\r\n\t\/\/MOVING THE ENEMY\r\n\tthis.x += speed * direction;\r\n\t\/\/checking if touching any invisible markers\r\n\tfor(var i:int=0;i<_root.invisMarkerHolder.numChildren;i++){\r\n\t\t\/\/the process is very similar to the main guy's testing with other elements\r\n\t\tvar targetMarker:DisplayObject = _root.invisMarkerHolder.getChildAt(i);\r\n\t\tif(hitTestObject(targetMarker)){\r\n\t\t\tdirection *= -1;\r\n\t\t\tthis.x += speed * direction;\r\n\t\t}\r\n\t}\r\n\t\/\/TOUCHING THE MAIN CHARACTER\r\n\tif(this.hitTestObject(_root.mcMain)){\r\n\t\t\/\/if it touches the main guy while he's jumping\r\n\t\t\/\/and the guy is falling down, not jumping up\r\n\t\tif(_root.mainJumping &#038;&#038; _root.jumpSpeed > 0){\r\n\t\t\t\/\/kill this guy\r\n\t\t\tthis.parent.removeChild(this);\r\n\t\t\t\/\/and remove listners\r\n\t\t\tthis.removeEventListener(Event.ENTER_FRAME, eFrame);\r\n\t\t} else {\r\n\t\t\t\/\/otherwise, kill the main character\r\n\t\t\t\/\/we don't have any death frame yet, so we'll make it later\r\n\t\t\t\/\/and we'll add a trace statement\r\n\t\t\ttrace('OH NO! You died!');\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>Test it out. You should see a red circle moving around the platform above where you start off. If you touch it, a trace statement should be called. If you jump on it, the enemy should disappear. Pretty nifty, eh? The next thing we have to do is to make a function that will reset the game whenever the main guy dies. Add this code to the main timeline:<\/p>\n<pre lang=\"actionscript\">\r\n\/\/resets the level\r\nfunction resetLvl():void{\r\n\tfor(var i:int=0;i<lvlHolder.numChildren;i++){\r\n\t\t\/\/selecting the current container\r\n\t\tvar currentContainer = lvlHolder.getChildAt(i);\r\n\t\t\/\/and deleting all of it's contents\r\n\t\twhile(currentContainer.numChildren > 0){\r\n\t\t\tfor(var i2:int = 0;i2<currentContainer.numChildren;i2++){\r\n\t\t\t\tcurrentContainer.removeChildAt(i2);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t\/\/then we remake the lvl and reset the lvlHolder\r\n\tlvlHolder.x = 0;\r\n\tcreateLvl();\r\n}\r\n<\/pre>\n<p>Now, we have to run this function whenever the main guy runs off of the stage or touches the enemy. I'm going to leave it up to you to figure that out. Of course, there are always the source files if you need them.<\/p>\n<p>Well, that's basically it for enemy creation. Join us next time when we actually make this thing into a game!<\/p>\n<h4>The Final Product<\/h4>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"550\" height=\"400\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/mrsunstudios.com\/obj\/tuts\/platform-as3\/pt5\/source.swf\" \/><embed type=\"application\/x-shockwave-flash\" width=\"550\" height=\"400\" src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/platform-as3\/pt5\/source.swf\"><\/embed><\/object><\/p>\n<p><a href=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/platform-as3\/pt5\/source.zip\">Source Files (zipped)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents Basic Character Programming Creating The Level Programming the Level Adding Level Elements Adding Enemies Goals and Level Completion Finishing Touches Step 5: Adding Enemies The next step in making our exciting platform game is to add some enemies! In order to do this, we&#8217;re first going to have to make an Enemy [&hellip;]<\/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\/716"}],"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=716"}],"version-history":[{"count":3,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/716\/revisions"}],"predecessor-version":[{"id":740,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/716\/revisions\/740"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=716"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}