1
\$\begingroup\$

I was wondering if spritesheets are worth it. I am making a game with pixi.js and was thinking about optimization, beginning with asset loading. I currently have an arraya of all files and use PIXI.loader, but I know this is not good because it will make a web request for all files which takes long, so I should figure out a way to load them in one web request. The first thing I thought of was a spritesheet but then I thought "what if I just zipped everything and loaded it with something like JSZip?" I knew it was possible already (from this project that loads pixi textures from a zip) and listed what I think are potentials good and bad things:

Zip good points:

  • Compression meaning faster loading of assets
  • Compression meaning smaller build size when making a build with electron

Zip bad points:

  • Requires loading a separate library meaning increased loading time and using more RAM
  • Requires decompressing in-memory meaning increased loading time

Spritesheet good points:

  • Doesn't has the headers of all individual image files
  • Is much used so it is a proven technique

Spritesheet bad points:

  • No compression (or at least not comparable to zipping)
  • More than one network call due to phone limitations preventing sometimes files over 2024x2024px making it necessary to split spritesheets
  • Empty holes as all images are not the same size and there is almost always a bit of space left in the spritesheet, meaning useless pixels that are still transfered over the network

I am not a very experienced developper, so I have a few questions:

  1. Did I miss a point above?
  2. Are spritesheets generally worth it?
  3. Which technique of both is more worth it? I could do both but I want to focus on one first and leave the other in a nice to have list.
\$\endgroup\$
4
  • 1
    \$\begingroup\$ "Is X worthwhile" or "Is Y better than X" are questions you can answer much better by profiling the two options. That will get you empirical evidence, far more trustworthy than whatever Internet randos like us might say. And you can customize it to your specific use case, so you know for sure whether the solutions you're evaluating meet your real needs, not just the needs of some theoretical generic project. \$\endgroup\$
    – DMGregory
    Aug 18 '20 at 19:49
  • \$\begingroup\$ Actually, I would need something pretty generic as I plan to reuse the engine behind my game. And I plan to make lots of different types of games with it. \$\endgroup\$ Aug 18 '20 at 20:15
  • \$\begingroup\$ That is itself a specific use case. That means you have the particular needs of your engine ecosystem, not an absence of particular needs. \$\endgroup\$
    – DMGregory
    Aug 18 '20 at 20:36
  • 2
    \$\begingroup\$ The main point you've missed is that sprite sheets help with draw call batching, which will give you the best return on investment when it comes to performance. \$\endgroup\$ Aug 18 '20 at 21:07
4
\$\begingroup\$

First of all, there are already image formats with compression. In particular the PNG format supports lossless compression. Furthermore, while it is true that taking a bunch of PNGs and zipping them might be a gain in size, making a texture atlas (spritesheet or similar) will also reduce the size in similar fashion, in particular if you rank up the PNG compression level when exporting the image.

Thus, a properly exported texture atlas will give you the benefits you list on compression.

Does this mean that you should make everything into a single spritesheet? No. You should put together things that should be loaded together.

It might also be worth noting that spritesheets work better when your images are small and of regular sizes. It might be you are working in a scenario for which spritesheets are not well suited.

Is that the case? I don't know. Do experiment. If you are not willing to try both techniques to decide, the engineering approach suggest to go with the proven method, and that would be a texture atlas.

You might also be interested in packing algorithms that may minimize the holes in the texture atlas.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.