HTML and CSS Reference
In-Depth Information
Chapter 2
Optimal Asset Loading
Ian Ballantyne, Software Engineer, Turbulenz Limited
Designing an efficient method of loading game asset data for HTML5 games is essential in creating a good user
experience for players. When games can be played immediately in the browser with no prior downloading there are
different considerations to make, not only for the first time play experience but also for future plays of the game. The
assets
referred to by this chapter are not the usual HTML, CSS, JavaScript, and other media that make up a web site,
but are the game assets required specifically for the game experience. The techniques mentioned in this chapter
go beyond dealing with the standard image and sound data usually handled by the browser and aim at helping you
consider assets such as models, animations, shaders, materials, UIs, and other structural data that is not represented
in code. Whether this data is in text or binary form (the “Data Formats” section will discuss both) it somehow needs
to be transferred to the player's machine so that the JavaScript code running the game can turn it into something
amazing that players can interact with.
This chapter also discusses various considerations game developers should make regarding the distribution of
their game assets and optimizations for loading data. Structuring a good loading mechanism and understanding the
communication process between the client's browser and server are essential for producing a responsive game that
can quickly be enjoyed by millions of users simultaneously. Taking advantage of the techniques mentioned in the
“Asset Hosting” section is essential for the best first impressions of the game, making sure it starts quickly the first
time. The tips in the “Caching Data” section are primarily focussed on improving performance for future runs, making
an online, connected game feel like it is sitting on the player's computer, ready to run at any time. The final section on
“Asset Grouping” is about organizing assets in a way that suits the strengths and weaknesses of browser-based
data loading.
The concepts covered by each section are a flavor of what you will need to do to improve your loading times.
Although the concepts are straightforward to understand, the complexity lies in the details of the implementation
with respect to your game, and which services or APIs you choose. Each section outlines the resources that are
essential to discover the APIs in more detail. Many of the concepts have been implemented as part of the open
source Turbulenz Engine, which is used throughout this chapter as a real world example of the techniques presented.
Figure
2-1
shows the Turbulenz Engine in action. The libraries not only prove that the concepts work for published
games, but also show how to handle the capabilities and quirks of different browsers in a single implementation. By
the end of the chapter you should have a good idea of which quick improvements to make and what new approaches
are worth investigating.
