Turning a HTML5 Game into a fast, hardware accelerated native mobile app

 So I finally released my first game, Stellar Alien, in the Chrome Web Store. Development took a bit longer than I expected, but I got it done. When I was developing Stellar Alien I knew it had to work well on Mobile Devices. One of the strong points of developing in HTML5 is that you can write once, and be cross-platform with no porting at all. Stellar Alien is finally available in the Google Play store, but it was difficult to find the best way to turn it into a native application.

 

This is what I found out about making a HTML5 Game into a native mobile application:

Users are more used to installing apps from the marketplace

Not sure about you, but when somebody tells me they have a new app for Android, I’d assume it’s on Google Play. I wouldn’t launch my mobile browser and ask the person “Okay, what is the link to it?”

Stellar Alien was just a web app initially, but I knew I had to turn it into a native mobile application somehow.

Webview is horrible and it is too slow

When I researched ways I could turn my HTML5 game into a native application, PhoneGap popped up. PhoneGap looked okay to use, so I tried it out with a small & quick script. I ran a simple test with a <canvas> fading in using jQuery.  WOW, was that slow. It also took a bit of time for that small little script to load up. I loaded up my game on it, and the FPS was too low, making it unplayable.

I was curious why it was so slow. I found out it’s not PhoneGap’s fault, but it is the WebView. Great, so now what was I going to use? It seemed like similar software to PhoneGap also used a WebView.


Finally, I find Ludei’s CocoonJS

A few months ago while I was living in Seattle, WA, I visited a JavaScript Game Development meet up, which felt a little awkward being the only teen there, but everybody was friendly. Somebody from Ludei came and gave a talk on their new technology, CocoonJS. CocoonJS takes your canvas based HTML5 Games and turns them into a blazing fast, hardware accelerated native application. My first impression of it was that it was “just PhoneGap, specifically for HTML5 Games”. The demos that the speaker showcased at the meet up proved me wrong.  The speed was great, with FPS averaging around 250 on an Android Tablet. He later explained that CocoonJS binds canvas calls to OpenGL ES, making it hardware accelerated.

The fact that there isn’t a WebView & that my canvas is hardware accelerated, really made me excited about CocoonJS.  Another thing is there’s no SDK. You do not have to do any code changes or use some amazing, magical SDK. It’s awesome.

Let’s make this clear, CocoonJS is not a browser. How Ludei describes it is that it is a “JavaScript Virtual Machine”. For your game to be hardware accelerated using OpenGL ES with no code changes, your game needs to be Canvas Based. If it’s DOM-based, you’re out of luck. However, CocoonJS does also have a WebView extension that is easy to use & has some great features. I would take a look at that if your game really, really needs to be DOM-based. Note that their WebView support is still pretty new and might be buggy (my experience).

If your game is canvas based, great! You’ll have a hardware accelerated, native HTML5 game in no-time. CocoonJS also supports a lot of popular game engines.  These are the engines they currently have listed at the time of this writing:

  • CAAT
  • ImpactJS
  • Construct2
  • Cocos2DX HTML5
  • Isogenic

If the engine you use for your game isn’t listed, it may work if you try it out (but be sure everything is being rendered with the canvas API, no DOM!)

My experience using CocoonJS was insanely simple and easy. I would definitely recommend it if you need your canvas based game to become a native application, quick and easy(and fast!)

Here’s how simple it was:

  • Install the CocoonJS Launcher App to test your game to make sure it works well.
  • Launch your application (just give the launcher a link to a zip file containing the code)
  • Play through it, make sure everything is pretty & smooth.
  • Works great? Now you can use CocoonJS’s Cloud Compiler.  Their compiler will compile your game into the selected marketplaces (currently iOS, Android).
  • Get the APK, sign it like usual, & upload that baby to Google Play and/or Apple AppStore!

If you run into any problems, Ludei’s support is great and should get back to you in less than a couple of business days. The updates usually come around monthly(lately) and they fix a lot of bugs.

Conclusion

So that’s how I finally got Stellar Alien on Google Play. The link is here, perhaps it would be fun to play while you’re checking out CocoonJS, and that link is here ;)

Have fun!

  • Jeff

    What does it cost or how does the licence work? What do they get out of this? Where’s the money?

    • maxxx

      Right now, here’s how it works:

      To test if your game actually works with CocoonJS, you can install their launcher for free.

      The Cloud Compiler currently has two types of users, this is from Ludei’s wiki:

    • Normal users: The default user when you register in the system. The only limitation for this kind of users is that they can only upload 30 Mb of data per application and that there is no acces to configure and use the CocoonJS extensions.
    • Premium users: This users are allowed to upload up to 200Mb of data for their apps and they have full access to use and configure the CocoonJS extensions.
    • Currently, both are free. I have contacted Ludei for more information and they consider the Premium users to be in a “private beta”. And I believe they plan to charge for being a premium user in the future.

      Not everyone can be premium at this time, but you can fill out a form and there will be a chance you’ll be approved to become a premium user. They’ve already approved a bit of developers already.

      Note that Ludei also have their own games, so they get money from that as well.

  • crovtt

    Hello there!

    I am developing a game with Construct 2 (Scirra) to publish in the Play Store, I display my own ads for local clients (Nicaragua) embedded in my game as an alternative monetization. These ads are to be displayed at the end of each level, with an optional link to the website of the client. My question is, how to implement this embedded advertising and manage’m violating any rules of the Play Store?, I be committing any illegality?.

    I have read the policy of the Play Store, but do not quite me clarify.
    I have no intention to use services such as: admob, adsense, etc..
    There a way to create your own banners management system?
    Thank you!