Recently, we developed a social network game for one of our key clients. We entered the conceptual stage of the project with the presumption that we were going to develop a game for both desktop and mobile native applications. Adobe AIR seemed like a reasonable choice since it does all of the above on more or less one codebase, allowing for rich character design and animations, which were quite a prominent aspect of our game. On that thought, we brought in a professional 3D artist who created concept art and initial renders that were swiftly approved by client.

Great! Set! Problem! Due to new developments we were forced to make the move from a native application to a web app, leaving us with somewhat of a challenge in regards to the character animations. Rendered as either movies or image sequences, they would undoubtedly be too heavy for a web app. The only way to make them less heavy would mean sacrificing either the amount, duration, image quality or frame rate – if not all of them.

But what if we separated the character design from the character animation? Considering that the animation properties we had at our disposal (position, rotation, scale and transparency) applied to both HTML5 and 3D Studio Max, we wondered if creating an animation based on these simple principles, like with a jumping jack, could work. The 3D artist took the challenge and set up a hierarchy of planes representing the head, body and limbs of the character, and made a quick animation test based on these simple principles. Thanks to his expertise in animation, the result turned out to be quite astonishing.

Awesome! So we had great looking animations in 3D Studio Max based on principles that would allow for the same response in HTML5, but now what? 3D Studio Max cannot export straight to HTML5, but it can export an awful lot of animation data with local properties for each display object contained in the character hierarchy. All together, the final character hierarchy contained a total of 10 display objects, and combined with the animation featured on the page, the export was over 4MB and contained 24452 lines of data.

It was clear we had to develop an application to dig through this gigantic pile of animation data and extract and convert the local properties of each display object to global properties (there is no such thing as display object list with the Canvas). Ironically, we developed that tool in Adobe AIR. It’s quick, flexible and has this very handy method called localToGlobal which converts the point object from the display object’s (local) coordinates to the Stage (global) coordinates, prefect!

When you drag-and-drop the 3D Studio Max export onto the application, it extracts the relevant animation properties and applies them to the display objects of its own character rigging similar to the one in 3D Studio Max. This allowed for instant animation playback to validate the import. After selecting the start and end frame of the animation, a click on the button calculated and exported the global position, rotation, scale and alpha properties of each display object contained in the character hierarchy, for each frame in the selected range, and stored it in an object.

Now that we had separated the character design and character animation, it was time to bring them back together. With just a handful of high quality images that made up for all character display objects and an animation object the size of approximately 5kb per second (25fps) in the other hand, all it took was a couple lines of JavaScript to bring it back alive in the Canvas, virtually (if not completely) identical to the animation in 3D Studio Max.

Tags: 3D Studio Max, Adobe AIR, Animation, Client, Game, HTML5

0 comments