Category Archives: CocoonJS

Basic Game Structure With ImpactJS & CocoonJS


The HTML5 app wrapper CocoonJS for iOS and Android platforms supports the integration of the popular Impact.js game engine. This article focuses on the basic folder structure with Jasmine test suit integration.

Folder Structure

* index.html: The HTML5 game page. The program entry point for both ImpactJS & CocoonJS platform.
* lib: Javascript files and libraries of the game.
* media: Images, sound clips, music files and other media files to be placed here.
* tools: Tools for handling level editing.
* weltmeister.html: Level editing tool of ImpactJS.

The files listed above come with original ImpactJS 1.21 package. The weltmeister.html and the tools folder don’t need to be included in the release of the game.

* webviews: Contains the HTML5 pages which presented in the webview of the converted iOS/Android game app.

Pages in the webviews folder are called from the CocoonJS platform(Converted Javascript codes) by using CocoonJS extensions.

* SpecRunner.html: The page to run Jasmine test specs.
* test: Contains Jasmine test specs for the game app.

SpecRunner.html and test folder are Jasmine test codes and don’t need to be included in the release of the game.

Program Flow

Main program entry: The flow chart indicates a way to structure an app with multiple games in it with the support of iOS/Android webview.

Leave a comment

Posted by on April 17, 2013 in CocoonJS, HTML5, ImpactJS, Javascript


HTML5 Game Development: Introduction

This article and links will be kept updating.

I’ve been working on HTML5 games and am amazed by what we can achieved with HTML5. It took me some time to put HTML5 contents together. Now we have some progress and would like to share our findings to those who also want to start building games which can run on browsers and mobile devices. And at some time I’ll demonstrate a HTML5 game we had made. This series of articles is intended to cover topics as follows:

  • Ways to make animation in Javascript
    1. setTimeout, setInterval and requestAnimationFrame
    2. tweening
    3. sprite
    4. Javascript animation libraries
  • HTML5 audio api, web audio api and libraries
  • 3D graphics on the web
    1. WebGL and Three.js
    2. 3D model conversion for Three.js animation
    3. Tweening in Three.js
    4. Rotation and Quaternion
    5. Animate morphed model
    6. Animate skinned model
    7. Layout 3D contents in a HTML page
  • Javascript game engines
    1. building games with ImpactJS
    2. writing ImpactJS plugins
  • Develop and deploy HTML5 games to native mobile apps
    1. ImpactJS & CocoonJS
    2. webview in CocoonJS
    3. multi-languag with Impact.JS & CocoonJS
Leave a comment

Posted by on January 12, 2013 in CocoonJS, HTML5, ImpactJS, Javascript, Three.js, WebGL