2
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ 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. \$\endgroup\$
    – user39686
    Commented Jan 27, 2014 at 18:23

4 Answers 4

7
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ 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 \$\endgroup\$
    – ktsangop
    Commented Jan 28, 2014 at 11:43
2
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ Will try this out, and post results sooner or later... thanks \$\endgroup\$
    – ktsangop
    Commented Jan 27, 2014 at 14:37
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – user1430
    Commented Jan 27, 2014 at 16:03
  • \$\begingroup\$ 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. \$\endgroup\$
    – ktsangop
    Commented Jan 28, 2014 at 11:36
1
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ This only answers half of the question. \$\endgroup\$
    – Grey
    Commented Jan 27, 2014 at 21:21
  • \$\begingroup\$ 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 \$\endgroup\$
    – ktsangop
    Commented Jan 28, 2014 at 11:30
  • \$\begingroup\$ Better to have unused space in a 1024x1024 or 2048x2048.. when dealing with a gpu renderer anyway. \$\endgroup\$ Commented Jan 28, 2015 at 12:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .