XNA Layered Sprite problem

I have a game object that manages several sprite objects. Each of the sprites overlap each other a bit, and drawing them looks just fine when they are at 100% opacity. If I set their opacity to say, 50% that is when it all goes to pot because any overlapping area is not 50% opaque due to the multiple layers.

EDIT: Ooops! For some reason I thought that I couldn't upload images. Anyway....

http://postimage.org/image/2fhcmn6s/ --> Here it is. Guess I need more rep for proper inclusion.

From left to right:

1. Multiple sprites, 100% opacity. Great!

2. Both are 50%, but notice how the overlap region distingui开发者_如何学Cshes them as two sprites.

3. This is the desired behavior. They are 50% opaque, but in terms of the composite image.

What is the best way to mitigate this problem? Is a render target a good idea? What if I have hundreds of these 'multi-sprites'?

Hope this makes sense. Thanks!

---

Method 1:

If you care about the individual opacity of each sprite, then render the image on the background to a rendertarget texture of the same size using 50% or whatever opacity you want the sprite to have against the background. Then draw this rendertarget with 100% opacity.

In this way, all sprites will be blended against the background only, and other sprites will be ignored.

Method 2:

If you don't care about setting the individual opacity of each sprite, then you can just draw all sprites with 100% opacity to a rendertarget. Then draw that render target over your background at 50% opacity.

---

Performance concerns:

I mentioned two examples of drawing to rendertargets, each for a different effect.

Method 1:

You want to be able to specify a different opacity for each sprite. If so, you need to render every sprite to a rendertarget and then draw that rendertarget texture to the final texture. Effectively, this is the same cost as drawing twice as many sprites as you need. In this case, that's 400 draw calls, which can be very expensive.

If you batch the calls though, and use a single large rendertarget for all of the sprites, you might get away with just 2 draw calls (depending on how big your sprites are, and the max size of a texture).

Method 2:

You don't need different opacity per each sprite. In this case you can almost certainly get away with just 2 draw calls, regardless of sprite size. Just batch all draw calls of the sprites (with 100% opacity) to draw to a rendertarget. That's one draw call. Now draw that rendertarget on top of your background image with the desired opacity (e.g. 50% opacity), and all sprites will have this opacity. This case is easier to implement.

---

The first thing your example images reminded me of is the "depth-buffer and translucent surfaces" problem.

In a 3D game you must sort your translucent surfaces from back-to-front and draw them only after you have rendered the rest of your scene - all with depth reading and writing turned on. If you don't do this you end up with your 3^rd image, when you normally want your 2^nd image with the glass being translucent over the top of what is behind it.

But you want the 3^rd image - with some transparent surfaces obscuring other ones - so you could just deliberately cause this depth problem!

To do this you need to turn on depth reads and writes and set your depth function so that a second sprite drawn at the same depth as a previously drawn sprite does not render.

To achieve this in XNA 4.0 you need to pass, to SpriteBatch.Begin, a DepthStencilState with its DepthBufferFunction set to CompareFunction.Less (by default it is less-than-or-equal-to) and DepthBufferEnable and DepthBufferWriteEnable set to true.

There may be interactions with the sprite's layerDepth parameter (I cannot remember how it maps to depth by default).

You may also need to use BasicEffect as your shader for your sprite batch - specifically so you can set a projection matrix with appropriate near and far planes. This article explains how to do that. And you may also need to clear your depth buffer before hand.

Finally, you need to draw your sprites in the correct order - with the unobscured sprite first.

I am not entirely sure if this will work and if it will work reliably (perhaps you will get some kind of depth fighting issue, I am not sure). But I think it's worth a try, given that you can leave your rendering code essentially normal and just adjust your render state.

---

You should try the stuff in Andrew's answer first, but if that doesn't work, you could still render all of the sprites (assuming they all have the same opacity) onto a RenderTarget(2D) with 100% opacity, and then render that RenderTarget to the screen with 50%.

Something like this in XNA 4.0:

RenderTarget2D rt = new RenderTarget2D(graphicsDevice, 
                                       graphicsDevice.PresentationParameters.BackBufferWidth,
                                       graphicsDevice.PresentationParameters.BackBufferHeight);
GraphicsDevice.SetRenderTarget(rt);
//Draw sprites
GraphicsDevice.SetRenderTarget(null);
//Then draw rt (also a Texture2D) with 50% opacity. For example:
spriteBatch.Begin();
spriteBatch.Draw(rt, Vector2.Zero, Color.FromArgb(128, Color.White));
spriteBatch.End();