Original Tech Research

When the project began, our goal was to port the Picturrific game from Flash on Facebook to HTML5. Large Animal wants to move Picturiffic to iOS, on devices such as the Apple iPhone and iPad. Some issues arose while we did some initial research in this area to start the process.

First off, MobileSafari includes some restrictions on sound files:
1. Audio files may not be pre-loaded or played automatically. They may only be played as the result of user input, such as a button press.
2. Only one audio file may be loaded at a time. This prevents the use of simultaneous audio, such as background music and sound effects playing concurrently.

The solution to these problems was to release the game as a native iOS application (“app”), parallel to its HTML5 release. One option for supporting this parallel release was to use a piece of middleware, such as Phonegap. Phonegap takes HTML and Javascript files and compiles them into a file usable by mobile devices, such as .apk files for Android devices, or files written in Objective-C for iOS devices. Because Phonegap compiles the files for the web version into native language automatically, the code only needs to be written once, and could then be deployed in multiple ways. This was not an efficient way of producing clean code, but it was the easiest pipeline we discovered.

With the sound problem solved, we turned to the task of actually generating code. We experimented with the tool Google Web Toolkit (GWT), which compiles Java code into Javascript for use with HTML documents on websites. GWT itself worked well and allowed us access to HTML5 elements such as the canvas, one of the core additions to HTML5.

The next step was to create a specific pipeline to integrate art assets, such as animation, with the code generated by GWT. The team looked into two HTML5 animation tools to complete this task: Adobe Edge and Sencha Animator.

Adobe Edge stood out as a very promising tool. It provides artists with tools similar to those of Adobe Flash, such as the timeline and stage, and outputs animations as HTML5 webpages. However, Edge is still in a preview stage (which means that Adobe only released it to generate buzz about its capabilities), and it is not complete enough to integrate its animations into other projects. Because it can only output Javascript and HTML, Edge doesn't interface well with GWT, and complicates the pipeline. Additionally, the animations need to be static; there isn't yet a way to use dynamic elements from the page. Because of this, the team had to abandon Edge despite its potential.

Sencha Animator is another HTML5 animation tool in development. However, Sencha creates animations through CSS3, and appears to be much better suited for content like advertisements, which can be played continuously and don't depend on user input. Because of this, the team decided that Sencha would not be robust enough of a tool to adequately create the animations needed in the game and decided to take another route.

The final HTML5 approach the team considered was procedural animation. The artists would plan out the timing and positioning of animations, and the programmers would hard-code them into the game. In the end, it was decided that this route would devote too much of the team's time to working out animation and not enough to making the game fun, playable and polished.

With no clear pipeline to unite the code and art assets, the team decided to pursue Flash development instead of HTML5. While MobileSafari doesn't support the Flash Player plug-in, it is possible to use Flash to create native apps. In September 2010, Apple lifted the restriction on third-party app-creation software. As a result, Adobe added a packager to their Air platform to allow programs written in Actionscript to be released on iOS devices.

Flash apps on iOS work differently from other uses of Flash. Normally, Flash executes Actionscript commands at run-time. This is how Flash works on traditional web-browsers and in apps published through Air for Android devices. Apple, however, forbids the Just-in-Time compilation Actionscript usually relies on. Instead, when code is published through Air for iOS, it is compiled into Objective-C, making it compliant with Apple's app requirements.