.
The Siren’s Song…
HTML5, to many consumers of web content (and clients) is a vague, amorphous, splendid thing. It’s free-trade, 4GLTE, and gluten-free. It’s a good thing, we know, but exactly what it is or does eludes easy description.

To provide some HTML5 clarity, we decided to build an application that showed off real-world capabilities, and quite possibly some of the existing limitations, of modern browsers. An app that delivers the same complex animation, sound, and interaction our clients have come to expect from Flash. One that works on mobile, and doesn't care about creaky old browsers. With canvas and CSS3 animations, local storage, and plugin-free video and audio. A game offered the perfect testing ground, and we didn’t have to wait till International Talk to Like a Pirate Day (September 19th, if you’re wondering) to enjoy some pirate mayhem. Lux Ahoy! was born.

Anchors Aweigh!
Real-world physics was on our list of must-haves, so we began concepting an artillery game build. For inspiration, we played several hundred games of Crush the Castle, its forebear Castle Clout, and yes, their addictive bastard stepchild, Angry Birds. Our CCO and co-founder, Garrett Nantz, loves Captain Morgan's and the pirate lifestyle, so cannons were an obvious ordnance.

An AI component would distinguish Lux Ahoy! from other parabolic artillery games, and offer potential for head-to-head down the line, so two game characters were required. Thankfully, we have an illustrated Luxurious Animals herd. Our “mascot” Luxamillion (a big pink bear with fangs and a monocle who looks like he’s totally a monster but he’s actually a bear) was a natural first choice, with Trunkford, our green, pipe smoking elephant, filling the number two spot as a smug, sea-loving pachyderm.

Hoisting the Sail
The word “diorama” even sounds fun. And having virtual paper cutouts hanging from virtual strings and floating in a virtual breeze (all theoretically possible with the physics engine) would add that level of incidental animation that makes clients open their wallets in awe. Working on paper and Wacom, our designers including the multi-talented James Hutchinson, started with both broad concepts — a whale, a rocky atoll, a sun-filled sky — and small details, like UI components and the characters themselves. We assembled all assets as vector illustrations, then transferred to Photoshop to add light and texture effects.

Avast, Full Speed Ahead!
After investigating about a dozen animation libraries, we happened across Grant Skinner’s easel.js (now a part of his CreateJS suite of tools). Coming from Flash development, we were immediately drawn to how easel.js worked with Canvas elements within a familiar context. On the easel.js announcement page, we almost overlooked a small mention of Zoë, an AIR app Grant built to export sprite sheets from Flash. We downloaded it and gave it a whirl. Shiver me timbers! This was big, allowing us to leverage our immense knowledge of Flash animation directly. (Flash CS6, which wasn’t released when we started Lux Ahoy!, now features similar functionality to Zoë.)

For our physics engine, we went with our familiar Flash friend, Box2D. There are a number of different JavaScript iterations of the library. We settled on box2dweb, finding it to be the most up-to-date and efficient version. Lux Ahoy is one of the first integrations of box2dweb with easeljs, and we’re pleased with the result. (For more technical specifics, check out the tutorial our Senior Technologist, Justin Schrader, wrote up on his technique.)

The physics of box2d are so good, when a cannon ball scored a direct hit, the collision sent the ship careening offscreen. Several kludgey work arounds later, Garrett came up with a weighty solution: drop anchor. A quick test proved that real-world physics sometimes require real-world thinking, as mooring our virtual vessels to the seabed solved the problem.

Yo Ho Hos and Making the Sea Shanty
Music and sound effects are an intrinsic component of game design. Where would Pacman be without the waka waka waka? We were excited about the prospect of sound playback, plugin free. We scoured our sound libraries, fired up Logic and Peak (RIP Bias, Inc!), and got busy using Grant’s sound.js. We’ll be honest: it wasn’t easy, primarily because of Safari desktop and mobile issues. But since all of the CreateJS tools are on Github, forking and editing the code was simple, and with a bit of poking around below decks we resolved our Safari issues.

Swabbing the Deck
Like a mighty galleon, Lux Ahoy! needed a bit of shine before it was ready for the high seas. We focused on four areas: mobile, performance, gameplay, and file size.

Mobile: iOS has been a driving force in HTML5 adoption, and it was a big consideration in our development planning. Lux Ahoy! is 960-by-640 — iPhone Retina ready. Thankfully, that’s also a great standard resolution for desktop displays. Given that Lux Ahoy! is an internal project, however, timeline and budget just didn’t allow for full optimization for the iPhone 3/3gs or Android phones with lower density screens. But with the subsequent release of the Retina Macbook Pro and iPad, we’re investigating building more flexible resolution delivery in the future.

Performance: Our first build of Lux Ahoy! hit a performance ceiling at about 18 frames per second, with mobile being a particular issue. Taking a radically different approach, we switched from frame-based to time-based animation. The results were dramatic. While a time-based approach doesn't "improve" performance, it provides a smoother experience by making the application adaptable to varying conditions. During the switch, we also dug deeper into easel.js and Box2D's event loops and optimized.

Gameplay: Games are iterative, and even small tweaks can have a big impact on playability. After a month of development, Lux Ahoy! looked gorgeous and performed beautifully. But it lacked a strategy component. We added gold coins, giving players two objectives — to destroy the enemy and to collect as much booty as possible in the process. Yes, we finally said booty!

File Size: Sprite sheets can get big, but an often-neglected feature of PNG8 is that it supports full alpha transparency; Photoshop doesn’t support this feature, but Fireworks and a host of open-source utilities do. We used ImageAlpha to greatly reduce the file size of our sprite sheets with virtually no discernible loss in quality.

The Bounty
Since we built Lux Ahoy! as an internal project, any positive response is gravy. And with all the folks who seem to enjoy playing the game, every day is like Thanksgiving for us. That's extremely gratifying.

Lux Ahoy!, without any advertising or active promotion behind it, has gained some terrific traction. Myriad media outlets and blogs featured the game while it was still in development. Even the FWA scouts asked for a site of the day submission before we were out of beta (much appreciated!). Happily, HTML5 game development is still novel enough to be newsworthy.

With an average game play of over 9 minutes, maybe we should be less surprised that game and browser companies have requested Lux Ahoy! to be featured on their platforms. As part of those efforts, we have have some bigger plans for Luxamillion and Trunkford coming up later this year. In the meantime, we hope you’ll enjoy playing Lux Ahoy! too. Even when the salty pirate kicks your booty in the volcano round.

The game's success has made it clear that HTML5 has a very bright future – and that showing off what HTML5 can do is likely the easiest way to define it.

Hey, if you like the game (and/or pirates for that matter), give us a shout at: info@luxanimals.com.

Links

hr


Preliminary Lux Ahoy Sketches
Preliminary Lux Ahoy Sketches

Lux Ahoy Start Screen
Lux Ahoy Start Screen

Isle of Coconuts Level
Isle of Coconuts Level

Spout Belly Bay Level
Spout Belly Bay Level

Fire 'N Goats Level
Fire 'N Goats Level

All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact