Easily Deploy Your HTML5 Game to Android's Play Store Using CocoonJS

A couple years ago, I began writing HTML5 applications and games for fun. HTML5 was hailed as the standard that would unify all mobile devices and marketplaces. No more dealing with multiple device SDK's, multiple device resolutions, or performance among different devices. Using Javascript and the HTML5 canvas, any device 'should' be able to play your game just fine. I had some fun making games as more and more browsers began to support HTML5 and were able to render the canvas faster and faster. Once my game was running in web browsers, I thought now I should be able to deploy it just fine! This is where I ran into trouble. There were a few HTML5 wrappers out a few years ago, but none could bring performance to a rendered canvas on a mobile device. After trying various services that I won't mention, I lost interest in bringing HTML5 games into mobile app stores as native apps. As you can see on Ascended Arcade, I did not post anything between 2011 and 2014...

Fast forward to early 2014 and I decided to load up one of my games I had not seen in a few years into a browser that I'd remembered had difficulty playing it. I loaded up instantly and began playing at lightning speed! I figured, it's been a few years, maybe now HTML5 games can easily be deployed into native mobile apps. After a couple web searches, I stumbled upon CocoonJS and became intrigued. These guys at ludei claim to have an HTML5 wrapper for Android, iOS, and Amazon Marketplace where you simply give them a zip file and they compile it in the cloud and shortly later you have a .zip file arrive in your email containing your native application file.

What's even better and more interesting, is that you have a few methods of compiling your HTML5 app. My favorite is called Canvas+ which actually is a "Javascript Virtual Machine" that they have created. Don't bother including typical web elements because they can't be rendered, but your game in Javascript will utilize WebGL. What this means is that finally, hardware acceleration will work on your HTML5 game! In my test game, it struggled to achieve maybe 30 frames per second and be playable in mobile browsers, but once a native Canvas+ app, it played at lighting speed! Another newer compiler mode that Ludei has is called WebView+, which can contain DOM elements. In my testing, games are not as fast, but your app may be more rendered more universally among various devices and allow more elements.

My test deployment was my game, Mutant Zombie Monsters 2, a 2D zombie blasting platform shooter. The web browser verson is here, Mutant Zombie Monsters 2 in Android Play Store.

Creating a .apk from HTML5 was easy, the next step was adding mobile advertisements which I will cover in another post. Until then, start getting used to CocoonJS!