June 21, 2012Wooga’s HTML5 Adventure

Be on the lookout! Wooga has just released a very special creation into the wild as an open source project. That creation is ‘Pocket Island’, a HTML5 game developed by Wooga that is now available for all to download and iterate upon.

Pocket Island is the result of an ambitious one year project here at Wooga with the original goal being to push HTML5 gaming into new territory and create one of the world’s most advanced HTML5 titles. One year later and it’s mission accomplished.

Now, Wooga wants to see how the HTML5 community can use the lessons learned from Pocket Island and develop the technology forward to the point where it’s fit for mass market consumption.

A long, long time ago…How a magic island became a pocket one

Pocket Island originally started life as Magic Land, a native Facebook app that was well into its development cycle when the buzz surrounding HTML5 reached fever pitch in early 2011. Wooga had been asked to work on a game that would launch alongside the platform and in May 2011, the decision to create a HTML5 version of Magic Land, called ‘Magic Land Island’, was decided upon.

“Given the excitement around the technology, the buzz in the media, the buzz among engineers you’d bump into at conferences, it would have been absurd not to at least test the technology. So, we did”, says Philipp Moeser, Wooga’s co-founder and CTO.

A small team was created to start work on the game with the goal being to create one of the world’s most advanced HTML5 games. As assets from the native version were readily available the long work normally required to build a prototype was dramatically shortened and the tight deadline of two months look entirely feasible.

At first the project was strictly an experiment – a quick dip of the toe into the vast ocean of possibilities that is HTML5. The water wasn’t as cold as the team expected though. Fast progress was made and the game quickly began to take shape.

“We were surprised with just what could be done with the technology after such a short time working on the project,” says Magic Land Island Project Manager, Florian Steinhoff. “We had a level of correspondence with Facebook that kept our goals in check, so that was helpful, but it was essentially an original team of three that launched the project and it was developing faster than we expected.”

Shortly after Magic Land Island began hitting its stride and it was time to widen the parameters of the experiment. “When the project started to take shape we added team members fairly consistently over time until we ended up with a team of around 10 people. With every added team member the game took big strides,” says Florian.

Work increased as the deadline quickly approached and on October 10th 2011, Magic Land Island finally launched.

Back, to the Future

As the project continued to progress, so did the industry. Whilst the benefits of an open platform future are clear for games developers, it became clear halfway through Magic Land Island’s development cycle that the technology wasn’t yet ready for mainstream exposure.

“In the latter stages of development, the game was fully functional, but lacked the polish of the natively developed apps,” says Horia, one of the Wooga engineers who worked on the project. “Features possible on the native side were still possible to implement with HTML5, it’s just that it took much more time – time that we’d have much rather been spending on improving the gameplay mechanics rather than ensuring they worked”.

Facebook’s HTML5 app launched in October last year, and while there have been games that have delivered on some of the promises the technology offers, the games themselves weren’t up to the standards of native apps.  Problems such as a long initial load time, lack of sound on mobile and the reliance on being connected to the internet were all big problems. When the game originally launched on Facebook’s mobile platform, users simply weren’t used to there being no app icon to quickly return to the game. One quick press of the home button would return them to the home screen with no clear direction how to return. Such limitations had a knock-on effect to the game’s growth.

Players launching the game were counted as an ‘install’ by the team. Installs were initially very low, as users struggled to find the game page. On November 21st the native Magic Land team added a cross-link to the HTML5 version in an effort to boost installs. The idea worked in boosting installs, although the number was still not as high as the team wanted. Retention rates remained exceedingly low with around 5% of users returning to play the next day; Diamond Dash, for example, sees an average of close to 50%. In April the cross-linking was removed and installs dropped back down. In total, 1.3 million users played Magic Land over the course of its lifetime.

What lies ahead for HTML5?

As any HTML5 developer will tell you, coding HTML5 is hard work. What is a simple task on native apps can be a decidedly more complex and time consuming task with HTML5. From online to offline, animations and sounds, HTML5 development can be a rocky road to success. So why persevere?

“The mobile app market is a billion dollar business that HTML5 could significantly disrupt. It has the potential to be a complete game changer, but the technology is not there yet” says Moeser.

Whilst it is technically possible to play a HTML5 game offline, an internet connection is required to load the game for the first time. If their connection is too slow, or drops out, many users will simply give up and return to playing a native app with an almost instantaneous load time.

When the game first launched it relied heavily on the user having a stable internet connection. To reduce the initial load time the team limited the downloads to five levels at a time. That meant that the user had 5 levels to play offline before they ran out of content and had to go back online to update and continue their progress.

Afterwards the team launched a version in the iOS app store that could be played offline. This helped with reducing the amount of users who dropped out, but also lead to a static user experience. Without a connection to a server, new content couldn’t be loaded and any changes the team wanted to be made would have to pass through Apple’s screening process first.

Sound can also be cause for concern. “It’s a tricky one,” says Horia. “Sound on HTML5 has some peculiar limitations. It can only be activated via user action and there’s a delay of about half a second that can make for a strange in-game atmosphere.”

It’s not all doom and gloom though.

“It’s important to note that there are solutions to many of these problems,” says Horia. “We solved many an issue during our time on the game, and we’re immensely proud of the progress we made. There is a huge community of talented developers out there coming up with new solutions all the time and it’s amazing to see how fast the technology is progressing.”

And this where the HTML5 community comes into play. Magic Land Island has magically transformed into Pocket Island and is available to all. As the original Magic Land remains alive and well on Facebook it was necessary to rethink the name and remove a few graphics but asides from those minor changes, everything is there. License-wise, the open source project has an MIT license and the art assets are under a Creative Commons Non-Commerical license.

The reason we’re making Pocket Island open source is so that talented developers all around the world can learn from the team’s work here at Wooga, before breaking and improving on it. The promise of HTML5 is still an exciting one and while the time for mass market implementation may not be in 2012, we’re confident its time will come.

_____________________________

Epilogue: HTML5 Explained

HTML5 is an open platform technology for the web that allows a game to be played on any mobile device through the web browser, bringing with it huge potential for the games industry. Currently platforms like Apple’s iOS and Google Android require developers to create unique code for each platform so that the app can communicate with the platform, and vice versa. HTML5, on the other hand, is a universal language meaning that developers only have to create one codebase for a game.

This is the future though and we’re not quite there, yet. That’s where the Pocket Island open source project comes in.

______________________________

Further reading:

Mobile games and the HTML5 hype cycle

http://www.readwriteweb.com/mobile/2012/03/qa-zipline-ceo-todd-hooper-mob.php

HTML5 game development issues

http://csharksgames.blogspot.de/2012/03/html5-game-development-issues.html

Offline: What does it mean and why should I care?

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

HTML5: Too good to be true

http://www.gamesindustry.biz/articles/2012-05-11-html5-too-good-to-be-true

HTML5 Updates:

http://michalbe.blogspot.de/

Making a speedy HTML5 game

http://developers.facebook.com/html5/blog/post/2012/04/17/making-a-speedy-html5-game/

HTML5 on browsers

http://techcrunch.com/2012/04/20/facebook-google-apple-html5/