Reset password:

Something to think about... / blog
The Kraken Awakes - Brining Gaming to HTML5

Written by on December 21, 2010

Grant Skinner has developed a tower defense game called Pirates Love Daisies entirely in HTML5, and it is absolutely stunning.

The game stars "a colorful band of pirates who fight to defend their precious daisies from a band of marauding sea creatures. The player positions pirates - each with different skills, ranges of weapons, and weaknesses - at strategic positions around a sandy landscape, and leaves them to destroy every wicked octopus, crab, rat, and seagull in their path. As players accumulate gold from destroying his or her enemies, they can upgrade the pirates' skills or add more pirates, building a veritable army to fend off the ever-escalating waves bent on stealing their flowers and carting them off to sea. "

Note: Video review via Channel 9

The game is developed with Microsoft to demonstrate the potential of HTML5 in Internet Explorer 9. It took two months to build, and works in all modern browsers. But, when I tried it out on my iPad, it was a slow and painful experience. After more than 30 minutes it had still not finished loading.

Grant also notes the performance problems on iOS:

IE9 was the big stand out on graphics performance - its GPU-enabled engine is smoking fast, especially with large bitmaps. Interestingly, we found that iOS had terrible performance (when it worked at all) - something like 4-5x slower than Android on comparable hardware.
One other thing we found that's worth noting is that drop shadows are ridiculously slow in canvas. A few small drop shadows rendered to canvas could drop our framerate in half.

The problem isn't limited to iOS though, as the game loads five times as fast in Chrome than in Safari. And Chrome loads four times faster than in Firefox - all on the same hardware. I currently do not have a Windows computer at hand, so I was unable to test it in IE9.

But, If you are using IE9, you get the option to "enable additional effects for IE9", which enables some additional graphics.

While this is a very interesting technology showcase, and might lead the way for non-flash games in the browser, it also shows that HTML5 is not quite there yet. It works great when you restrict yourself to a single browser, where you can use the specific technology to increase performance to a good level.

HTML5 is actually a collection of standards at different levels of completion, so while it's easy to refer to this as an HTML5 game, it really just leverages a few of the new features that are included under that umbrella. Specifically, we used canvas for drawing the game board (terrain, units, creeps, effects, etc), local storage to save local scores, the audio element for all of the sound, and embedded fonts throughout.
We also ran into some browser incompatibilities, though far fewer than we initially feared. The worst of them revolved around audio. It seems that every browser has its own set of irritating quirks related to dynamic audio that we had to stumble our way through. We wound up building an audio manager to resolve these issues that we may clean up and share in the future.

But with the browser manufacturer's reluctance to agree on a common standard for hardware acceleration it is still a mess. Chrome and Safari got Webkit animations, IE has their own graphic system, and Firefox 4 will feature yet another.

It is the CSS non-compliance days all over again. Get it together guys!

Share on

Thomas Baekdal

Thomas Baekdal

Founder of Baekdal, author, writer, strategic consultant, and new media advocate.

Follow    

Baekdal PLUS: Premium content that helps you make the right decisions, take the right actions, and focus on what really matters.

There is always more...