[HTML5] Assets loading best practices

Hi all,

I have created a cross platform game that has grown to use over 1000 png images.

I’m starting to think maybe there are better ways to download 1000 images than just to put them as-is in the “Assets” folder - which makes them load simultaneously. That made me wonder what are the best practices to multiple assets loading in html5.

Started doing some reading and here are a few options i had in mind:

  1. Stay as is. (load them from “assets” simultaneously)
  2. Zip them together to a single binary using GZip and download 1 file.
  3. Zip them to multiple files limited by size (lets say ~2Mb per file).

I’d really appreciate it if anyone has some tips on the subject.

1 Like

There’s two things I can come up with right now:

  • Put them in a sprite sheet
  • Load them when you need them

Creating a sprite sheet is good practice anyway, since it will cut your file size, and it increases performance in your browser. Referring to a part of one image is quicker than referring to seperate images, even though all of them are cached.
Loading them later on is how most people go at it when creating things in html5, that is, without using openfl. I’m not sure openfl is capable of creating code for this purpose, or if you have to write your own javascript to make it work. There are ways to do this with just javascript, but you might want to have some more control over the loading process and use ajax techniques instead. Make sure though you’re not using any big libraries like jquery, since they can really slow down your game. The less code, the better is a good practice in javascript.

You can use embed="false" then Assets.loadBitmapData instead of Assets.getBitmapData