Lux Ahoy is a new Worms-style combat game created by New York based digital agency Luxurious Animals. Played out as a battle between the two main characters: Luxamillion, a monocled pink monster and Trunkford, a pipe toting green elephant, the battle takes place on the high seas, ship cannons a-blazing.
As with games of this genre you control the angle and power of your shot. The cannon ball flies off and depending on your aim, bounces around the environment with convincing physics, hopefully causing suitable destruction in the process. If your aim was true, or like me sheer luck was on your side, then it’ll eventually land on your opponent. Three strikes and they sink, making you the winner.
Visually the game is beautiful. A very stylish hand painted look adorns the environment. Everything animates as if they are paper cut-out marionettes. When the cannon balls hit the clouds they react as if suspended from pieces of string. It’s somewhat reminiscent of the Paper Mario games, and works really well, helping to set the atmosphere. The graphics were created and animated in Flash and then exported to sprite sheets using the tool Zoë.
The game code is weaved together through judicious use of Box2D for the physics, SoundJS for audio handling and Easel.js for graphics and animation. Easel.js is a natural route for Flash developers moving to JavaScript due to its similarities to the AS3 Display List. The developers blogged about their process of integrating Box2D with Easel.js, a useful resource for anyone else going down that route. Performance on desktop browsers was great, especially those with GPU acceleration. The richness of the graphics really shone through and it was nice to see it running at a decent resolution. On mobile sadly it’s only really playable on high-end devices such as iPad 2 and iPhone 4. Anything less and the frame rate suffered under the weight of all the visuals. It’s not fair to expect an HTML5 game to work across every device, they have to be coded from the start with the destinations in mind, just like any other game. But I can’t help but feel it could have performed great on mobile had there been the option to disable some of the more superfluous effects and sounds.
That aside, Lux Ahoy is a fun and polished game and I look forward to them unlocking some of the new islands soon!
YES! Things are finally getting somewhere: a HTML5 game that reaches Flash games base level (sceptic eh
. Works nicely, is fun and looks good too (and it pops and it bounces as well). Performance on FF11 was not so great: I’m not sure about the magenta loading bars :-p
Platforms do not set the quality threshold. Developers do.
Drawing to canvas is what slows the game down on mobile platforms. I’d love to see a version of Easel that uses CSS 2D transforms. That we could take advantage of accelerated rendering in WebKit browsers. WebGL might be another route that keeps us in the canvas realm. The game is currently doing some things with canvas and some with CSS. I want the game to do all the drawing one way, depending on which is best for platform it’s running on. My write up http://www.robwalch.com/luxahoy/
Canvas is accelerated on mobile safari (iOS 5+), Mobile Firefox and Chrome Android, but you’re right on anything else it will have issues given the large quantity of rich graphics in the game. Easel.js isn’t helping matters though. All objects are literally blasted to the context, brute force style, and (in the current version at least) there’s no support for dirty rects or spatial hash maps, both of which could help rendering performance. None of this stops it being a great game though, so kudos to you and the lux team for that!
Thanks Richard! We definitely want to up the quality threshold on all screens and environments. Animating sprite sheets might be a disaster with CSS3, so if we could contribute some brain power to EaselJS (maybe a fork) to buffer the draws, that might be a cleaner path to a smoother game on older portables.