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
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.
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:
- Cocos2DX HTML5
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.