{"id":971,"date":"2013-10-16T08:29:08","date_gmt":"2013-10-16T07:29:08","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=971"},"modified":"2014-11-01T14:34:42","modified_gmt":"2014-11-01T13:34:42","slug":"assassination-classroom-back-in-love-with-the-web","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/assassination-classroom-back-in-love-with-the-web\/","title":{"rendered":"Assassination Classroom, back in love with the web!"},"content":{"rendered":"

Hey guys, it has been a long time since I didn’t make a project for the web. Some years ago<\/a>, I decided to go away from my web training and learnt native languages (Objective-C) and focus on cross platform tools (Flash\/AIR, Unity and Haxe NME which is become OpenFL). You will say that HTML5\/JS is the most cross platform tool which exist, that’s right. However as a developer, I thought it wouldn’t improve my skills like Objective-C or even Unity using C-Sharp did. And that’s always true! JS isn’t a smart language, and it isn’t very interesting to deal with it (no interface…).<\/p>\n

However some weeks ago, someone offered me a game project using HTML5 technology, and I said yes! Why the hell, I said yes? Because web has evolved. It is far to be perfect right now, but I think the road is the good one. It’s amazing to be able to play your game in any browser on your computer and your smartphone! No apps to download, just go to an URL.
\nAlso on a technology part Canvas performances are improved “each month”, and WebGL support climbs. JavaScript is still a piece of shit but we have many meta languages (Haxe<\/a>, TypeScript<\/a>, Dart<\/a>, CoffeeScript<\/a>) doing a great job. On an other part I heard about pixi.js<\/a> some months ago, a WebGL rendering engine with a Canvas fallback and I wanted to give it a try.<\/p>\n

<\/p>\n

The game<\/a><\/strong>
\n\"Assassination-Clasroom\"<\/a>Assassination Classroom<\/a> is a Japanese manga. The book is now available in France and Kana<\/a> would like to make some marketing with a game. So we’ve created a Whac-A-Mole<\/a>.<\/p>\n

The game runs fine in any desktop browser and is playable on mobile browser too. Note that we had a first version focused on mobile for the press. This public game is designed for desktop but should run more or less correctly on mobile.<\/p>\n

There is a Facebook connect to elect the best player of the week and give him a plush.<\/p>\n

TypeScript<\/strong>
\nWhy did I chose TypeScript<\/a> instead of Haxe with which I’m familiar? Well it seems that TypeScript has the wind in its sails. It’s becoming very popular and as an AS3 developer it’s very easy to use! IntelliJ Idea<\/a> supports it very well, that was perfect.<\/p>\n

pixi.js<\/strong>
\nI’m still waiting Starling JS<\/a>, being familiar with Sparrow and Starling would have made the transition easily. However it isn’t available yet, so I give a try to pixi.js<\/a> and really enjoyed it! It’s very powerful and there is a little community<\/a>. However the lack of support (we need a good tutorial for getting started with mobile target!!) is regrettable if we’ve short deadline. I know that Mat is very busy and is doing his best. Any doubt that it will be improved.
\nThere are some missing features: trim\/crop support for sprite sheets, some methods that we have with Flash concerning the display list etc. Nothing too hard to deal with. So kudos guys!!
\nNote I’ve made TypeScript definitions for pixi.js available here<\/a>.<\/p>\n

Now it’s time to have some feedbacks concerning HTML5 mobile development:<\/p>\n

Viewport & retina<\/strong>
\nWell it’s very hard to deal with both. I’m not sure at all how to make them running fine. This is how I grab the retina display:<\/p>\n

static GetStageWidth():number {\r\n       return $(window).width() * ((window).devicePixelRatio || Math.round(window.screen.availWidth \/ document.documentElement.clientWidth));\r\n}<\/pre>\n
I had strong issues enabling retina, my performances were awful. So I turned off the devicePixelRatio and let the viewport to content=”width=device-width”. Now performances are ok.<\/p>\n
Audio<\/strong>
\nI used buzz<\/a> library which works fine! However on Android (on my Nexus 7, last system version), a sound can’t loop. I tried also without this lib, no way… It isn’t possible to loop a sound on Android (Chrome)!?<\/p>\n
iOS7<\/strong>
\nIt comes with its bugs<\/a> on Safari. I’m not able to remove the icons at the bottom even if I’ve scrolled… very annoying.<\/p>\n
Tools<\/strong>
\nA new “platform” means a new toolset to have! I really enjoyed working with:
\n– Intellij Idea<\/a> as my main code editor (code compile automatically, that’s great).
\n– LiveReload<\/a> for refreshing automatically the browser (you can also do that via IntelliJ).
\n– Adobe Edge Inspect<\/a> to refresh on all your devices!
\n– Code Orchestra Livecoding Tool<\/a>, the project was more or less completed when COLT out its JS version. I won’t miss to use it for my next web project!<\/p>\n
Yep, I’m back in love with the web. Everything isn’t perfect but good tools are coming and I enjoy its freedom. Does a Citrus<\/a> JS is planned? Not at the moment, but if I’ve several HTML5 game projects, without any doubt!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hey guys, it has been a long time since I didn’t make a project for the web. Some years ago, I decided to go away from my web training and learnt native languages (Objective-C) and focus on cross platform tools (Flash\/AIR, Unity and Haxe NME which is become OpenFL). You will say that HTML5\/JS is … Continue reading Assassination Classroom, back in love with the web!<\/span> →<\/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":[167,84,168],"tags":[169,87,193],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/971"}],"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=971"}],"version-history":[{"count":15,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/971\/revisions"}],"predecessor-version":[{"id":1251,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/971\/revisions\/1251"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}