[manuscreationis]

+1 to this response

I've recently been reading into making use of sprite sheets with Canvas apps, and the drawImage method makes using sprite sheets a breeze. You simply need to keep track of cellsize, number of cells, and your current cell.

[ehsanu1]

I suppose spritesheets would making loading time faster since there would be fewer files. But other than that, it's just a neat way of organizing sprites, which can also be managed with a good naming convention tying together related sprites. Is there any other reason to use a spritesheet?

Well, if you're using dom-based animation, spritesheets also work better for animations since it's much faster to adjust background-image-position in a div, compared to just replacing the background-image.

[manuscreationis]

Thats actually a different approach than how I had been doing it - i had been loading a hidden spritesheet by grabbing it from the dom (this is all just prototypal, playing around with canvas code, nothing "production" quality mind you), then keeping track of the position in memory and iterating through the frames using the overload of drawImage that lets you specify a slice of the image as what you want to draw.

I wasn't even aware of using background-image-position as a way to do this... I'll stick that one in my cap, thanks!

I'd say the main benefit of spritesheets as i've seen it would be what you've already commented on: Fewer GETs against the server (when you're thinking in terms of scale, for a large project with lots of assets, i'd say this becomes important, but of course that's a fairly subjective metric), as well as organization of files.

You could go with naming conventions... but then for a 45 frame animation, you have 45 distinct files all named something like "SPECIFIC_ANIMATION_FRAME_X", as opposed to using a dynamic approach, utilizing the cell-size of the frames and the width and height of the image overall, to calculate the frames on the fly; To me, that is far more maintainable than a huge pile of aptly named images.

You could make the claim that calculating out the frame each time is wasted cpu cycles that could be spent elsewhere, but I feel like it's the right approach.

But that could just be my opinion. I would love for someone to weigh in with actual metrics on whether or not using a dynamic approach is actually faster or slower in a meaningful way than a brute-force style naming convention animation system.

[ehsanu1]

Well, I doubt there would be much of a speed difference when using canvas/drawImage, since I assume "calculating the frame" involves just use some arithmetic on the dimensions of each frame - which is pretty trivial in terms of CPU use at 60fps.

Anyways, you're right, with lots of assets it probably is a much better way to organize sprites into spritesheet. I just never did anything on that scale. 45 animation frames? Sheesh, I'm happy if I can get 5 or 6. :)