{"author_name":"wilbefast","cat":"LD #27","comments":[{"author_name":"","time":"September 11, 2013 11:06 am","epoch":1378915560,"text":"Thanks for the insights. I&#8217;m still thinking about using Haxe\/OpenFL for a smaller project, so this was useful.","spam":"N"}],"epoch":1378659960,"likes":11,"metadata":{"p_key":"37930","p_author":"wilbefast","p_authorkey":"14535","p_urlkey":"73546","p_title":"Jamming with OpenFL","p_cat":"LD #27","p_event":"LD27","p_time":"1378659960","p_likes":"11","p_comments":"1","p_status":"UPD5","us_key":"14535","us_name":"wilbefast","us_username":"wilbefast","event_start":"1377216000","event_key":"18","event_name":"LD27"},"text":"<p><em><strong>Time for our post-mortem <img src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" alt=\":)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/strong> <\/em><\/p>\n <p>I won&#8217;t re-introduce the team, you can go to <a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/08\/23\/taw-team-for-the-win\/\">our &#8220;we&#8217;re in&#8221; post<\/a> for that. Basically there were 3 of us and we&#8217;re pretty awesome!<\/p>\n <p style=\"padding-left: 30px\"><strong>So what happened?<\/strong><\/p>\n <p>Well, we made <a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-27\/?action=preview&amp;uid=14535\">a time-bending tower-defence game called &#8220;10 Second Onslaught&#8221;<\/a>. It&#8217;s about an onslaught you see, and the onslaught in question lasts 10 seconds:<\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-27\/?action=preview&amp;uid=14535\"><img class=\"aligncenter size-large wp-image-295600\" alt=\"10 second onslaught awesome\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/teleport-550x323.png\" width=\"550\" height=\"323\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/teleport-300x176.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/teleport-550x323.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/teleport.png 1176w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n <p>The game wasn&#8217;t really &#8220;<em>finished<\/em>&#8221; after 72 hours even though it&#8217;s completely playable. I&#8217;m actually glad we were over-ambitious though: it&#8217;s a good beginning and something I&#8217;m still working on (in a separate branch of course \ud83d\ude09 )<\/p>\n <p style=\"padding-left: 30px\"><em><strong>What went well?<\/strong><\/em><\/p>\n <p>The art pipline was probably the one thing that went particularly well. Thomas is really a 3D artist, so soon reverted back from pixel art to making models and rendering them to bitmaps. To speed things up I wrote a couple of little <a href=\"http:\/\/www.imagemagick.org\/script\/index.php\">ImageMagick<\/a> scripts to <a href=\"https:\/\/github.com\/wilbefast\/TAW-ld27\/blob\/master\/Design\/Marine\/mirror_sprites.sh\">mirror<\/a> and then <a href=\"https:\/\/github.com\/wilbefast\/TAW-ld27\/blob\/master\/Design\/Marine\/build_sprite_sheet.sh\">stick these images together<\/a> into sheets. Then it was just a matter of using the <a href=\"http:\/\/fugocode.blogspot.fr\/2013\/04\/animated-sprite-using-bitmap.html\">haxelib spritesheet <\/a>to have animated characters in the game <img src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" alt=\":)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n <p style=\"padding-left: 30px\"><em><strong>What went badly?<\/strong><\/em><\/p>\n <p>For various reasons, mostly the technology (<a href=\"http:\/\/www.openfl.org\/\">OpenFL<\/a>) being something only I had ever used before, I ended up writing a majority of the code, which is just stupid. Next time we&#8217;re going to have to organise ourselves better.<\/p>\n <p><em><strong><a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/09\/08\/jamming-with-openfl\/\">Read on<\/a> for <em><strong>a rather long discussion of OpenFL, including comparisons to Unity 3D and L\u00f6ve 2D&#8230;<\/strong><\/em><br \/>\n <\/strong><\/em><\/p>\n <h1><span id=\"more-294438\"><\/span><\/h1>\n <h1><span style=\"color: #000000\">OpenFL<\/span><\/h1>\n <p dir=\"ltr\" id=\"docs-internal-guid-2a2e19b4-fecd-7032-37dd-95a67d4edfbd\">Our company <a href=\"http:\/\/naturalpad.fr\/\">NaturalPad<\/a> uses Unity for most of our game projects &#8211; here we wanted to try something a bit different: \u201c<a href=\"http:\/\/www.openfl.org\/\">OpenFL<\/a>\u201d. There\u2019s some degree of patriotism involved as <a href=\"http:\/\/haxe.org\/\">Haxe<\/a> and <a href=\"http:\/\/motion-twin.com\/\">Motion Twin<\/a> are both French. I&#8217;m not actually French myself, but <em><strong>that doesn&#8217;t stop me from being patriotic about croissants and stuff<\/strong><\/em>. Anyway you might remember OpenFL (called \u201cNME\u201d until very recently) from such games as <a href=\"http:\/\/www.youtube.com\/watch?v=3mNROSBJqio\">Papers Please<\/a> and <a href=\"http:\/\/www.youtube.com\/watch?v=xBPsBuwiUkE\">Rymdkapsel<\/a>.<\/p>\n <div dir=\"ltr\">I\u2019m told OpenFL resembles Flash, but I\u2019ve never used Flash so I wouldn\u2019t know. Unfortunately <em><strong>developers seem to assume that anyone using OpenFL is already familiar with Flash, so<\/strong> <\/em><a href=\"http:\/\/www.openfl.org\/developer\/documentation\/api\/\">their documentation isn\u2019t as complete as it really should be<\/a>. To be fair <a href=\"https:\/\/twitter.com\/singmajesty\">Joshua Granick<\/a> is always on hand to reply to questions if you ask and, all told, this is my only real qualm with the framework so far. Well, that and the fact that <em><a href=\"http:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2013\/01\/installing-haxenme-on-arch-linux-x86_64\/\">installing it on a non-Ubuntu Linux<\/a> is a serious pain\u2026<\/em><\/div>\n <div id=\"attachment_294440\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/09\/08\/jamming-with-openfl\/1-170\/\" rel=\"attachment wp-att-294440\"><img class=\"size-large wp-image-294440 \" alt=\"We started off using Doom-guy and Zergling sprites\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/1-550x403.png\" width=\"550\" height=\"403\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/1-550x403.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/1.png 1008w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><p class=\"wp-caption-text\">We started off using Doom-guy and Zergling sprites as place-holders.<\/p><\/div>\n <h1><\/h1>\n <h1><span style=\"color: #000000\">OpenFL vs. Unity 3D<\/span><\/h1>\n <p dir=\"ltr\">OpenFL resembles Unity 3D in some senses: its tree-like draw-list structure for instance very much resembles Unity\u2019s transforms. As a result <em><strong>scenes are constructed in the same sort of way, by linking up nodes to parents to form a hierarchy.<\/strong><\/em> That being said Unity is a game engine while OpenFL is just a framework for cross-platform multimedia applications. There are some OpenFL-based game engines out there, <a href=\"http:\/\/www.haxeflixel.com\/\">HaxeFlixel<\/a> for example.<\/p>\n <p dir=\"ltr\">While I was happy to be using something lighter and less proprietary there were certain things I missed. Notably:<\/p>\n <ul>\n <li><a href=\"http:\/\/en.wikipedia.org\/wiki\/Language_Integrated_Query#Language_extensions\">Language-Integrated Query (LINQ)<\/a><\/li>\n <li><a href=\"http:\/\/docs.unity3d.com\/Documentation\/ScriptReference\/GameObject.GetComponentsInChildren.html\">GetComponentsInChildren&lt;T&gt;<\/a><\/li>\n <\/ul>\n <p dir=\"ltr\">These two combined in C# make it absurdly each to find scripts and objects on the fly, something that is often central to game logic. After all, I will often want to find:<\/p>\n <ul>\n <li><strong><em>\u201call the trees within 500 pixels of the player character.\u201d<\/em><\/strong><\/li>\n <li><strong><em>\u201cthe number of enemies with full health.\u201d<\/em><\/strong><\/li>\n <li><em><strong>\u201cthe ally with a bazooka with the most ammunition.\u201d<\/strong><\/em><\/li>\n <\/ul>\n <p dir=\"ltr\">These queries, in Unity C#, would look something like this:<\/p>\n <blockquote>\n <pre>root.gameObject.GetComponentsInChildren&lt;Tree&gt;().Where(t =&gt; Vector3.distance(t.transform.position, transform.position) &lt; 500);<\/pre>\n <pre>root.gameObject.GetComponentsInChildren&lt;Enemy&gt;().Where(e =&gt; e.health == 100);<\/pre>\n <pre>root.gameObject.GetComponentsInChildren&lt;Ally&gt;().Where(a =&gt; a.gunType == GunType.Bazooka).MaxBy(a =&gt; a.ammunition);<\/pre>\n <\/blockquote>\n <div dir=\"ltr\"><a href=\"http:\/\/devmag.org.za\/2012\/07\/12\/50-tips-for-working-with-unity-best-practices\/\">You\u2019ll note that I use root objects as folders<\/a> and nearly always have a root object called \u201cRoot\u201d from which all objects inherit.<\/div>\n <p dir=\"ltr\">In Haxe functions are <a href=\"http:\/\/en.wikipedia.org\/wiki\/First-class_citizen\">first-class citizens<\/a> and so can be passed to queries unlike, say, in Java. However <a href=\"http:\/\/www.openfl.org\/developer\/forums\/programming-haxe\/cant-seem-get-generics-templates-working\/\">I just couldn\u2019t manage to get Haxe\u2019s templates working<\/a>. Thankfully <em><strong>I\u2019m wise enough now to know when something isn\u2019t working and to move on to other things<\/strong><\/em>, especially during a jam. Even a good few hours were wasted trying to build a nice API for game object queries.<\/p>\n <div id=\"attachment_294441\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/09\/08\/jamming-with-openfl\/2-128\/\" rel=\"attachment wp-att-294441\"><img class=\"size-large wp-image-294441 \" alt=\"Next up: starcraft Command Center and dancing banana sprites\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/2-550x440.png\" width=\"550\" height=\"440\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/2-300x240.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/2-550x440.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/2.png 921w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><p class=\"wp-caption-text\">At 3:00am it seemed logical to replace the Zerglings with dancing bananas. I also added some <a href=\"http:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ\">cool music for the rest of the team to wake up to<\/a>.<\/p><\/div>\n <h1><\/h1>\n <h1><span style=\"color: #000000\">OpenFL vs. L\u00f6ve 2D<\/span><\/h1>\n <p dir=\"ltr\"><a href=\"http:\/\/wilbefast.com\/2013\/05\/08\/game-jamception\/\">I was able to teach my team <\/a>to use \u201c<a href=\"https:\/\/love2d.org\/\">L\u00f6ve 2D<\/a>\u201d only a few weeks after starting to use it, and <a href=\"http:\/\/en.wikipedia.org\/wiki\/Lua_%28programming_language%29\">Lua<\/a>, myself. That said L\u00f6ve 2D is famous for being absurdly simple to use. Want to draw something for example?<\/p>\n <blockquote>\n <pre>love.graphics.draw(thing, 0, 0);<\/pre>\n <\/blockquote>\n <p dir=\"ltr\"><a href=\"http:\/\/www.newgrounds.com\/portal\/view\/623773\">Even though I\u2019d already finished one simple game using OpenFL (or rather NME)<\/a> I think the framework is just a lot more complicated than L\u00f6ve. <em><strong>You\u2019re not telling the machine when and where to draw, rather you\u2019re build and maintaining the elaborate draw-list tree structure<\/strong><\/em>. I also had a real person teaching me L\u00f6ve rather than figuring it out myself, and <a href=\"https:\/\/love2d.org\/wiki\/Main_Page\">L\u00f6ve has far better documentation<\/a>.<\/p>\n <p dir=\"ltr\">All this combined to make it very difficult for me to delegate tasks to the novice programmer on our team. I didn\u2019t really know what I was doing myself! As a result he wasn\u2019t able to make a particularly meaningful contribution to the project, which I\u2019m not terribly happy about.<\/p>\n <div id=\"attachment_294442\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/09\/08\/jamming-with-openfl\/3-85\/\" rel=\"attachment wp-att-294442\"><img class=\"size-large wp-image-294442 \" alt=\"Most of the sprites in the game, though the colony sprite is still missing\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/3-550x343.png\" width=\"550\" height=\"343\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/3-300x187.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/3-550x343.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/3.png 1280w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><p class=\"wp-caption-text\">We didn&#8217;t want to go with generic insectoid aliens for the monsters, so instead they were based on <a href=\"http:\/\/theedgechronicles.wikia.com\/wiki\/Wig-wigs\">Wig-wigs<\/a>&#8230; with huge eyebrows. Apparently the eyebrows were based on mine. Not sure how I feel about that.<\/p><\/div>\n <h1><span style=\"color: #000000\">\u00a0<\/span><\/h1>\n <h1><span style=\"color: #000000\">OpenFL vs. user interfaces<\/span><\/h1>\n <p dir=\"ltr\">Speaking of not knowing what you\u2019re doing: it was brought home to me with this project that I haven\u2019t done enough <em>interface-heavy<\/em> game to know how to properly structure interface code. Generally-speaking my games have been <em>sprite-heavy<\/em> with plenty of AI and collision code, but <em><strong>the controls have tended to be direct mappings from a keyboard or gamepad to an action in the game<\/strong><\/em>.<\/p>\n <p dir=\"ltr\">Here we wanted a game that could be ported to mobile devices, so it needed to work with an extreme economy of input:<\/p>\n <ul>\n <li><em><strong>touch<\/strong><\/em><\/li>\n <li><em><strong>drag<\/strong><\/em><\/li>\n <li><em><strong>release<\/strong><\/em><\/li>\n <\/ul>\n <div id=\"attachment_295582\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/09\/08\/jamming-with-openfl\/arrival\/\" rel=\"attachment wp-att-295582\"><img class=\"size-large wp-image-295582 \" alt=\"Here's what the game looks like now!\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/arrival-550x323.png\" width=\"550\" height=\"323\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/arrival-300x176.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/arrival-550x323.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2013\/09\/arrival.png 1176w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><p class=\"wp-caption-text\">Here&#8217;s what the game looks like now!<\/p><\/div>\n <p dir=\"ltr\">That said the player needs to be able to do a lot of things:<\/p>\n <ul>\n <li><em><strong>buy and place units<\/strong><\/em>\n <ul>\n <li><em>choose unit type<\/em><\/li>\n <li><em>choose positions in space<\/em><\/li>\n <li><em>choose position in time<\/em><\/li>\n <\/ul>\n <\/li>\n <li><em><strong>modify previous unit placement<\/strong><\/em>\n <ul>\n <li><em>move through space<\/em><\/li>\n <li><em>move through time<\/em><\/li>\n <li><em>&#8220;sell&#8221; unit<br \/>\n <\/em><\/li>\n <\/ul>\n <\/li>\n <li><em><strong>start the onslaught<\/strong><\/em><\/li>\n <li><em><strong>stop the onslaught<\/strong><\/em><\/li>\n <\/ul>\n <p dir=\"ltr\"><em><strong>One of the advantages of OpenFL is that it is extremely good for exactly this kind of user interface.<\/strong><\/em> As mentioned before however, I wasn\u2019t necessarily experienced enough with it to make the most of it.<\/p>\n <p dir=\"ltr\">Some of these interactions ended up being coded using static buttons but a lot of it was contextual menus. Because I\u2019m not very experienced doing this kind of code the result was <a href=\"https:\/\/github.com\/wilbefast\/TAW-ld27\/blob\/72hours\/Source\/GameScene.hx\">a bunch of tangled events and callbacks<\/a> roped randomly through the code-base.<\/p>\n <p><em><strong>I\u2019m not altogether sure how one \u201cshould\u201d structure interface code for it to be \u201cclean\u201d, but it\u2019s certainly not the way we structured ours!<\/strong><\/em><\/p>\n \n <p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/c-sharp\/\" rel=\"tag\">C sharp<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/c\/\" rel=\"tag\">C++<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/csharp\/\" rel=\"tag\">CSharp<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/flash\/\" rel=\"tag\">flash<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/flixel\/\" rel=\"tag\">Flixel<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/haxe\/\" rel=\"tag\">haXe<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/haxeflixel\/\" rel=\"tag\">HaXeFlixel<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/lambda\/\" rel=\"tag\">lambda<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/linq\/\" rel=\"tag\">Linq<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/montpellier\/\" rel=\"tag\">montpellier<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/motion-twin\/\" rel=\"tag\">motion twin<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/natoine\/\" rel=\"tag\">natoine<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/naturalpad\/\" rel=\"tag\">NaturalPad<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/nme\/\" rel=\"tag\">nme<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/npui\/\" rel=\"tag\">npui<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/openfl\/\" rel=\"tag\">openfl<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/post-mortem\/\" rel=\"tag\">post-mortem<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/taw\/\" rel=\"tag\">taw<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/unity\/\" rel=\"tag\">unity<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/unity-3d\/\" rel=\"tag\">Unity 3D<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/wilbefast\/\" rel=\"tag\">wilbefast<\/a><\/p>","time":"September 8th, 2013 12:06 pm","title":"Jamming with OpenFL"}