April 18th, 2013 LuxAhoy: Creating the top 10 HTML5 Game of 2012

http://www.meetup.com/HTML5Game/events/104201532/

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” on April 18 at the Microsoft office was more than a meetup—it was 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. It was named one of the top 10 HTML5 games of 2012 by netmagazine.com.

http://luxahoy.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 Garrett showed the nuts and bolts of his team’s creative process. He 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 can 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 iPhone 4S and the iPad. Google Chrome is okay, 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 ‘work arounds’,” Nantz proclaimed.

HTML5 delivers the same complex animation, sound, and interaction that 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 very crucial in a social media world.

Diving deep into the details, the team used EaselJS, SoundJS, Box2dWeb and a dash of jQuery. To export 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. After investigating about a dozen animation libraries, the team discovered EaselJS (now a part of his CreateJS).

The team was immediately drawn to how EaselJS worked with Canvas elements within a familiar context. On the EaselJS announcement page, it downloaded Zoë, an AIR app Grant built to export sprite sheets from Flash.

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 only 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.

Like a mighty galleon, LuxAhoy needed a bit of shine before it was ready for the high sea, it 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 LuxAhoy 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 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.