Gamasutra: The Art & Business of Making Gamesspacer
Making the Move to HTML5, Part 1
View All     RSS
July 28, 2014
arrowPress Releases
July 28, 2014
PR Newswire
View All





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Making the Move to HTML5, Part 1

February 7, 2013 Article Start Page 1 of 3 Next
 

In this first of a three-part series, seasoned console developers, formerly of Criterion, describe the process of moving to HTML5 development, discussing the differences between working in C and JavaScript, and explaining dealing with the difficult environment of the browser.

Like any platform, HTML5 receives its share of criticism, some valid and some based on rumor or outdated information. However, HTML5 is keenly supported by some of the most successful business leaders in the space, and the games available right now on turbulenz.com are proof that HTML5 is viable for high quality gaming today. We hope the below will help explain why we have backed, and continue to back, HTML5.

HTML5 and related standards are fast making the web a viable platform for high quality games. Games written to target such web standards can run in a variety of contexts while taking advantage of the power of the underlying hardware, as well as the connectivity enjoyed by modern devices.

Turbulenz has invested a significant amount of research and engineering manpower creating a high-performance games platform for the web. With a background in game technology development on consoles, we have approached HTML5 and related technologies from a game developer's perspective with fidelity and performance in mind.

This series of articles describes some of our experience transitioning from consoles to the web: what works well, when to use it, optimization strategies and workarounds for ongoing problems.

Some of the games built using Turbulenz can be played on the turbulenz.com game network, which uses our HTML5 platform and infrastructure to instantly deliver high quality 3D games to gamers online. The company was founded in early 2009 by a group of directors and lead programmers from Electronic Arts, and the team has grown to include developers and business professionals from some of the world's leading entertainment companies.

In this first article we talk about the current state of HTML5 and related technologies for games, and give an overview of the development environment and workflow that game developers can expect.

The Browser as a Game Platform

The browser has become the new OS, bringing with it a host of problems as well as opportunities. In the past, games traditionally ran in isolation, consuming as many resources as possible to extract the full performance from the machine. Game code running in the browser will be competing with the rest of the browser’s processes, including other games running in other tabs or windows (as well as whatever else may be running on the machine).

In some ways, each browser must be treated as a different platform: some interfaces are common across all browsers and some resources are always available, but for more advanced functionality, the developer must often check for features at runtime and provide multiple code paths and workarounds.

The test matrix covering Browser, Browser version, OS, OS version, and Hardware is large. Furthermore, although hardware resources cannot be accessed as directly as with native applications, developers still have to deal with graphics driver bugs as well as bugs in the browser layers that now interface with those drivers.

With the fast pace of browser updates and the fact that some browsers update themselves automatically, it can be difficult to maintain a specific list of supported versions to test against. At Turbulenz we always work with the latest version of each browser and also a list of well-known popular browser versions. At the time of writing, this includes Internet Explorer 8, 9 and 10, Firefox 3.6 and latest, Safari 5.1 and latest (on Mac OS X) and the latest version of Chrome. We test on a range of hardware from slow netbooks to high-end desktops using a selection of popular video cards from Nvidia, AMD, and Intel.

The relative market share of the browsers is always in motion and is usually not consistent across demographics. We recommend finding your target market and studying the browser stats for sites with a similar audience.

As a development platform, the browser has several advantages compared to other platforms. In general, iteration is extremely fast (JavaScript requires no compile step during normal development and refreshing the page immediately loads and runs the latest version of the code). Web developers have long enjoyed access to a range of tools for debugging and profiling, and these make up a very effective development environment. More details are given later in this article.

In general, when coding for the browser we recommend that developers code defensively, test with a range of browsers and regularly monitor the state of new versions.


Article Start Page 1 of 3 Next

Related Jobs

Integrated Military
Integrated Military — Remote Work Possible, Florida, United States
[07.27.14]

Software Engineer
Cloud Imperium Games
Cloud Imperium Games — Austin, Texas, United States
[07.25.14]

DevOps Engineer
Cloud Imperium Games
Cloud Imperium Games — Austin, Texas, United States
[07.25.14]

Animation Programmer
Cloud Imperium Games
Cloud Imperium Games — Austin, Texas, United States
[07.25.14]

Server/Backend Programmer






Comments


Keith Nemitz
profile image
"Unfortunatelly, both the Turbulenz Engine and WebGL only support OS X versions higher than 10.5. Please update your operating system"

The constant push to update software may be good for the economy, but its like superficial consumerism on steroids.

The reason I don't upgrade my Mac is, it allows me to make my games compatible with 10.5 and above. Try any of the demos at www.mousechief.com, to see what I mean. (and the same goes for Windows. They all run on XP or better, and some still run on Win'98.)

David Galeano
profile image
As our technology runs in the browser we are limited by what the browser developers decide to support, and 10.5 is not high on their list of priorities. AFAIK there are no browsers supporting WebGL by default on 10.5.

David Sena
profile image
Nice article. Pretty thorough overview of the technological side of HTML5 games.

Enjoyed particularly the example about the problems with Space Ark and how they were solved. It helps to give a more pratical perspective about the whole matter.

K Gadd
profile image
Good article. I have to disagree with the suggestion to use jsperf microbenchmarks to decide what approach is fastest, though; there are many scenarios where jsperf's crazy design will cause the microbenchmarks to not match reality. The way it's written suppresses some of the optimizations performed by JS runtimes and causes other optimizations to apply to entire benchmark runs, obscuring the actual cost of your code. It also has a rather strange approach to variance where benchmark scores with high variance (due to GC pressure/pauses, for example) are treated as equivalent, making its conclusions entirely false.

In general for performance testing in the browser, right now you really have to settle for timing things in the context where they're actually going to run. This lets you take into account the work the JIT does to optimize your code and better observe secondary effects (like GC pressure, which may not show up at all in jsperf).

Duncan Tebbs
profile image
That's a good point. We have indeed created a lot of benchmarks outside of jsperf.

The examples you gave (GC pauses and looking at the effectiveness of JIT, in particular when using Typed Arrays) are exactly the kind of things we've had to measure with our own benchmark setups.

David Galeano
profile image
Microbenchmarking using jsPerf is just another tool in the box, it is not perfect as you said, but it has its uses. If the results we get using jsPerf are inconclusive or do not correlate with performance gains in the game, then we write our own benchmarks or try different approaches, as my colleague Duncan said.

But of course, micro-optimizations are the last thing we try, our main target is improving algorithms, logic and data structures, and that is what produces the biggest gains.

Steve Fulton
profile image
This is some great stuff! Thanks.

Paul Lenoue
profile image
I just checked out Turbulenz and am impressed! Great use of HTML5. I look forward to the rest of the articles. I just hope they try to make some non-standard casual games in order to stand out from the rest.

Lennard Feddersen
profile image
Never gets past "Loading..." on my iPad.

David Galeano
profile image
Which game did you try? It is possible that it run out of memory. We have similar issues on some Android devices and we are working on reducing the amount of resources used for tablets and mobile.

Did you try the samples at http://biz.turbulenz.com/samples ?

Lennard Feddersen
profile image
Hi David, Save The Day and Polycraft. I ran Polycraft on my desktop just fine.

David Galeano
profile image
OK, thanks, we'll look into it. Until recently WebGL was not an option on mobiles and tablets, it is still in beta actually, so we were focused more on desktop support.

Kevin Long
profile image
Really nice start to this series of articles. I look forward to taking some of these ideas into my games and HTML5 classes.
Thanks.
Kevin


none
 
Comment: