CocoonJS

Now, when we have fully working HTML 5 game, we want to convert it to mobile version. I’ve decided to use CocoonJS because I’ve already used it before and I was really surprised how good performance can it provides on mobile devices.

http://cocoon.io/

CocoonJS is an accelerated javascript and HTML5 execution environment. CocoonJS aims to execute Canvas games on mobile devices in full screen. Moreover CocoonJs uses apache cordova plugins, which allow your app to use native device capabilities beyond what is available to pure web apps.

CocoonJs allows us to choose between three types of engines:

• Webview
• Webview+
• Canvas+

Webview

System Webview provides a complete HTML5 webview engine.  It has full DOM access and low footprint. However, the performance of your project might be affected. The behavior of your app might vary slightly from one device to another as the System Webview is not the same in all devices. As this webview engine is part of the device in which the application is installed, it doesn’t require additional space.

Webview+

The Webview+ is has good DOM support and a stable platform to work with. It provides also accelerated canvas solution (but for better performance canvas+ is recommend).

Advantages:

• HTML5 API is fully supported: WebAudio, CSS, DOM UI elements.
• Good performance.
• It is a full browser.
• In iOS it is lightweight as it is included in the same device.

Disadvantages:

• Performance is not as good as in Canvas+, especially noticeable at startup.
• In Android it takes around 20MB to include this webview engine.

Canvas+

Canvas+ is a webview engine which not only accelerates the performance of the game but also allows you to access native device features. Although it runs plain JavaScript, there is no support for the entire HTML5 API. It is perfectly tuned for games and it tries to provide the best acceleration technology using the minimum set of HTML5 functionalities needed.

Advantages:

• High performance: It is the fastest webview engine.
• Light weight: Only 5MB of space.
• Compatibility with old OS versions.
• Portability: Android, iOS, Wearables…
• Specially thought and designed for Gaming.Ultra-fast bindings: box2d, gamepad…

Disadvantages:

• DOM access is restricted.
• It is not a full browser.
• Less suitable for apps than the other webview engines.

Prepare FlappyHero for CocoonJS

Of course best options for Games would be Canvas+ webview, but because before I’ve decided to use Web Audio Api to generate sound, and it is not supported by Canvas+ I am forced to use Webview+. For our simple game it should be enough, but for more complex projects it would be better to find sound library supported by Canvas+.

Unfortunately I’ve also noticed that ES6 is not fully supported by cocoonJS compiler. So I was forced to change my JS code to ES5, before upload to cocoon page. It was quite simple because I’ve used babel compiler for this purpose (babeljs.io).

Additionally we have to change a little bit our config object. We have to set up canvas width and height to full webview size. We can simple get width and height values calling window.innerWidth and window.innerHeight. To properly scale all Game objects we will use scale variables.

const  scaleX = window.innerWidth / 800;
const  scaleY = window.innerHeight / 480;

Now we can simple multiple our config values depends on theirs horizontal or vertical importance.

{
          width : 800 * scaleX,
          height: 480 * scaleY,
          obstacle: {
              width: 50 * scaleX,
              speed: 42 * scaleX,
              minSpace: 150 *scaleY,
              maxSpace: 240 *scaleY
          },
…
}

This change allows us to keep original game elements proportions and behavior.

Create APK file

We are ready to compile our project. CocoonJS management page is really simple to use. It allows us to upload our sources, choose application name and icon, splash screen, and of course type of webview. I’ve chosen also landscape and “fullscreen” mode.

CocoonJS platform allows us to compile our project to various platforms: Android, iOS, windows 10, X os X and Ubuntu. I’ve chosen Android and after view minutes I’ve received fresh package with .apk file. Now it’s time to put in on android phone and install! Our beautiful game is ready!!!

Summary

I hope this short series show that creating game for Android or iOS mobile market can be really easy and fun. I’ve used only pure JavaScript with HTML5 and Cocoons platform to compile it to native app. You don’t need to know Java, Objective-C or Apple Swift.   As I mentioned on the very beginning simplest ideas are the best, so you don’t need to create Crisis or The Witcher to become famous game developer.

Best luck in your own game projects!

• All sources and .apk available there:  github.com/jozef-kala/FlappyHero
• There you can play web version of FlappyHero: flappy.ficode.pl’
• Compiled .apk file: ficode.pl/flappy/FlappyHero.apk
• My little bit more complex HTML5 game: scourer.ficode.pl