Web of opportunity: The new frontier of web game development

It’s possible to find and play more games on the web today than on any other games platform. MMOs such as RuneScape. FarmVille clones. Advergames on that hot-new-band-of-the-moment’s hompage. And they’re free.
Nowhere has the ideal of openness been more present than the web. New frameworks, such as HTML5 and its interchangeable component parts, have kick-started another revolution in web games development.

Of course, anyone who’s had their game time halted by broken plug-ins or scripting errors can appreciate that the web is far from perfect. But a committed group of companies is working to make the web an easier, more user-friendly place to develop games for.

NOT-SO-SIMPLE MARKUP LANGUAGE

“The single biggest issue is multiplatform support; a game that works across desktop and mobile web browsers equally well,” Richard Davey, director of Photon Storm, tells Develop. “The reason this is an issue is to do with performance. On desktop you’ve got proper GPU-accelerated displays and they are often hard-wired into fast networks or stable Wi-Fi. On mobile, you’ve got an almost uncountable number of GPU and CPU combinations, displaying on a huge number of screen sizes and often via flaky 3G networks with strict bandwidth limits. The gulf between desktop and mobile is vast, and the gulf between low-spec and high-end mobile devices can often be just as crippling if you don’t plan for it.”

Davey says there is “no easy fix for this”, and that it can dependent on the kind of game you’re building and the intended audience. Photon Storm is behind the HTML5 games framework Phaser, which has been adopted by thousands of developers for their projects. Phaser, Davey says, mitigates the pain of working cross-platform by taking away the issues such as device audio limitations, allowing your game to run in WebGL and enabling easy asset loading.

“However no software can perform miracles, and no matter what you’re developing in you always need to build for the platform and keep its limitations in mind at all times,” he adds.

Of course, HTML5 development itself can be a bit of a misnomer. It is fact an umbrella term encompassing a number of web technologies such as Canvas, WebGL, web audio and video, among others. The ideal, says Iker Jamardo, VP of engineering at CocoonJS creator Ludei, is for one code base to work across all hardware platforms.

“The reality is that the web browsing technologies available on each platform are very fragmented and the performance that they provide, especially on mobile, is far from being what games developers expect. This lack of a common ground HTML API support and low performance is what has held back web gaming from moving forward,” he says.

This is something that Alistair Macdonald, lead developer at digital entertainment studio Chunk, acknowledges too. Chunk builds web games for brands and broadcasters, such as Cadbury, Disney and the BBC, many of them focused on children.

“Our web games have to play on a huge range of devices, platforms and browsers. Currently, there is no single tool that works across the entire range, so every HTML5 game we make is hand-coded and built around our in-house framework,” he explains.

Chunk is expected to get its games running on fairly low-spec devices, he adds, which has been pretty challenging, despite HTML5’s advantages.

SOFTWARE OR SUPPORT?

For all the rhetoric surrounding the web standard, making games using HTML5 is no straightforward process right now. Particularly for first-timers.

Having a robust pipeline coupled with capable tools has been a “major roadblock” in the web space, says Rikard Herlitz, founder and CTO of Goo Technologies. The Swedish software maker has a vision for a world where all digital experiences are available instantly on devices everywhere, helped in part by its own tools, such as Goo Create, to enable “instant access to 2D and 3D games”.

Herlitz says: “Supporting the creation of game levels with direct visual feedback helps immensely, but it is my opinion that the combination of this with in-tool scripting is what really makes a difference. To be able to stay in the tool, adjust the scene, adjust your code, press play and get instant feedback of the state of your game is really mind-boggling.”

Thanks to WebGL, web audio, WebRTC and other APIs, Herlitz also feels web developers are getting a tonne of power while still being easily accessible. And this combination of power, ease of use and target reach is already changing the landscape, he adds.

Perhaps that’s why Turbulenz CEO James Austin feels it’s a question of financial support, not technology, that’s putting off other devs from joining the web game revolution: “It’s not a technology challenge anymore, sure all the platforms we build upon could be better for games, but today it’s mainly a return on investment challenge. Developers still need to see a significant commercial success to attract them away from native and device-targeted alternatives.”

Mozilla is looking to reduce the overheads for developers with its web technologies Enscripten and asm.js, a highly optimised subset of JavaScript. This cross-compiled code allows game content to run at speeds close to that of native. Vladimir Vukicevic, engineering director at Mozilla and inventor of WebGL, says it will reduce costs by “delivering a high fidelity experience previously only possible via plugins”.

