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.
CocoonJs allows us to choose between three types of engines:
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.
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).
- 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.
- Performance is not as good as in Canvas+, especially noticeable at startup.
- In Android it takes around 20MB to include this webview engine.
- 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…
- 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,
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!!!