What's your highest number of image files?

[KyleNau]

I was wondering what the max number of image files you all are comfortable with using in a game?

 

I'm working on a client project right now (mobile) and it uses 57 image files. It's only about a megabyte in total but it's the number of URL requests that has me concerned. The most image files I've loaded before now had been about 23 and even that made me uneasy, although it all worked fine.  And so far everything for this new project is working.

 

Anyone else loading a lot of images like this and at what point do you consider using a sprite atlas (which replaces the problem of loading a lot of images with loading one big image)?

 

Kyle

[xerver]

It doesn't necessarily have to be 1 large image, but try grouping images together logically. There is no reason to have 57 images all separate.

[TheHermit]

I wonder how hard it'd be to have javascript load and process through a zip file containing a directory structure of resources like images and audio. You'd have to write the decompression code in javascript of course, and I don't know how slow that'd be in practice. You'd also need to write stuff to handle the directory structure, and it does mean that all of your resources have to fit in memory at the same time (maybe an issue on mobile?) I do think It'd be a more elegant solution than a sprite sheet, while still keeping the number of separate requests to a minimum.

[narushevich]

I wonder how hard it'd be to have javascript load and process through a zip file containing a directory structure of resources like images and audio. You'd have to write the decompression code in javascript of course, and I don't know how slow that'd be in practice. You'd also need to write stuff to handle the directory structure, and it does mean that all of your resources have to fit in memory at the same time (maybe an issue on mobile?) I do think It'd be a more elegant solution than a sprite sheet, while still keeping the number of separate requests to a minimum.

 

I've just thought about it, it would be good if there would be something similar to apk, jar files, or zip'ed files for javascript app packages. 

[ani12321]

Using texture maps would be better and faster but for small games that won't make any big difference(1 megabyte game isn't that big).

[xerver]

I do think It'd be a more elegant solution than a sprite sheet

 

What about a sprite sheet is not elegant? It not only solves the problem, but is best practice, and easy to use.

[TheHermit]

There are a lot of problems with a sprite sheet. If you have sub-images that are all sorts of different sizes, then its a fairly complex packing problem to put them together into a single sheet without wasted space. It also means you have to attach a lot of meta-data describing where in the sheet the individual sprites are since the graphics file itself isn't inherently aware of sprite boundaries. It also means that if you, say, want to alter the size of a single sprite you have to redo the entire sheet. You also can't naturally name the sprites, which is mostly an organizational thing but it still has some value.

 

From a workflow point of view, it introduces the extra step of working with the graphic outside of the sheet and then bringing it into the sheet, or using a selection mask to work on it within the sheet if you're using tools that could spill over (filters, blur brushes, things like that).

 

So while sprite sheets solve the problem, they're by far not the best way one could think of to handle large amounts of distinct images in terms of keeping things organized. Performance-wise, I'm not sure the gains justify the organizational cost in most cases.

[Gio]

If you used 8bit PNG's for your sprites, which would be a very sensible thing to do in most cases to keep them small, a spritesheet becomes much less practical (unless all your sprites use the same colours).

 

I agree with TheHermit regarding zip files, they would be a much better solution. Unfortunately it's really hard to implement something like that if you want to support older browsers (including IE9), because you would need typed arrays.

 

You could have a vbscript version for IE9, and a javascript version for the other browsers, and this would work just fine. But it's so complicated that I think it's just better to live with a few spritesheets and some extra http requests.

 

Besides, if you're using a cache manifest, there are no http request for cached files, so it really isn't such a big problem.

[KyleNau]

Thanks for your replies!

Is there a risk of running into too big of an image size when using a texture map, particularly for mobile devices? Just testing out TexturePacker and it exports a 512 x 1024 image.

 

Kyle

[xerver]

@TheHermit,

 

The issues you mention only exist if you are packing sprite sheets by hand, which is a waste of time. Using a tool like TexturePacker makes it much easier to manage assets. If you change an image size, or move them around it doesn't matter as the tool will update the meta data for you.

[MikeHart]

I agree, TexturePacker or a tool like MakeAtlas are really time savers if you work with frameworks/engines that support sprite sheets.

[p01]

Remember that the sprites sheets remain unpacked in memory and take width * height * 4 bytes. This adds up very quick on device. Therefore you should use several sprites sheets so as to not waste memory. A huge/wasteful sprite sheet can force the browser to free the memory of the image or other resources and re-load and re-decode them. You don't want that to happen during your main loop.