{"id":1041,"date":"2014-04-25T13:07:40","date_gmt":"2014-04-25T12:07:40","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=1041"},"modified":"2014-11-01T14:32:56","modified_gmt":"2014-11-01T13:32:56","slug":"flambe-versus-the-world","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/flambe-versus-the-world\/","title":{"rendered":"Flambe versus the World!"},"content":{"rendered":"<p><a href=\"http:\/\/www.kana.fr\/jeux\/les-sorcieres-de-l-atelier\/\" target=\"_blank\">The game<\/a>.<\/p>\n<p><strong>The (HTML5) engines war<\/strong><br \/>\nYou probably didn&#8217;t miss the engines war of the previous month: Unity announced <a href=\"http:\/\/unity3d.com\/5\" target=\"_blank\">Unity5<\/a> with WebGL support (which I already pre-ordered hurrah!) and Unreal Engine 4 did the same with an <a href=\"https:\/\/www.unrealengine.com\/\" target=\"_blank\">incredible price<\/a>. That was for the big guys.<br \/>\nFrom a more indie friendly point of view, <a href=\"http:\/\/pixijs.com\/\" target=\"_blank\">PixiJS<\/a> continue to kick ass with awesome new features (cacheAsBitmap, blend mode for canvas, SpriteBatch&#8230;). <a href=\"http:\/\/phaser.io\/\" target=\"_blank\">Phaser<\/a> using PixiJS as its rendering engine, is becoming much more popular every day and obviously more stable. PixiJS has really the wind in its sails because <a href=\"http:\/\/www.openfl.org\/\" target=\"_blank\">OpenFL<\/a> switched to it for its HTML5 rendering engine!<\/p>\n<p><!--more--><\/p>\n<p><strong>Witchcraft Works<\/strong><br \/>\n<a href=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2014\/04\/ww.png\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2014\/04\/ww-300x200.png\" alt=\"ww\" width=\"300\" height=\"200\" class=\"alignleft size-medium wp-image-1080\" srcset=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2014\/04\/ww-300x200.png 300w, http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2014\/04\/ww.png 960w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>I had to make a new HTML5 game, <a href=\"http:\/\/www.kana.fr\/jeux\/les-sorcieres-de-l-atelier\/\" target=\"_blank\">Witchcraft Works<\/a>, available through (iOS, Android wasn&#8217;t required) devices browser. Since Unity5 isn&#8217;t available yet and even if they will support WebGL it can&#8217;t be used on a mobile game browser while WebGL isn&#8217;t available on mobile yet (iOS I&#8217;m looking at you!). So I needed an engine working with Canvas.<br \/>\nIn my latest <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/assassination-classroom-back-in-love-with-the-web\/\" target=\"_blank\">HTML5 project<\/a>, I summarized my first experience with PixiJS and the issue with performances (certainly not the engine&#8217;s fault). Since <a href=\"http:\/\/gamua.com\/blog\/2014\/02\/starling-js\/\" target=\"_blank\">StarlingJS<\/a> sounds like abandonned to me, and I wanted to test something new, <a href=\"http:\/\/www.createjs.com\/\" target=\"_blank\">CreateJS<\/a> just has WebGL support, I didn&#8217;t feel confident with that engine (and add JavaScript coding&#8230;). It was finally time to give a try to <a href=\"http:\/\/getflambe.com\/\" target=\"_blank\">Flambe<\/a>, and I fell in love! I heard about it some years ago when I was most active in the Haxe community with a <a href=\"http:\/\/citrusengine.com\" target=\"_blank\">Citrus Engine<\/a>&#8216;s <a href=\"https:\/\/github.com\/alamboley\/CitruxEngine\" target=\"_blank\">port<\/a>.<\/p>\n<p>With the same code base, coded in <a href=\"http:\/\/haxe.org\/\" target=\"_blank\">Haxe<\/a>, Flambe enables to export Flash\/AIR (web, mobile applications), Canvas (old browser, device mobile browser) &#038; WebGL (web) builds!<\/p>\n<p><strong>Haxe<\/strong><br \/>\nAs you probably know, I hate coding in JavaScript. With my previous project I <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/assassination-classroom-back-in-love-with-the-web\/\" target=\"_blank\">found<\/a> <a href=\"http:\/\/www.typescriptlang.org\/\" target=\"_blank\">TypeScript<\/a> not bad at all, but I&#8217;d to make a <a href=\"https:\/\/github.com\/alamboley\/pixi.js\" target=\"_blank\">TypeScript definition file<\/a> for feeling comfortable with PixiJS. Using external libraries in the project, I didn&#8217;t have TypeScript support for them, that was a mess&#8230; Using Flambe I&#8217;m able to benefit from lots of Haxe&#8217;s libraries, and yeah coding in Haxe is lovely!<\/p>\n<p>When I played with NME, 2 years ago we were fighting with the lack of IDE support. There is an excellent <a href=\"https:\/\/sublime.wbond.net\/packages\/Haxe\" target=\"_blank\">plugin<\/a> for <a href=\"http:\/\/www.sublimetext.com\/\" target=\"_blank\">Sublime Text<\/a>, but I can&#8217;t feel enough comfortable, I needed an IDE. But now even if you&#8217;re not on Windows (and its awesome <a href=\"http:\/\/www.flashdevelop.org\/\" target=\"_blank\">Flash Develop<\/a>), you have cross platform Haxe IDE support with <a href=\"http:\/\/fdt.powerflasher.com\/\" target=\"_blank\">FDT<\/a> which isn&#8217;t bad at all and <a href=\"http:\/\/www.jetbrains.com\/idea\/\" target=\"_blank\">IntelliJ<\/a> (I prefered FDT).<br \/>\nFlambe works with a command line interface, but you can also have easily a <a href=\"https:\/\/github.com\/aduros\/flambe\/issues\/243\" target=\"_blank\">.hxml file<\/a> for your IDE \ud83d\ude09<\/p>\n<p><strong>Flambe<\/strong><br \/>\nGetting started with Flambe might be a bit complicated. Be sure to read its <a href=\"https:\/\/github.com\/aduros\/flambe\/wiki\/Installation\" target=\"_blank\">installation guide<\/a>, have a look on the <a href=\"https:\/\/github.com\/aduros\/flambe-demos\" target=\"_blank\">examples<\/a> and on its official <a href=\"https:\/\/github.com\/aduros\/flambe\/wiki\/Cookbook\" target=\"_blank\">Cookbook<\/a>. Holy crap we&#8217;re seriously missing documentation here! Don&#8217;t panic have a look on <a href=\"https:\/\/github.com\/markknol\/flambe-guide\/wiki\" target=\"_blank\">Mark Knol<\/a>&#8216;s one and you can already be grateful! Also be sure that Flambe will match with your project <a href=\"https:\/\/github.com\/markknol\/flambe-guide\/wiki\/Known-issues-limitations\" target=\"_blank\">requirements<\/a> (add no video support).<\/p>\n<p><strong>Entity component system<\/strong><br \/>\nThe first thing you will notice with Flambe is its entity component system. Unlike many frameworks which cloned Flash display list, Flambe works with an entity component system even for rendering stuff! Basically that means if you create a Sprite object, you can&#8217;t addChild children directly. You have to create a new Entity, add it a display object, and addChild this entity to a parent entity! It&#8217;s really troubling at first, but once you get it it works like a charm.<br \/>\nIt&#8217;s sad that you can&#8217;t extend an Entity, it will be very useful for creating lots of custom objects, instead of that we are creating many Components for a project. I understand the design choice, but I find it too restrictive for making frameworks on top of Flambe. Also it would be cool to have getEntityAt method &#038; I didn&#8217;t find an easy way to identify Entity\/Component like we do with their name in Flash.<br \/>\nAnyway it&#8217;s very pleasant to use its entity component model once you get it.<\/p>\n<p><strong>Animations<\/strong><br \/>\nWith Flambe you will have to use <a href=\"http:\/\/threerings.github.io\/flump\/\" target=\"_blank\">Flump<\/a> for your animations. Seems it sounds like a correct way for manipulating animations (you will write some JSFL for speeding your workflow), it&#8217;s crazy that Flambe can&#8217;t load SpriteSheet in any format provided by <a href=\"http:\/\/www.codeandweb.com\/texturepacker\" target=\"_blank\">TexturePacker<\/a>! I may have missed something but that means even for making a SpriteSheet of images you will have to import them in Flash and export them with Flump. What the fuck?<\/p>\n<p><strong>Performances<\/strong><br \/>\nOk here we go. On my latest HTML5 games I fought a lot with bad performances on mobile&#8230; Here it just works&#8230; like a charm! I didn&#8217;t have to fight with anything. I have a strong 60 fps on my iPhone4S and iPad3. Nothing to add. So kudo Bruno!!<\/p>\n<p><strong>I don&#8217;t need at all a Flash target, so why bother with Flambe?<\/strong><br \/>\nMe neither, but having a Flash support will help you a lot with debugging your code!<\/p>\n<p>Still not convinced by Flambe? Have a look on its <a href=\"https:\/\/github.com\/aduros\/flambe\/wiki\/Showcase\" target=\"_blank\">showcase<\/a> and see games made by big firms (Disney, Nickelodeon)! <\/p>\n<p>Finally I&#8217;m back in the Haxe world and that&#8217;s very pleasant! Using <a href=\"http:\/\/getflambe.com\" target=\"_blank\">Flambe<\/a> at <a href=\"http:\/\/davikingcode.com\" target=\"_blank\">Da Viking Code<\/a> gives me without any doubt a strong weapon for future HTML5 project! Feeling even more like a Viking \ud83d\ude09<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/VbIwJhDrV_8\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The game. The (HTML5) engines war You probably didn&#8217;t miss the engines war of the previous month: Unity announced Unity5 with WebGL support (which I already pre-ordered hurrah!) and Unreal Engine 4 did the same with an incredible price. That was for the big guys. From a more indie friendly point of view, PixiJS continue &hellip; <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/flambe-versus-the-world\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Flambe versus the World!<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[161,147,33,70,167],"tags":[119,15,144,172,26,71,169,89],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1041"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=1041"}],"version-history":[{"count":24,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1041\/revisions"}],"predecessor-version":[{"id":1249,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1041\/revisions\/1249"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=1041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=1041"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}