Since I'm currently developing a 2D game for mobiles, overdraw and drawcall count is my first priority in the design of the application I've thought initially to split each sprite in two parts: one where each pixel is fully opaque (to render with cutout shaders in front-to-back order) and the other part with semi transparent edges (which will be ordered back to front)

Since I need to support ES2.0 devices, I can't use texture-arrays and I need to fit as many sprites as possible in a single 2048x2048 texture atlas to reduce drawcalls and ensure mobile compatibility, but as you can see from this picture:

enter image description here

Splitting sprites in opaque and non-opaque parts will certainly double the space occupied in the atlas, thus decreasing by half the potential amount of consecutive sprites I can draw in a single drawcall

This way, I'm paying drawcalls to reduce overdraw. By rendering the entire sprite with transparent shaders I'd pay overdraw to reduce drawcalls.

Am I missing something? Is there a better approach?

  • 1
    \$\begingroup\$ Have you actually tried using the sprites as you suggest in the question? Atlases should really be compressed and doesn't need to occupy double the space. Also, you could overlay a smaller sprite with a bigger one and cut a hole in the bottom sprite (there were some assets that enabled this but I can't seem to find them now). \$\endgroup\$ – John Hamilton Nov 29 '17 at 11:34
  • \$\begingroup\$ having two "pieces" of the same asset in the same texture atlas will inevitably halve the amount of space I get in a 2048x2048 texture, this is what I meant I didn't know about the tecnique you're describing, i'll look further into it thanks for the insight \$\endgroup\$ – Row Rebel Dec 1 '17 at 2:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.