HTML and CSS Reference
In-Depth Information
Having dealt with the issues of quality, format support, and encoding, the main choice that impacts loading
is how late to defer it, assuming that a connection to the asset data server will still be available. Games providing a
combination of MP3, OGG, and WAV audio files should cover the question of browser compatibility. A time will come
where the available choices outweigh the limitations and at that point selecting an optimal audio format will be more
Other Formats
On the web, JSON is commonly used as a data-interchange format for sites. JSON data has the benefit that, once
parsed, it can easily be manipulated as a JavaScript object. This makes it a simple way to transfer text data such as
“string tables” for localization, where looking up the data is convenient because it is already in the appropriate format
for use. It lends itself to defining extensible data formats where manipulating parts of the data is easy to do by setting
properties on objects.
The downside is although JSON.parse is a native function in modern browsers, the cost of processing large assets
with complex data structures is high, so much so that it can take anything from a few milliseconds to a few seconds to
process, depending on the data. This has an impact on loading time, but also on the performance of the game. If the
processing takes longer than 16.6ms on a 60fps game, then it can affect the frame-rate of the game, which makes the
process of background loading problematic. It is possible to use Web Workers to ensure that the processing is done in
a separate thread, which can help reduce the impact of parsing.
Some data, however, lends itself to using a binary format. Accessing this is possible in JavaScript with the
help of the arraybuffer XHR transfer type and typed arrays such as Uint8Array , Int32Array , Float64Array , and
Float32Array . This allows you to intentionally transfer floating-point values at a given precision or define a fixed
size for your data. If you use a Uint8Array view on a transferred arraybuffer, you effectively have a byte array for
your file format to manipulate as you require. This allows you to write your own binary data parsers in JavaScript.
The DataView interface is designed specifically for doing this and to handle the endianness of the data. For more
information for how to use these interfaces for manipulating binary data, see
webgl/typed_arrays/ .
In addition to structuring your own binary file data to be used in JavaScript, proposals are emerging to
standardize many of the common formats that are used by games. One example is the Khronos proposal for glTF ,
a format for transferring and compressing 3D assets that is designed to work with WebGL (
press/khronos-collada-now-recognized-as-iso-standard ). Another example is the webgl-loader project that
aims to provide mesh compression for WebGL ( ) . Proposals like these
combine text and binary data and aim to provide a strategy to deliver complex mesh data in a format optimized for
web delivery. At the time of writing there is no standardized approach, but it is worth being aware of the data formats
that are specifically designed to help deliver certain file content to the Web.
Asset Hosting
When running your game on your local machine, the performance of loading the asset data from a file or in most
cases from a locally run web server can appear to be very quick. As soon as you start loading from a server hosted
on a local network and then eventually from where your game will be hosted online, it becomes apparent that what
you considered an acceptable load time is no longer acceptable in the real world. There are many factors involved
when downloading assets; considering how best to host them is key to having consistent behavior for all players of
your game. The decisions are not only about where they are hosted, but how they are hosted. Web sites employ many
strategies for delivering content quickly to millions of users all over the globe. Since HTML5 games operate as web
sites/web apps, the same strategies can be applied to make loading your assets as quick as possible. There are many
other considerations for asset hosting, such as cost and storage size, that should not be ignored, but for now let's
consider performance.
Search WWH ::

Custom Search