{"assets":[{"original":"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.04.23-PM-300x233.png","local":"\/data\/posts\/2013\/08\/255a92d5aa216f58d6c7ed7e5899a214.png"},{"original":"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.04.23-PM.png","local":"\/data\/posts\/2013\/08\/b306bdbcf10616666d52dba16ec96ed3.png"}],"author_link":"author\/bemmu\/","author_name":"Bemmu","cat":"LD #27","categories":["LD #27"],"comments":[],"epoch":1377127980,"event":"LD27","likes":4,"metadata":{"p_key":"79498","p_author":"Bemmu","p_authorkey":"0","p_urlkey":"288508","p_title":"Preparing for Ludum Dare AS3 development","p_cat":"LD #27","p_event":"LD27","p_time":"1377127980","p_likes":"4","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1377216000","event_key":"18","event_name":"LD27"},"source_url":"2013\/08\/21\/preparing-for-ludum-dare-as3-development\/","text":"<p>Looking forward to participating in LD27? If Flash is your tool of choice, but have not used it in a while, here are some things you might want to rehearse before the contest starts. There isn\u2019t much time during the compo to start looking up the order of function arguments or trying to recall how the overall structure of your game is supposed to work, so I like to practice the most commonly used things before the start.<\/p>\n<p><strong>Creating a simple game class<\/strong><\/p>\n<p>From starting up Flash, how do you get the basic game loop going? One option is to just use Flash actions editor, but as the Flash editor tends to be a bit slow and is lacking in some features,\u00a0my personal choice is to edit all code in Sublime Text 2 and use Flash only to preview the result.<\/p>\n<p>You can pre-create a snippet to serve as a starting point. As long as you declare your snippet before the contest starts, you are allowed to use it.\u00a0Here is my starting point that just displays some noise on the screen. To use it, you create a new AS3 project in Flash, then save it as say Game.fla and from properties set \u201cClass\u201d to \u201cGame\u201d. Then save the snippet below as Game.as and launch:<\/p>\n<pre>package {\r\n import flash.display.*;\r\n import flash.events.*;\r\n import flash.geom.*;\r\n import flash.utils.*;\r\n\r\n public class Game extends Sprite {\r\n  var backbufferBitmapData;\r\n  var frontbufferBitmapData;\r\n\r\n  var past;\r\n  function tick() {\r\n   var now = getTimer();\r\n   var elapsedSeconds = (now - past)*0.001;\r\n   past = now;\r\n  }\r\n\r\n  var pixels:Vector.&lt;uint&gt;; \r\n  function render() {\r\n   var i:uint = pixels.length; \/\/ declaring type here is a huge speedup\r\n   while (i--) pixels[i] = 0xff000000 + Math.random() * 255;\r\n   backbufferBitmapData.setVector(backbufferBitmapData.rect, pixels);\r\n  }\r\n\r\n  function flip() {\r\n   frontbufferBitmapData.copyPixels(\r\n   backbufferBitmapData,\r\n    new Rectangle(0, 0, backbufferBitmapData.width, backbufferBitmapData.height),\r\n    new Point(0, 0)\r\n   );\r\n  }\r\n\r\n  function refresh(evt) {\r\n   var start = getTimer(); \r\n   render(); \r\n   var renderTime = getTimer();\r\n   tick();\r\n   trace(renderTime - start, 'ms \/ render()', getTimer() - renderTime, 'ms \/ tick()');\r\n   flip();\r\n  }\r\n\r\n  public function Game() {\r\n   past = getTimer();\r\n   backbufferBitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);\r\n   frontbufferBitmapData = backbufferBitmapData.clone();\r\n   addChild(new Bitmap(frontbufferBitmapData));\r\n   pixels = new Vector.&lt;uint&gt;(stage.stageWidth * stage.stageHeight, true);\r\n   addEventListener(Event.ENTER_FRAME, refresh);\r\n  }\r\n }\r\n}\r\n\r\n<a href=\"\/data\/posts\/2013\/08\/b306bdbcf10616666d52dba16ec96ed3.png\"><img alt=\"Screen Shot 0025-08-22 at 3.04.23 PM\" class=\"alignnone size-medium wp-image-269288\" height=\"233\" src=\"\/data\/posts\/2013\/08\/255a92d5aa216f58d6c7ed7e5899a214.png\" width=\"300\"\/><\/a><\/pre>\n<p><strong>Getting bitmap data into your game<\/strong><\/p>\n<p>Recall that in flash there is BitmapData that represents the raw pixels. Then it has to be wrapped in a Bitmap to actually display it on the screen.<\/p>\n<p>One thing you almost certainly will want to do is to use an external editor like Gimp or Photoshop to create a graphic, then somehow get that to display in your game from code. Say you have cat.png in your game directory.\u00a0The way to get it to appear is to first bring up the library in Flash (\u2318-L on Mac), then drag the image to the library. Edit properties of the image, check \u201cexport for actionscript\u201d and give the class a name.<\/p>\n<p>Easiest thing to forget when now instantiating that class from code is that you have to pass it 0,0. So if you called your class Cat, to get the BitmapData instantiated you do<\/p>\n<p>var cat = Cat(0, 0);<\/p>\n<p>You can now access the image data from code. To check that it is working, you can also add it to the stage by doing the following as the last line in your constructor.<\/p>\n<pre>addChild(new Bitmap(cat));\r\n\r\n<a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-2.57.17-PM.png\"><img alt=\"Screen Shot 0025-08-22 at 2.57.17 PM\" height=\"232\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-2.57.17-PM-300x232.png\" width=\"300\"\/><\/a><\/pre>\n<p><strong>Clearing a rectangle<\/strong><\/p>\n<p>Recall that fillRect exists and that in AS3 you pass in a Rectangle object as an argument instead of separate coordinates. However for the color, an integer is expected.\u00a0Like so:<\/p>\n<pre>\/\/ Clear a 100x100 rectangle at 100,100 to red.\r\nbackbufferBitmapData.fillRect(new Rectangle(100, 100, 100, 100), 0xffff0000);<\/pre>\n<p><strong>Copying pixels from one bitmapdata to another<\/strong><\/p>\n<p>You call the copyPixels method on the bitmapdata that will be changed.\u00a0Argument order: Source \u2013 rectangle \u2013 point.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;font-size: 12px;line-height: 18px\">backbufferBitmapData.copyPixels(cat, new Rectangle(100, 100, 100, 100), new Point(200, 100));<\/span><\/p>\n<pre><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.16.31-PM.png\"><img alt=\"Screen Shot 0025-08-22 at 3.16.31 PM\" class=\"alignnone size-medium wp-image-269291\" height=\"231\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.16.31-PM-300x231.png\" width=\"300\"\/><\/a><\/pre>\n<p><strong>Using filters<\/strong><\/p>\n<p>Filters are an easy way to make something look impressive easily. After you have a filter instance, you use it to change the pixels in a bitmapdata object.<\/p>\n<p>You have to remember the following things:<br\/>\n\u2013 How to get an instance of the filter<br\/>\n\u2013 How to get that filter to change the pixels<\/p>\n<p>Remember to import flash.filters.* first.<\/p>\n<pre>blur = new BlurFilter(10, 10, 10);\r\ncat.applyFilter(cat, new Rectangle(0, 0, cat.width, cat.height), new Point(0, 0), blur);<\/pre>\n<p>Cat appears twice there, because applyFilter is called on the bitmapdata that the result is copied to and the first argument is the source of the data that is passed to the filter. In this case both the source and destination are the same.<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.24.41-PM.png\"><img alt=\"Screen Shot 0025-08-22 at 3.24.41 PM\" class=\"alignnone size-medium wp-image-269294\" height=\"230\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/08\/Screen-Shot-0025-08-22-at-3.24.41-PM-300x230.png\" width=\"300\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Other filters are already included. You can find the list <a href=\"http:\/\/help.adobe.com\/en_US\/FlashPlatform\/reference\/actionscript\/3\/flash\/filters\/BitmapFilter.html\">here<\/a>. After this preparation, some further things to do would be to play past winning games and think about why they won, how they managed their time. Look at themes that are currently being voted on, try to brainstorm what kind of games you might make from those themes. Good luck!<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>","time":"August 21st, 2013 11:33 pm","title":"Preparing for Ludum Dare AS3 development","title_was_empty":false}