Tangle Tutorial, part 2: Asset Management

This is about as barebones a demo as I can make while still getting the point across about what the AssetCache class is for. If you're interested in more details about what's going on here, the related blog post is here.

  1. This page references the RequireJS AMD loader, which pulls in assetDemo.js, which in turn loads AssetCache.js and a few other modules as dependencies to make the interactions on this page a little simpler.
  2. The listbox on the left below includes a handful of hard-coded filenames referencing potential game assets on my web server. Highlight one or more of these files, then click Preload to kick off the preloading process with that subset of files.
  3. The progress bar & status text in the center will show preload progress as each file is grabbed by the AssetCache.
  4. Once loaded, these assets can then be immediately accessed from the drop-down list on the right.
  5. You can reuse the same AssetCache repeatedly: that is, preload the assets you need for the title screen, show the title, then when the user triggers the next app state, add the next batch of assets to be preloaded. You can test this by selecting just a few of the files and clicking Preload, watching the events that get logged in the status section, then select a few more assets and click Preload again to see that the "All assets loaded" event fires a second time.

Assets to load:

mp3 from NoSoapRadio;
converted to Ogg Vorbis
via media.io.

Loading progress:

In cache: