You need to set your alpha blending state according to the effect you want to achieve.
In the Output Merge Stage (when you combine the objects you're drawing with the backbuffer) the blending occours for each pixel according to the following equation:
finalColor = backbufferColor * DestBlend + pixelColor * SrcBlend
(same for alpha)
In your case I think you wonna set
SrcBlend = D3D11_BLEND_SRC_ALPHA;
DestBlend = D3D11_BLEND_INV_SRC_ALPHA;
For example if your current alpha is 0.1 (the pixel is almost trasparent) you'll get:
finalColor = backBufferColor * 0.9 + pixelColor * 0.1
which is the effect you need, I think.
Sources:
https://msdn.microsoft.com/en-us/library/windows/desktop/ff476087(v=vs.85).aspx
https://msdn.microsoft.com/en-us/library/windows/desktop/ff476200(v=vs.85).aspx
https://msdn.microsoft.com/en-us/library/windows/desktop/ff476086(v=vs.85).aspx
Then you need to render first the opaque objects to fill the backbuffer with the colors
you're going to blend with the transparent pixels.
You also need to sort the transparent objects you're going to render based on their depth (you render first the deepest), since the blending operation is not commutative (using INV_SRC_ALPHA and SRC_ALPHA).
A normal rendering pipeline is (using z testing):
-turn on z writing (in depth stencil state)
-render all opaque objects
-turn off z writing
-render all transparent objects from the farthest to the nearest
In you're case I think you're first rendering the cross and then the rectangle so you're blending the transparent pixels of the cross quad with what there's on the depth buffer: the background colour. Since the depth writing is on, you block the rendering of other pixels with the same depth (the blue rectangle's ones).
If you only mind to use completely transparent or opaque objects (not alpha = 0.5 for example) you can use the discard() function in you're pixel shader based on an alpha threshold:
If(pixel.aplha < 0.01f) discard()
This function blocks the pixel before it reaches the Output Merging stage, as if I hasn't ever existed and so you don't write is depth, allowing other pixels to be rendered in that position. If this is your case you can render everything in one pass discarding those pixels.
On a side note: order indipendent transparency (OIT) is a difficult topic which is still being researched I think. You'll still probably get pretty consistent results if you don't order the transparent objects (I think it depends on the variance of the alpha channel of the different quads/pixels).
I hope I've been clear enough. Ask for everything :)
SpriteBatch
andCommonStates
classes. \$\endgroup\$