Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 '14 at 18:23
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 '14 at 11:43

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 '14 at 14:37
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 '14 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 '14 at 11:36

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

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 '14 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 '14 at 11:30
Better to have unused space in a 1024x1024 or 2048x2048.. when dealing with a gpu renderer anyway. – andygoestohollywood Jan 28 '15 at 12:55

Your Answer


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.