Posted on

Lux Ahoy: Creating the Top 10 HTML5 Game of 2012

By Dennis Clemente

If there’s an award for the Most Generous Presenter this year in a tech meetup category, the creative digital agency Luxurious Animals is in the lead to win it. The company’s presentation called “Cannons A’Blazing! Post-mortem: LuxAhoy HTML5 Game” last April 18 at the Microsoft office was more than a meetup it was like a workshop.

The event stretched to more than two hours as Luxurious Animals’ founder Garrett Nantz, along with his “team of animals,” showed every stage of the creation of its hugely popular HTML5 game LuxAhoy (http://luxahoy.com/). It was named one of the Top 10 HTML5 games of 2012 by netmagazine.com.

Nantz, who is also its Chief Creative Officer, started the agency in 2008 to merge traditional storytelling with interactivity. Since then, the company has created websites, games, installations, and commercials for brands such as Esquire, Lufthansa, HBO, Porsche, Lunchables and Panera Bread.

The meetup felt like a workshop as Nantz and his team, Tai U, Ali Baranker and Cathy Davenport Lee showed sketches, wireframes and comps, the thinking behind the Box 2d Physics engine as well as the animation process and creation of JS Suite, Spritesheets and Optimizations. He addressed the challenges in different devices, the enhancements, tests and prototypes that happen and the tools that made it all possible.

Nantz is happy to have created the game entirely with the HTML5 canvas tag and javascript, an achievement for a company known for its predominant Flash background. “We were not sure yet how much we could push HTML5. We took our knowledge of flash and thought – ‘rock paper scissors’ would do the trick,” he said.

The challenge in developing an HTML5 game is optimization and browser compatibility. Canvas rendering is reportedly still quite slow on many browsers, even on iPhone4s up and the iPad. Google Chrome is ok, but with certain Android tablets, it’s not unusual for the team to encounter compatibility issues. “We optimize for one and another for our clients to test,” he said.

What does Nantz think now of HTML5? “I thought it was going to be a big challenge (creating games); that it can’t do anything perfectly. But I found out that there are more workarounds,” Nantz proclaimed.

HTML5 delivers the same complex animation, sound, and interaction people have come to expect from Flash. It works on mobile, canvas, CSS3 animations, local storage, plugin-free videos and audios. Even better perhaps is that unlike Flash, Google can index HTML5. Being found, after all, is imperative in a social media world.

Panera: Live Consciously, Eat Deliciously – HTML5 Site and Banner Campaign from Luxurious Animals on Vimeo.

Diving deep into the details, the team’s use of EaselJS, SoundJS, Box2dWeb and a dash of jQuery paid dividends. And in exporting all the character animations, it used Zoë to convert flash animations to spritesheets. It turns out Zoë also works together with Easel.

All assets such as vector illustrations were assembled, then transferred to Photoshop to add light and texture effects. A dozen animation libraries later, the team discovered EaselJS (now a part of his CreateJS).

For its physics engine, the team went with its familiar Flash, Box2D. “We settled on box2dweb, finding it to be the most up-to-date and efficient version,” he said.

“We are happy with the result of our first integration of box2dweb with EaselJS. There was concern initially. We found that the physics of box2d are so good, but when a cannon ball scored a direct hit, the collision sent the ship careening off-screen. To avoid this, we came up with the drop anchor,” he explained. A quick test proved that real-world physics sometimes require real-world thinking.

Overall, Lux Ahoy focused on four areas: mobile, performance, game play, and file size. It even switched from frame-based to time-based animation. With a time-based approach, the team was able to provide a smoother experience by making the application adaptable to varying conditions. The experience is top notch.

For those on the design field, you will like to hear that as much as physics is a big deal for some of its games, Luxurious Animals think the graphics play a big role, too. “We work closely with our designers.” The team also used ImageAlpha to greatly reduce the file size of spritesheets with no discernible loss in quality.

But how does Lux Ahoy work? Like any game designed for mobile devices, it’s a no-brainer. Two rivals – a sophisticated monster called LUXAMILLION and a posh elephant TRUNKFORD – face each other across the seas.

With galleons equipped with massive cannons, they fire cannons at each other. The victor takes home treasure in the form of gold coins, giving players two objectives — to destroy the enemy and to collect as much booty as possible. The loser sinks in the bottom of the ocean.

One other example that impressed people in attendance was the Panera Bread site, which blends photo and video assets captured in a studio with elements created in 3D.

In that outstanding piece of work, the team explored four of Panera’s most important brand pillars–bread, craft, trust, and community. Then it presented this wrapped in a beautiful, tablet-friendly HTML5 web experience featuring an intuitive user interface.

Luxurious Animals stays afloat with its impressive body of work at http://luxuriousanimals.com/videos/