I have a character in a game, made of multiple sprites in a hierarchy for skeletal animation (also called cutout animation by some).
I want to make that character semi-transparent for a while, like a ghost.
The problem is, when I naïvely set the transparency on the top-most sprite and all of its children, it doesn't look as I expected, because the parts of the sprites that were supposed to be occluded by other sprites can now be seen through their occluders Like, for example, you can see the body through the clothes, or parts of the limbs inside the body, etc. (#3 in the picture below).
I'd rather like it to be made transparent as a whole, as if it were a single image (#2 in the picture below).
So my question is, how is this effect usually achieved in video games?
(Preferably in OpenGL, but I'd like to know the general approach, so that I could apply it to whatever tool I'll use.)
My first thought of how to fix it, was to render the sprite chierarchy to texture first, and then map that texture onto a simple rectangular mesh, and apply opacity to that.
But this approach would have some drawbacks. One of them I guess being the additional overhead required for rendering to texture, especially if there will be more "ghosts" on the screen at the same time, all with different transparencies. Another one is of course the overhead in code – it would require a framework of managing these hierarchies and their associated render targets – in other words: a MESS!
Is there any other, better way to do that than rendering the entire character to texture?
If there isn't one, then maybe you could give me some advices about how to organize that mess in the code?
↧