Lux Ahoy: HTML5 Game
FWA Site of the Day – April 23, 2012
I recently helped my buddies Luxurious Animals launch a new HTML5 game demo called “Lux Ahoy”. The game, currently in beta, is a 2D physics-based action/shooter where two pirate ships take turns firing cannon balls at each other until one of the ships sink. What really sets this title apart is the stunning artwork as well as the play achieved through the design of each level. All the credit for creativity, design and game development goes to Lux and their fantastic team.
I was brought on just before launch to work on optimization and compatibility with mobile devices – iPad and iPhone being the primary focus. The game uses a combination of HTML5 Canvas and CSS to achieve layered animation. While some might choose to do everything in canvas or vice versa, Lux found a happy balance between both. As a late comer to the project, this is something I had to contend with. The majority of what I did to improve graphics performance was to ensure that DOM elements being animated with CSS were being treated as accelerated render layers in WebKit. Accelerated compositing had a big impact on all of the UI transitions as well as some in-game elements. I owe the techniques I used to Matt Seeley, an engineer at Netflix, and the talk he gave in January at the HTML5 Dev Conf.
While I left the HTML5 Canvas code alone for the most part, it’s worth mentioning that the game uses Grant Skinner’s EaselJS and SoundJS as well as other parts of his upcoming CreateJS framework. Most of my effort there was on SoundJS and making sure that HTML5 Audio would play on Safari. We also had to support background music on iOS where we’re limited to playback on only one audio channel which must be triggered by a user initiated event (on click).
I’d still love to take a stab at speeding up the canvas rendering or even porting the game’s sprite animations to accelerated rendering with CSS3. The canvas animation performance is acceptable as long as you’re running a recent version of iOS. I don’t recall hearing that Apple added accelerated canvas rendering to WebKit in iOS, but something is certainly better in iOS 5.1 than say 4.3.
I also helped with a few other details that I consider specialties of mine: social network widgets and Google Analytics tracking. We’re still watching and waiting for more results so please head over to luxahoy.com on your desktop or smart phone and let me know what you think!