Do larger sprite sheets improve performance in html 5 games?

Question

I know when I did some game development with XNA they recommended that we try to group are sprites into fewer sheets because the graphic card could process it faster. Does this also apply to web based games?

Note: Not sure if this makes a difference but most of my artwork is pretty defined by separate levels. In other words I'm not really reusing artwork across levels, which kind of made me wonder if I should be loading sprites that never get used just for the sake of grouping them into a spritesheet.

Answer 1

The idea behind condensing sprite sheets is that the actual loading of the file (the sprite sheet) is considered heavy lifting in any game system. Imagine you have this system where all your data types are highly optimized and all these algorithms to reduce the memory foot print but then you have to constantly bottle-neck memory with loading and parsing files.

However, I wouldn't say packing "all" sprites on to one sheet would be a good idea. Creating sheets specific to each level could be a better approach. I wouldn't see any point in having large sprite sheets where significant portions may never be used in a user's game session.

Answer 2

It is not only the memory footprint you have to think about but also the number of requests the client is making to the server to fetch the images.

By default the maximum number of parallel requests is 2 but some browsers ignore this.

If you have many images then this will become a bottleneck.

Answer 3

In my game engine, I load the sprite sheet once, parse it upon load completion, calculate indices and animation frame data, and it's ready to go. It's extremely fast, and the only level loading is done dynamically as the player progresses through the game world.

YMMV, but consider either background-loading, or loading everything at startup and caching it client-side using manifest/caching.