{"id":322,"date":"2016-05-27T15:57:01","date_gmt":"2016-05-27T13:57:01","guid":{"rendered":"http:\/\/davikingcode.com\/blog\/?p=322"},"modified":"2016-05-27T18:43:01","modified_gmt":"2016-05-27T16:43:01","slug":"meet-hutch-the-best-friend-of-starxi","status":"publish","type":"post","link":"https:\/\/davikingcode.com\/blog\/meet-hutch-the-best-friend-of-starxi\/","title":{"rendered":"Meet Hutch the best friend of Starxi!"},"content":{"rendered":"

Hey folks, today I’m glad to introduce you Hutch<\/a>. This post follows my thoughts from a previous<\/a> one. I was looking for the next tech for providing mobile, desktop and web games. Starling<\/a> is great, but since Flash Player is dead again<\/a>, its future is less brighten. I used Flambe<\/a> in the past, and was pretty happy but today it isn’t supported anymore (though we’re waiting a long time announced update!).<\/p>\n

Looking for a good cross-platform 2D engine<\/strong>
\nI looked the interesting series of blog post by Prime31<\/a> seeking for the best 2D game engine\/platform. He finally choose MonoGame<\/a>, but unfortunately for me it doesn’t export for the web. In his evaluation it meets many Haxe<\/a> frameworks and LibGDX<\/a>. Being not so much familiar with Java and with the death of RoboVM<\/a> I don’t considered LibGDX as an option.
\nConcerning the Haxe libraries, my issue is still the same: there aren’t enough Native Extensions (except for Flambe which targets AIR) and the js minified is close to 1Mo.<\/p>\n

On an other part, I enjoyed working with Pixi.js<\/a> and Haxe thanks to this extremely well supported externs<\/a>. Unfortunately, targeting mobile application with HTML5 is a nightmare. Cordova<\/a>‘s performance aren’t really good and Cocoon<\/a> is just an expensive black box…<\/p>\n

So what was the solution?
\n<\/p>\n

A mix of Starling and Pixi! The best of both world:
\n– Starling: a nice framework working fine on mobile and desktop with all the ANEs that I need.
\n– Pixi.js: the fastest HTML5 2D engine!<\/p>\n

NextGenActionScript<\/strong>
\nThe idea came when trying NextGenActionScript<\/a>. We’re able to code in AS3 and using Pixi.js that’s cool! So I started the Hutch framework using AS3 and conditional compilation<\/a>, but quickly an issue came to my mind: “ok, I’ll have a display list managing both frameworks but it will be complicated to use other external libraries. For example, if I use the Box2D physics engine, if the JS implementation is not the same than the AS3 I will not only have to make a proxy<\/a> API but manage the differences!” No way!<\/p>\n

Haxe<\/strong>
\nI’m a huge fan of Haxe and its awesome community. By the way today starts the WWX<\/a> (awesome linup, but unfortunately I can’t participate this year), that’s why this blog post is out today. Hutch being far from stable!<\/em>
\nA library coded with the Haxe programming language will work on all the Haxe’ supported platform, and trust me there are many! So without any doubt, Haxe is the solution rather than AS3.<\/p>\n

Hutch<\/strong>
\nHutch is a Haxe framework exporting on the web via WebGL (thanks to Pixi.js), on desktop and mobile via AIR (thanks to Starling). Hutch offers a nice layer of abstraction since (mostly) you don’t have to bother if you’re targeting Pixi or Starling.
\nStarling & Pixi share a close architecture since they’re based on the traditional Flash display list architecture. Hutch respects this architecture. It is closer to the Starling’s one because it is itself a port of the Flash display list for Stage3D, whereas Pixi has mostly borrowed the display list architecture to help Flash developers move on HTML5.<\/p>\n

Goal<\/strong>
\nHutch is pretty new, there are many things to do! In a long run, only the raw assets will depend of the targeted platform. Its goal is to have exactly the same behavior regardless the targeted platform. It wouldn’t pretend to be the next big thing, just a good cross-platform framework for making (small) HTML5 and mobile game.<\/p>\n

But enough talk, let see it in action:
\nHTML5 demo<\/a>.
\nFlash demo<\/a>.<\/p>\n

You can click on the bird. I used the Actuate<\/a> library for tweening.
\nThe demo code:<\/p>\n

\r\npackage;\r\n\r\nimport hutch.display.Image;\r\nimport hutch.display.MovieClip;\r\nimport hutch.display.Sprite;\r\nimport hutch.text.TextField;\r\nimport hutch.textures.Texture;\r\nimport hutch.utils.AssetManager;\r\n\r\nimport motion.Actuate;\r\n\r\nclass Game extends Sprite {\r\n\r\n\tvar bunny:Image;\r\n\t\r\n\tpublic function new() {\r\n\t\tsuper();\r\n\r\n\t\t#if starling\r\n\t\t\ttouchable = true;\r\n\t\t#end\r\n\r\n\t\tvar text = new TextField("Welcome to Hutch :)", "Arial", 24, 0xFF0000);\r\n\t\taddChild(text);\r\n\r\n\t\ttext.y = 150;\r\n\r\n\t\tvar assetManager = new AssetManager();\r\n\t\tassetManager.add("bunny.png");\r\n\t\tassetManager.add("starling.png");\r\n\r\n\t\t#if starling\r\n\t\t\tassetManager.add("explosion_starling.png");\r\n\t\t\tassetManager.add("explosion_starling.xml");\r\n\t\t#elseif pixi\r\n\t\t\tassetManager.add("explosion_pixi.json");\r\n\t\t#end\r\n\r\n\t\tassetManager.load(function() {\r\n\r\n\t\t\tbunny = new Image(assetManager.getTexture("bunny.png"));\r\n\t\t\tbunny.pivotX = bunny.width \/ 2;\r\n\t\t\tbunny.pivotY = bunny.height \/ 2;\r\n\r\n\t\t\tbunny.y = 50;\r\n\t\t\taddChild(bunny);\r\n\r\n\t\t\tvar bird = new Image(assetManager.getTexture("starling.png"));\r\n\t\t\tbird.x = bird.y = 300;\r\n\t\t\taddChild(bird);\r\n\r\n\t\t\tbird.buttonMode = true;\r\n\t\t\tbird.touchable = true;\r\n\r\n\t\t\tbird.addTouchBeganListener();\r\n\t\t\tbird.onTouchBegan.add(function() {\r\n\r\n\t\t\t\tbird.scaleX = bird.scaleY += 0.1;\r\n\t\t\t});\r\n\r\n\t\t\tvar mc = new MovieClip(assetManager.getTextures("explosion_"));\r\n\t\t\tmc.x = 400;\r\n\t\t\taddChild(mc);\r\n\r\n\t\t\tmc.play();\r\n\r\n\t\t\tActuate.tween(bird, 1, {alpha:0.2}).repeat().reflect();\r\n\r\n        \tActuate.tween(bunny, 1, {alpha:0.3, x:205});\r\n\t\t});\r\n\t}\r\n\r\n\tpublic function onUpdate(elapsedTime:Float) {\r\n\r\n\t\tif (bunny != null) {\r\n\t\t\tbunny.rotation += 0.01;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
Hutch uses and certainly abuses the Proxy<\/a> pattern. The goal is to have almost no compilation flag on your side. I’m pretty sure many things can be improved thanks to Haxe macro, but I didn’t learn them yet…<\/p>\n
Anyway, the journey has just begun there are many things to do. If you’re interested, feel free to contact me!
\nAgain Hutch<\/a> is pretty raw, at this time this is more a proof of concept than a real framework, the WWX was an occasion to not miss and give to Haxe the hype it deserves.<\/p>\n
Oh and I hope you get the tilte’s joke \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
Hey folks, today I’m glad to introduce you Hutch. This post follows my thoughts from a previous one. I was looking for the next tech for providing mobile, desktop and web games. Starling is great, but since Flash Player is dead again, its future is less brighten. I used Flambe in the past, and was … Continue reading Meet Hutch the best friend of Starxi!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_discordance_state":"","_discordance_checked":true},"categories":[15],"tags":[27,30,9],"_links":{"self":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/322"}],"collection":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":27,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":349,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions\/349"}],"wp:attachment":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}