Sponsored By

Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs.

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.

Martin Drapeau, Blogger

October 22, 2015

8 Min Read

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.

 

Read more about:

Featured Blogs
Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like