GONE IN A FLASH

With its ability to run on desktops and mobile platforms, HTML5 has been hailed as the technology that will supersede Flash. iPads, with their Flash-averting iOS software, were the dominant platform for mobile viewing in 2011, with Apple commanding a 52 per cent share of the mobile web browsing market, according to Net Applications’ data.

Nonetheless, Flash still remains the choice of some developers, thanks to the striking results that can quickly be achieved with it and knowledge that’s been built up around it.

“The reason we chose Flash 3D over HTML for EndWar Online is that Flash remains the engine of choice for web games,” explains Zhou Hui Bo, prouder at Ubisoft Shanghai. “Firstly, it has Flash Professional, a great artist-friendly tool. For web games like EndWar Online, even 3D ones, UI remains an essential component and there’s no better than Flash to build a high quality UI.

“Secondly, different browsers have different standards to run HTML5, and this can cause performance issues and require a lots of compatibility testing, which is much, much heavier than with Flash. So, today we still firmly believe that Flash is the best engine for our game, and we don’t regret choosing it over HTML5.”

Although conversion aids such as Web Marmalade and Ludei’s CocoonJS exist, complications still exist before developers can achieve the results they’re after. Like Chunk, which still hand codes its HTML5 games, Hui Bo says when it came to using Flash for 3D development Ubisoft had to start from scratch and build its own engine, editor and tools.

“We found out that Flash 3D programming is quite different from the original, and that we needed time to learn and master it. Fortunately, Adobe and the developer community were of great support by shipping the tools and framework, whichwe needed and helped us a lot,” he adds.

MAKING IT ON MOBILE

However, while mobile platforms have become a major focus for HTML5 developers, Hui Bo says Ubisoft is content with Flash and its desktop-focused audience: “We must not forget the end user experience. Mobile and tablet have very different controls from PC. This means parts of our gameplay would have to be redesigned. To be frank, we still have so much on our plate with the PC version that for now mobile is taking a back seat, but that doesn’t mean it won’t happen.”

Ludei’s Jamardo argues however that the need to bring titles smartphones and tablets has been a major factor in developers choosing to build their web games with HTML5: “Games developers, and especially publishers, are realising that a lot of the traffic they are starting to experience on their products is coming from mobile and this is where Flash has failed to deliver.

“In a completely saturated market, being able to deploy everywhere, such as inside the browser or even outside of it as a native app, with the same code base becomes a great, and sometimes the only, opportunity for success.”

But Austin says that understanding who their game is for should be developers’ primary concern: “Once you know who you’re targeting you can then work out which devices this group is using. Everything should be player rather than device focused. But having said that, many players new and old are looking for content across mobile devices. With this in mind, we make sure that our games and the Turbulenz Engine work across all devices.”

PAGES OF EMPOWERMENT

Today, Photon’s Davey says “we’re in a weird flux” because of HTML5 standards, the constantly evolving browsers and the hardware fragmentation of mobile devices.

“Be prepared to unlearn what you know every six months,” he says. “For example, six months ago Internet Explorer didn’t support WebGL – now it does. You have to keep on top of these changes, or work with a game framework that does it for you. This can be tiring, but it’s the only way to keep evolving and innovating, and not let one company dictate what happens when.”

Perhaps these issues are why Chunk’s Macdonald feels that HTML5 hasn’t superseded the ease of Flash: “In terms of accessibility and speed of production, web games development has gone backwards in the last few years. Nothing has come along yet that matches the convenience of Flash combined with its market penetration.”

Despite the bumpy nature of HTML5 development the two major strengths that developers who choose it frequently return to are its open source nature and its active community. The challenges HTML5 presents are offset by the community, as firms such as Turbulenz, Mozilla and more contribute tools and fixes to be used by all.

But its real benefit, Davey says, has been lowering the barrier for a host of first-timers to begin building web games of their own: “It has opened up the ability for anyone to create a browser game. They can literally open a text editor, drop in a few lines of code and have something running immediately. No compilation process, no dev tools, no cost. This is extremely empowering.”

Jamardo concludes that the next step in attracting more developers to the tools on offer is for killer apps to appear: “Web game development tools are coming together and more developers will come to the platform as they evolve and show their potential. They just need great games to be developed using them in order to validate them. This is happening right now and we are starting to see the first amazing results of a thriving community, eager to show that the web can also be a great platform to develop games.”