Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Is there any performance difference in the way the images are placed inside a sprite sheet image (for the same total area)?

For example, should I place 50 sprites (50x50 each) in a linear way creating a sheet of dimensions 50x2500px? Or is it better to split into multiple rows, say 10 sprites per row, and get a sheet of dimensions 500x250?

Assume that the graphics are hardware accelerated.

share|improve this question
    
Also good to note that not all devices support huge textures. For example, older phones and tablets may not work with textures larger than 1024x1024. –  Thebluefish Jan 27 at 18:23
add comment

4 Answers

up vote 8 down vote accepted

It is possible that the total size of a sprite sheet will affect performance of your game in some reasonably small fashion. Extremely small sprite sheets generally mean that you have many, which in turn implies many state changes, and frequent state changes are not good for performance. Extremely large sprite sheets consume more GPU RAM, and if they need to be purged and recreated, or reshuffled due to resource virtualization of the GPU, this can cause a delay.

Keeping the same total pixel area and varying the dimensions of the sheet should not cause a noticeable variance in performance however.

As with most things performance-related, to determine whether or not a subject is actually an issue in your game you should profile it.

share|improve this answer
    
I am using EaselJS and from a simple comparison test, i coulnd't find any significant performance variation between a 222x7770 spritesheet of 35 frames, and an identical 1332x1110 spritesheet. Seems like the only way to do a good test is after i create a full scenario with multiple spritesheet animations. Thanks –  ktsangop Jan 28 at 11:43
add comment

Put the profiler on it. Try a huge sheet and a small one. Measure the difference.

This is the very best way to answer these questions, since you don't want opinions: you want answers. Doing this test yourself is the best way to get an answer, since it will be for your actual use case.

share|improve this answer
    
Will try this out, and post results sooner or later... thanks –  ktsangop Jan 27 at 14:37
1  
Be aware that profiling GPU issues is more difficult than just throwing timers around the CPU-side code that calls into the GPU; if you report back your results, make sure to document your profiling method as well because it can completely invalidate your conclusions if wrong. –  Josh Petrie Jan 27 at 16:03
    
Well Josh you got me there.. Since it's my first time using HTML5/Javascript for Games, i found it really hard to create a profiling scheme that makes any sense... :) In fact, i have no results that can give me any conclusion, so i must try harder and read more about browser profiling. –  ktsangop Jan 28 at 11:36
add comment

Profiling is a good idea. You should remember you don't need real sprites. You could profile with noise instead. I personally think the shape of a sprite sheet is mostly a result of how we view it on a screen and the goal is too keep it easy to view so an extreme width is bad for that purpose.

I will also add that it is very unlikely the choice here will have a very noticeable effect on performance. It is always better to profile first before you decide what to optimize. Always optimize the part of the code that takes the longest amount of time to run until you are sure it is nearly fully optimized.

share|improve this answer
add comment

To optimize the rendering process of your graphic engine you should create sprite sheet with 2^n width and 2^m height (2x2 ... 128x256 ... 512x256 ... 1024x1024...)

Be aware, some engine like Corona SDK doesn't support more than 2048x2048 sprite sheet. Check the specification of your graphical engine. You can also use software like Texture Packer in order to optimize the arrangement of your sprite sheet.

share|improve this answer
    
This only answers half of the question. –  Grey Jan 27 at 21:21
    
So is it better to create a power of 2 resolution, even if this leaves a lot of unused image space? Or is it better to add extra transparent pixels in all sprites to make them with such desired dimensions? And choose the effective area later on when rendering? Thanks –  ktsangop Jan 28 at 11:30
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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