{"id":357,"date":"2008-08-01T11:00:48","date_gmt":"2008-08-01T15:00:48","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=357"},"modified":"2022-05-29T08:23:38","modified_gmt":"2022-05-29T12:23:38","slug":"tutorial-create-a-brick-breaker-game-in-as3-part-6","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as3-part-6\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS3 &#8211; Part 6"},"content":{"rendered":"<div class=\"toc\">\n<h3>Table of Contents<\/h3>\n<ol>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/07\/tutorial-create-a-brick-breaker-game-in-as3\">Coding Paddle Movement<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/07\/tutorial-create-a-brick-breaker-game-in-as3-part-2\">Programming the Ball<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/07\/tutorial-create-a-brick-breaker-game-in-as3-part-3\">Setting Up the Bricks on Stage<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/07\/tutorial-create-a-brick-breaker-game-in-as3-part-4\">Hit Testing the Bricks<\/a><\/li>\n<li><a href=\"http:\/\/www.mrsunstudios.com\/2008\/07\/tutorial-create-a-brick-breaker-game-in-as3-part-5\">Creating Levels<\/a><\/li>\n<li class=\"c_chap\"><a href=\"http:\/\/www.mrsunstudios.com\/2008\/08\/tutorial-create-a-brick-breaker-game-in-as3-part-6\">Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n<h3>Step 6: Finishing Touches<\/h3>\n<p>Well, we&#8217;re almost done with our game, now we just have to add some finishing touches. I won&#8217;t make a menu system like you usually should in a game before releasing it. But, this is just a tutorial, and hopefully you&#8217;ve learned something. You probably already know how to make a menu anyway. Also, I&#8217;m not going to teach you how to do some of the things that we need because hopefully you can do it yourself. If you can&#8217;t , there&#8217;s always the source file at the bottom.<\/p>\n<p>Now, where were we? Oh yes. I realized that the last lesson, we were supposed to make more levels. I taught a lot of stuff, but I forgot to make more levels for you! I apologize. Anyway, here&#8217;s an example of a 5 level game (Put it on the first frame).<\/p>\n<pre lang=\"actionscript\">\r\n\/\/The array code for lvl 1\r\n\/\/All of the later levels add one more row of bricks\r\nvar lvl1Code:Array = new Array(1,1,1,1,1,1,1);\r\nvar lvl2Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1);\r\nvar lvl3Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);\r\nvar lvl4Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);\r\nvar lvl5Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,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, lvl2Code, lvl3Code, lvl4Code, lvl5Code);\r\n<\/pre>\n<p>It&#8217;ll be a pretty straightforward game. Next, I think the gamer needs to know that he has to click the screen to start, and not think the the game is frozen or something. So, just add a dynamic textfield to the middle of the stage. Give it an instance game of <tt>txtStart<\/tt>, and make sure it isn&#8217;t selectable.<br \/>\n<img src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/brick-breaker-as3\/pt6\/text-properties.gif\" alt=\"Make sure that these properties are what you have\" \/><\/p>\n<p>Next, add this code at the end of the frame.<\/p>\n<pre lang=\"actionscript\">\r\n\/\/setting the text's word\r\ntxtStart.text = \"Click To Begin\";\r\n<\/pre>\n<p>You can make the text different, but don&#8217;t be too mean. Next, we have to remove the text, which we can do in the <tt>beginCode()<\/tt> function. We aren&#8217;t going to remove the textfield itself because we need it again for every level.<\/p>\n<pre lang=\"actionscript\">\r\n\/\/removing the \"Click to Start\" Text\r\ntxtStart.text = '';\r\n<\/pre>\n<p>Now, we have to reset it every level. I&#8217;m not going to tell you how to do it. I hope you&#8217;ve learned enough to be able to.<\/p>\n<p>The next thing we have to do is display the current level, and how many lives the user has. This will be pretty simple as well, so I won&#8217;t really go into details about how to do it. But, I will give you some code to use below all the other.<\/p>\n<pre lang=\"actionscript\">\r\n\/\/creating a function to update the text fields\r\naddEventListener(Event.ENTER_FRAME, updateTextFields);\r\n<\/pre>\n<p>You can create your own text fields with and update them with that function. But, be sure to remove that listener if the gamer loses, or something bad will happen, something very bad&#8230;<\/p>\n<p>And don&#8217;t think I forgot about scoring. Just define a variable at the top called <tt>score<\/tt> and have it update along with the other stats. Also, you have to make it increase in the <tt>Brick<\/tt> class every time the brick is hit. You might want to show the score when the player loses too. But, that&#8217;s just optional.<\/p>\n<p>Well, those are all the finishing touches that I&#8217;m going to add on to my game at least. Here is the final product of all our work.<\/p>\n<h3>The Final Product:<\/h3>\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:\/\/www.mrsunstudios.com\/obj\/tuts\/brick-breaker-as3\/pt6\/brick-breaker-as3-pt6.swf\" \/><embed type=\"application\/x-shockwave-flash\" width=\"550\" height=\"400\" src=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/brick-breaker-as3\/pt6\/brick-breaker-as3-pt6.swf\"><\/embed><\/object><\/p>\n<p><a href=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/brick-breaker-as3\/pt6\/source.zip\">Source Files (Zipped)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents Coding Paddle Movement Programming the Ball Setting Up the Bricks on Stage Hit Testing the Bricks Creating Levels Finishing Touches Step 6: Finishing Touches Well, we&#8217;re almost done with our game, now we just have to add some finishing touches. I won&#8217;t make a menu system like you usually should in a [&hellip;]<\/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\/357"}],"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=357"}],"version-history":[{"count":9,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":372,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/357\/revisions\/372"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}