Web-based and mobile games are on the rise. But even with increasingly faster data connections, inefficient use of online assets and offline browser capabilities might result in a poor user experience.
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
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.
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
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.IE. With contributions by Ming Hao Wong.