Tempa Labs

Bookmark us! We create quality new games every week!
Join us on Facebook and follow us on Twitter!

HTML5 Mobile Games and Cocoon.IO

Category : Blog · by Aug 3rd, 2015

Soo…. short while after we developing and playtesting Siege!, it’s come to our mind that it play so well, it even can pass as a native mobile games experience (although with performance limitation on user mobile browser). We thought about it long and hard, and decide that it might be good to try to develop Siege! into mobile games instead.

One thing though, we already knee deep in development & testing process that it seems hard to abandon the HTML5 code to rebuild the games using different tool for mobile version. That’s when we read Richard Davey’s tweet about Cocoon Phaser Template.

The New CocoonIO

We actually have tried Ludei’s Cocoon JS tool in the past, it wasn’t the best experience though. Combination of problem like disappointing games performance, unintuitive  dashboard, and problem with DOM operation (especially regarding to Phaser’s Bitmap Font implementation) left us with a bad taste.

It turns out that Ludei have rebuild Cocoon into a new tool called Cocoon.io in the past few months.  With slogan better, faster, reliable, they built Cocoon JS from ground up and make it compatible with cordova. This is big, because we now can leverage all Cordova project/library that already floating around and implement them inside our games/hybrid app.

After that, we decided to register for beta invitation. It doesn’t take too long to get login permission and get a chance to tinker thing around. To make story short, I’m really impressed! Some of the few highlights of the new Cocoon for me:

  1. The dashboard is significantly better and more intuitive than the old one (bonus point with Guided Creation and automatic app creation feature)
  2. Easy Cordova plugin management. Almost all the popular cordova library is available to use from the Plugins tab, and we don’t need to manage it ourselves. It included automatically when we compiling a project.
  3. Almost all Cocoon Plugins (called Atomic Plugins) are open sourced and available in github.
  4. Canvas+ performance is good! What I mean to say, is that it’s really good! Our games, Siege!, run flawlessly on our test device, new and old alike. Altough there are with feature limitation (like DOM/Phaser Bitmap font), hopefully we can explain more about it in the next post together with the solution that we found.

It’s not a smooth sailing, but we finally can get Siege! to run natively on Android, complete with various implementation like Ads, Google Play Achievement/Highscore, Social Sharing, etc. Next, we plan to share our experience about it to help you to avoid various pitfall in using Cocoon.io (at least at the beginning).

Siege! on Android!


(4) comments

Anthony Mills
5 years ago · Reply

We tried this approach with our last Phaser based game Diver Dan trying the Webview+ and Canvas+ modes. But in the end we just found it was less hassle to package the application using default Cordova and the Crosswalk plugin for performance.

    5 years ago · Reply

    That’s definitely one way to do it. At least, your choice doesn’t have any compulsory splash screen and free (Cocoon.IO is yet to announce their pricing scheme :D)
    I don’t know about your games, but in our current Canvas based games, speed/responsiveness is a very important factor. We find that Canvas+ still deliver better/more stable performance than Crosswalk in this regard.

    Btw, just out of curiousity. Where can I play Diver Dan? 🙂

James Skemp
5 years ago · Reply

Just saw Siege on Phaser’s news page, and was interested in if you had shared how you got it on Android.

Are you still planning on doing a writeup, as you mention in your last paragraph?

Also, the link in your menu to go to your main blog page three a 500 error, trying to load /blog

    5 years ago · Reply

    Yeah sure, I’m still planning on writing the tutorial. I’m just a bit busy at the moment, hopefully soon 🙂
    Thank you for your information, I have fixed the problem with our website!

Leave a Reply

Your email address will not be published. Required fields are marked *