informa
/
Programming
Featured Blog

HTML5 Game to iOS - Choosing a Platform

My past HTML5 game development experience taught me to stay away from the DOM and only use Canvas. I therefore evaluated options available to wrap a canvas-based game into an iOS App. I looked at PhoneGap, Ejecta and CocoonJS.

This article previously appeared on my tumblr.


Ludo’s Quest is an HTML5 game built for mobile. The game targeted iOS from the start. My past HTML5 game development experience taught me to stay away from the DOM and only use Canvas. I therefore evaluated options available to wrap a canvas-based game into an iOS App. I looked at PhoneGapEjecta and CocoonJS.

PhoneGap uses the iOS UIWebView for rendering. Performance-wise this was not a very good option as the canvas was not hardware accelerated as it was the case in most Desktop browsers. As such, the game ran at a very low 15 frames per second. Fortunately with the release of iOS 8 you can now use the WKWebView which includes hardware acceleration for the Canvas. But back when I started it was not available. PhoneGap was therefore a no go.

ImpactJS’ Ejecta was another contender. It implements a Canvas natively run inside of OpenGL:

Ejecta is like a Browser without the Browser. It’s specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast.

JavaScript code is executed directly by a JavaScript VM (JavaScriptCore), the HTML5 Canvas 2D and WebGL API is implemented in native code with OpenGL, Audio is implemented with OpenAL. Several other APIs (touch, accelerometer, localStorage) behave like those in a real browser.

http://impactjs.com/ejecta

That seemed really promising. Ejecta works well with ImpactJS, a popular HTML5 game development framework. I figured I could use it with Backbone Game Engine, my own framework. It however did not have a launcher. I did not have a Mac at the time and therefore no access to XCode to try out and deploy on my iPhone.

CocoonJS implemented something very similar to Ejecta. It offered something called Canvas+, an hardware accelerated 2D canvas. It also offered means to load and dispose of graphic assets more efficiently. Bootup time for a game was much faster. In addition, you could use a regular UIWebView along with your Canvas+ view if you want to use the DOM. CocoonJS seemed to have all that was required.

But what made it stand out is the Cocoon launcher; an iOS/Android App that allows you to load your HTML5 game via a zip file. It took only a few minutes to load my game and see it working on my iPhone. That was enough to sell me on Cocoon.

Today I use Cocoon.io, the next generation of of CocoonJS. It is fully Cordova compatible meaning you can use Cordova plugins. And Canvas+ is also supported as a webview engine. Cocoon.io came out of Beta in September of 2015. With Cocoon.io you provide an HTML5 project, and it outputs an XArchive. The service will even sign your archive so you can just drag and drop the .ipa file directly in iTunes. That eliminates a lot of manual steps.

With that in mind, I invite you to try out the game: http://www.ludosquest.com.

 

Latest Jobs

Sucker Punch Productions

Bellevue, Washington
08.27.21
Combat Designer

Xbox Graphics

Redmond, Washington
08.27.21
Senior Software Engineer: GPU Compilers

Insomniac Games

Burbank, California
08.27.21
Systems Designer

Deep Silver Volition

Champaign, Illinois
08.27.21
Senior Environment Artist
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more