Game console controller

Computer gaming is not what it used to be.

Games targeting hardcore gamers have traditionally relied on storing data in high-density media (DVDs) and pushing graphics with powerful graphics processing units. But with the nascent growth in web-based games, players are demanding a gaming experience comparable to desktop games.

But streaming big chunks of data might not always be the best scenario, and users might be left hanging when a web-based game does not load as quickly as expected. Simply packaging and compressing game data may not be enough, as content downloads might still be vulnerable to lags and low quality-of-serive.

Here is where asset management plays a part. HTML5-based games are attracting developers and gamers alike, because of the cross-platform compatibility and the ease by which developers can port their games into the platform. In terms of optimizing game content for the best web-based and mobile web experience, here are a few ideas and resources.

Content delivery networks

Content delivery networks (CDNs) are an extremely efficient means of accelerating asset download. These range from hosting static files on alternate servers or hosting these assets on third-party distributed hosting services like Akamai, Amazon Web Services and CloudFront. However, even with the use of CDNs, connection throttling within a browser might result in lags when there are large images on a page that need to finish loading before other assets like CSS and JavaScript begin loading. Also, serving from a CDN might increase the number of active requests that a browser can make while accessing game assets.

Server-controlled caching

To speed up access to content, HTML5 applications can use server-controlled caching, in which access headers order the browser to use cached versions of assets until the caching period has lapsed. This way, cached content is accessed offline instead of re-downloaded everytime the application requires it. This can be done through native Apache or Microsoft IIS configuration or through the use of entity tags.

Image optimization

Meanwhile, images can consume the biggest share of bandwidth when left un-optimized. Image optimization techniques such as JPEG compression can be used to improve access speed. The same can also be done for CSS and JavaScript, which can be run through optimizers like Google Closure and YUI Compressor to reduce size by about 15 to 25%.

Persistent data using local storage

All major web browsers support web storage (also known as local and session storage), and can be used for information that does not require sharing with the server or with peers. Web Storage efficiently stores and restores game information without having to go through the downloading process, such as in-game avatars and procedural content. Game events can even be recorded and used to influence subsequent games.

This does have some limitations:

  • Browsers set limits on users’ disk space allowed per domain. Errors result if exceeded.
  • Everything is stored as a string, making retrieval of values a hassle because users have to be parsed into certain specific types (e.g., integers and floats occupy more space than expected, because of the JSON-conversion requirement before saving).
  • Contents not always deleted in tandem with cookies and cached files, therefore taking up more space than necessary.

App caching through manifests

When first accessed, most games and apps must preload assets to avoid lags later on. Users are kept occupied by flash games, fancy background images, and the like during the downloading wait. Prefetching assets and caching both make assets immediately available afterward. Caching means content is only downloaded when immediately needed. With prefetching, all content used in the application is completely downloaded, cached and ready to be accessed once it is required. While this inevitably causes long wait periods at the start, a compromise can be reached by only loading content that will be required in the near future.

Prefetching used to require creating scripts to generate image objects and direct their “src” attribute at the files intended for downloading, which was difficult because of browser differences. This is circumvented by modernbrowsers supporting an API called Offline Web Applications (the Application Cache). In addition to making applications available offline, it serves as a backup for content written for mobile devices, which are susceptible to being inaccessible due to connectivity breakdowns. Manifests area list of files required by the app, and is created by app caching. This is served with the mime type text/cache-manifest.

In conclusion

There is no universal solution to caching content and speeding up user the experience. While users have grown used to longer waits for mobile games and apps to download, the shift towards HTML5 games is likely to increase expectations of wait times (similar to expectations of web content delivery).

Current caching mechanisms can provide users with fluid, one-time installs that are the norm on other platforms. The enhanced control afforded to developers by modern browsers must be effectively harnessed to reduce wait times (with a threshold, for instance of 2-4 seconds for offline loading), or risk losing their attention and business. In the meantime, users can be kept occupied shortly after opening a page, such as with the use of graphics, animations and game tips. Developers can simply turn loading sequences into part of the experience.

This post is part of “Harnessing HTML5″, a series that explores new browser technologies in partnership with Modern.IEWith contributions by Ming Hao Wong.