Optimal Asset Loading - HTML5 Game Development Insights - page 39

By Dependency
Player Enemy Weapon

models/player.dae.json models/enemy.dae.json models/weapon.dae.json

animations/player_idle.json

animations/enemy_idle.json animations/weapon_idle.json

textures/player_diffuse.dds textures/enemy_diffuse.dds animations/weapon_raise.json

By Type
Sounds Textures Models

sounds/sfx/hit.ogg textures/player/diffuse.dds models/player.dae.json

sounds/sfx/blast.ogg

textures/enemy/diffuse.dds models/weapons/sword.dae.json

sounds/music/intro.ogg textures/walls/brick.dds models/map/city/statue.dae.json

By Association
Common Menus Level 1

textures/sky/clouds.dds

ui/menus/main_menu.json models/boss1.dae.json

sounds/music/background.ogg sounds/sfx/menu_disabled.ogg sounds/music/level1.ogg

models/player.dae.json textures/menus/main_menu.dds models/map/level1/hut.dae.json

Combined
Common Player Common Player Skin 1

models/world_shield.dae.json models/player.dae.json models/player_cloak.dae.json

textures/shield/diffuse.dds

animations/player_idle.json sounds/sfx/cloak_swoosh.ogg

sounds/sfx/hit_steel.ogg sounds/sfx/player_jump.ogg textures/player_diffuse.dds

Figure 2-6. An example of grouping assets by various scenarios. Combining the options based on your own assets can
help reduce the total number of requests required to load your game

Grouping Using Tar Files
If you are interested in grouping assets together as a single file but maintaining some structure, then using the tar
archive format is one option. Tar files allow you to archive files of different types by concatenating them together
in a single bitstream, which can later be compressed. This process allows you to group assets while preserving the
file structure into a single HTTP request, and allows you the choice of compression techniques to transfer it. Since
the resulting file is binary data, it can be transferred and processed as an arraybuffer . Tar files contain header
information for each file which if processed as binary data gives information about the files contained, for example
the filename and filetype. This gives the loading code the option to choose which files to process if and when required.
There is an example implementation of a JavaScript based tar loader in the open source Turbulenz Engine
( https://github.com/turbulenz/turbulenz_engine ) .