{"id":260,"date":"2008-07-31T10:33:17","date_gmt":"2008-07-31T14:33:17","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=260"},"modified":"2022-05-29T08:23:38","modified_gmt":"2022-05-29T12:23:38","slug":"tutorial-create-a-brick-breaker-game-in-as3-part-4","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as3-part-4\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS3 – Part 4"},"content":{"rendered":"
\n

Table of Contents<\/h3>\n
    \n
  1. Coding Paddle Movement<\/a><\/li>\n
  2. Programming the Ball<\/a><\/li>\n
  3. Setting Up the Bricks on Stage<\/a><\/li>\n
  4. Hit Testing the Bricks<\/a><\/li>\n
  5. Creating Levels<\/a><\/li>\n
  6. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 4: Hit Testing the Bricks<\/h3>\n

    Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. But, if you are new to ActionScript 3.0 classes, it’ll be a pretty cool learning experience.<\/p>\n

    First of all, we’re going to have to create a class file for the bricks. This is easy, just go to File->New<\/strong> and select “ActionScript File”.
    \n\"Create<\/p>\n

    Once you’ve created the file, immediately save it as “Brick.as” in the same folder as your .fla file. Then, type the following code in:<\/p>\n

    \r\n\/\/Classes must always be wrapped in a package\r\npackage {\r\n\t\/\/importing display elements that we can use in this class\r\n\timport flash.display.*;\r\n\t\/\/importing flash events that we can use (like ENTER_FRAME)\r\n\timport flash.events.*;\r\n\t\r\n\t\/\/defining the class name and saying that it\r\n\t\/\/extends the MovieClip class, meaning that it has the same\r\n\t\/\/properties as a movieclip\r\n\tpublic class Brick extends MovieClip {\r\n\t\t\/\/all classes must have a function that runs every time\r\n\t\t\/\/an instance of the class is put on stage\r\n\t\tpublic function Brick(){\r\n\t\t\t\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    This is a skeleton of what most ActionScript classes will look like. Although making a class is not necessary for this small game, it will definitely help if you want to expand your game. In order the use the class file in your game, you must import it first, so add this code to the first line of the first frame of your main flash file.<\/p>\n
    \r\n\/\/IMPORTS\r\nimport Brick;\r\n<\/pre>\n
    We also have to change our previous brick MovieClip, mcBrick<\/tt>, to the class, Brick. This way, all of the code we place into Brick.as will be used in the Brick MovieClip. <\/p>\n
    So, right click the mcBrick MovieClip in your library and click on linkage. This window will pop up.
    \n\"The<\/p>\n
    Now, find where it says “Class” (it’s going to be highlighted), and set it from “mcBrick” to “Brick”. Now, we have a class. Of course, now we’re going to have to change the makeLvl()<\/tt> function slightly. Now we don’t add “mcBrick” to the stage, but just “Brick”. Just change the following:<\/p>\n
    \r\nvar brick:MovieClip = new mcBrick();\r\n<\/pre>\n
    to:<\/p>\n
    \r\nvar brick:Brick = new Brick();\r\n<\/pre>\n
    If you test it out, it will work out exactly the same as before. Now, we add code to “Brick.as”. Let’s go. <\/p>\n
    We can’t access the root level of the document through the Brick()<\/tt> function, so we’re going to add two listeners to it.<\/p>\n
    \r\npublic function Brick(){\r\n\t\/\/Code that will be run when the brick is added to the stage\r\n\taddEventListener(Event.ADDED, beginClass);\r\n\t\/\/Enter frame code\r\n\taddEventListener(Event.ENTER_FRAME, enterFrameEvents);\r\n}\r\n<\/pre>\n
    Next, we define those two functions.<\/p>\n
    \r\n\/\/private function are just functions that you can't access\r\n\/\/from the main timeline, but only within the class itself\r\nprivate function beginClass(event:Event):void{\r\n\t\r\n}\r\nprivate function enterFrameEvents(event:Event):void{\r\n\t\r\n}\r\n<\/pre>\n
    In order to access the main timeline, we have to type in MovieClip(root)<\/tt>. But, this is quite a bit of typing, so we can shorten it by putting it into a variable. Because I’m guessing that most of you have used ActionScript 2.0 before, I’m going to call this variable _root<\/tt>. Because this variable is non-existent in AS3, we can define it as anything. In this case, it actually will be the root of the document. Place this code after the class definition:<\/p>\n
    \r\npublic class Brick extends MovieClip {\r\n\t\/\/The main timeline!\r\n\tprivate var _root:MovieClip;\r\n\/\/etc etc etc\r\n<\/pre>\n
    Then, we can define the variable within the beginClass()<\/tt> function:<\/p>\n
    \r\n\/\/defining _root as the document root\r\n_root = MovieClip(root);\r\n<\/pre>\n
    Now, we can easily access the main timeline within the class. Go on, test it out. Make a trace statement or two.<\/p>\n
    Now, let’s make some hit testing, eh?<\/p>\n
    \r\nprivate function enterFrameEvents(event:Event):void{\r\n\t\/\/hit testing with the ball\r\n\tif(this.hitTestObject(_root.mcBall)){\r\n\t\t\/\/making the ball bounce off vertically\r\n\t\t_root.ballYSpeed *= -1;\r\n\t\t\/\/destroying this brick\r\n\t\tthis.parent.removeChild(this);\r\n\t\t\/\/stop running this code\r\n\t\tremoveEventListener(Event.ENTER_FRAME, enterFrameEvents);\r\n\t}\r\n}\r\n<\/pre>\n
    This will make the ball bounce off and destroy the brick every time it touches it. Pretty cool, right? Well, that’s all for this part of the tutorial. Next, we’re going to make more levels and add a win\/lose system!<\/p>\n
    Final Code for Main Flash File Frame 1:<\/h4>\n
    \r\n\/\/IMPORTS\r\nimport Brick;\r\n\/\/Current level player is on\r\nvar currentLvl:int = 1;\r\n\/\/The array code for lvl 1\r\nvar lvl1Code:Array = new Array(1,1,1,1,1,1,1);\r\n\/\/The array that contains all of the level codes\r\nvar lvlArray:Array = new Array(lvl1Code);\r\n<\/pre>\n
    Final Code for Main Flash File Frame 2:<\/h4>\n
    \r\nstop();\r\n\/\/VARIABLES\r\n\/\/These variables are needed for moving the ball\r\nvar ballXSpeed:Number = 8; \/\/X Speed of the Ball\r\nvar ballYSpeed:Number = 8; \/\/Y Speed of the Ball\r\n\/\/First I defined a function where all of\r\n\/\/the code needed to start the game is placed\r\n\/\/This includes listeners, variable definitions, and other stuff\r\nfunction beginCode():void{\r\n\t\/\/Adds a listener to the paddle which \r\n\t\/\/runs a function every time a frame passes\r\n\tmcPaddle.addEventListener(Event.ENTER_FRAME, movePaddle);\r\n\t\/\/Adds a listener to the ball which\r\n\t\/\/runs a function every time a frame passes\r\n\tmcBall.addEventListener(Event.ENTER_FRAME, moveBall);\r\n\t\/\/making the level\r\n\tmakeLvl();\r\n}\r\n\r\nfunction movePaddle(event:Event):void{\r\n\t\/\/The paddle follows the mouse\r\n\tmcPaddle.x = mouseX - mcPaddle.width \/ 2;\r\n\t\/\/Keeping the paddle in the stage\r\n\t\r\n\t\/\/If the mouse goes off too far to the left\r\n\tif(mouseX < mcPaddle.width \/ 2){\r\n\t\t\/\/Keep the paddle on stage\r\n\t\tmcPaddle.x = 0;\r\n\t}\r\n\t\/\/If the mouse goes off too far to the right\r\n\tif(mouseX > stage.stageWidth - mcPaddle.width \/ 2){\r\n\t\t\/\/Keep the paddle on stage\r\n\t\tmcPaddle.x = stage.stageWidth - mcPaddle.width;\r\n\t}\r\n}\r\n\r\nfunction moveBall(event:Event):void{\r\n\t\/\/Code for moving ball goes here\r\n\tmcBall.x += ballXSpeed; \/\/Move the ball horizontally\r\n\tmcBall.y += ballYSpeed; \/\/Move the ball vertically\r\n\t\/\/Bouncing the ball off of the walls\r\n\tif(mcBall.x >= stage.stageWidth-mcBall.width){\r\n\t\t\/\/if the ball hits the right side\r\n\t\t\/\/of the screen, then bounce off\r\n\t\tballXSpeed *= -1;\r\n\t}\r\n\tif(mcBall.x <= 0){\r\n\t\t\/\/if the ball hits the left side\r\n\t\t\/\/of the screen, then bounce off\r\n\t\tballXSpeed *= -1;\r\n\t}\r\n\tif(mcBall.y >= stage.stageHeight-mcBall.height){\r\n\t\t\/\/if the ball hits the bottom\r\n\t\t\/\/then bounce up\r\n\t\tballYSpeed *= -1;\r\n\t}\r\n\tif(mcBall.y <= 0){\r\n\t\t\/\/if the ball hits the top\r\n\t\t\/\/then bounce down\r\n\t\tballYSpeed *= -1;\r\n\t}\r\n\t\/\/Hitting the paddle\r\n\tif(mcBall.hitTestObject(mcPaddle)){\r\n\t\tcalcBallAngle();\r\n\t}\r\n}\r\n\r\nfunction calcBallAngle():void{\r\n\t\/\/ballPosition is the position of the ball is on the paddle\r\n\tvar ballPosition:Number = mcBall.x - mcPaddle.x;\r\n\t\/\/hitPercent converts ballPosition into a percent\r\n\t\/\/All the way to the left is -.5\r\n\t\/\/All the way to the right is .5\r\n\t\/\/The center is 0\r\n\tvar hitPercent:Number = (ballPosition \/ (mcPaddle.width - mcBall.width)) - .5;\r\n\t\/\/Gets the hitPercent and makes it a larger number so the\r\n\t\/\/ball actually bounces\r\n\tballXSpeed = hitPercent * 10;\r\n\t\/\/Making the ball bounce back up\r\n\tballYSpeed *= -1;\r\n}\r\n\r\nfunction makeLvl():void{ \/\/Places bricks onto Level\r\n\t\/\/finding the array length of the lvl code\r\n\t\r\n\t\/\/The index has to be currentLvl-1 because:\r\n\t\/\/array indexes start on 0 and our lvl starts at 1\r\n\t\/\/our level will always be 1 higher than the actual index of the array\r\n\tvar arrayLength:int = lvlArray[currentLvl-1].length;\r\n\t\/\/the current row of bricks we are creating\r\n\tvar brickRow:int = 0;\r\n\t\/\/Now, creating a loop which places the bricks onto the stage\r\n\tfor(var i:int = 0;i\n
    Final Code for Brick.as<\/h4>\n
    \r\n\/\/Classes must always be wrapped in a package\r\npackage {\r\n\t\/\/importing display elements that we can use in this class\r\n\timport flash.display.*;\r\n\timport flash.events.*;\r\n\t\r\n\t\/\/defining the class name and saying that it\r\n\t\/\/extends the MovieClip class, meaning that it has the same\r\n\t\/\/properties as a movieclip\r\n\tpublic class Brick extends MovieClip {\r\n\t\t\/\/The main timeline!\r\n\t\tprivate var _root:MovieClip;\r\n\t\t\/\/all classes must have a function that runs every time\r\n\t\t\/\/an instance of the class is put on stage\r\n\t\tpublic function Brick(){\r\n\t\t\t\/\/Code that will be run when the brick is added to the stage\r\n\t\t\taddEventListener(Event.ADDED, beginClass);\r\n\t\t\t\/\/Enter frame code\r\n\t\t\taddEventListener(Event.ENTER_FRAME, enterFrameEvents);\r\n\t\t}\r\n\t\t\/\/private function are just functions that you can't access\r\n\t\t\/\/from the main timeline, but only within the class itself\r\n\t\tprivate function beginClass(event:Event):void{\r\n\t\t\t\/\/defining _root as the document root\r\n\t\t\t_root = MovieClip(root);\r\n\t\t}\r\n\t\tprivate function enterFrameEvents(event:Event):void{\r\n\t\t\t\/\/hit testing with the ball\r\n\t\t\tif(this.hitTestObject(_root.mcBall)){\r\n\t\t\t\t\/\/making the ball bounce off vertically\r\n\t\t\t\t_root.ballYSpeed *= -1;\r\n\t\t\t\t\/\/destroying this brick\r\n\t\t\t\tthis.parent.removeChild(this);\r\n\t\t\t\t\/\/stop running this code\r\n\t\t\t\tremoveEventListener(Event.ENTER_FRAME, enterFrameEvents);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    The Final Product:<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source Files (Zipped)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Table of Contents Coding Paddle Movement Programming the Ball Setting Up the Bricks on Stage Hit Testing the Bricks Creating Levels Finishing Touches Step 4: Hit Testing the Bricks Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. But, if you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,65,4,6],"tags":[25,8,14,66,26,67,19,18,22],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/260"}],"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=260"}],"version-history":[{"count":11,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":369,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/260\/revisions\/369"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}