0
\$\begingroup\$

In a game a group of friends and I are working on using XNA, we wanted to create an effect where we could darken the screen and draw something else on top of the darkened portion. For example, we have a title screen that is drawn as a background sprite, a logo, a few buttons, and a lot of particle effects (all separate Texture2D's), but when you select the "Exit" button, the entire title screen darkens, and two (undarkened) buttons are drawn over-top ("exit" and "cancel" buttons).

Initially, we were going to do this by having two separate render targets, one for the title screen, and one for the yes and no buttons. Then, when we wanted to display the topmost render target, we darkened the render target that the title screen was drawn to, and then draw the new render target on top. The problem with this is that the second render target is filled with black pixels that simply get drawn over the background, blocking it out completely.

We have two ideas to fix this. The first idea is to draw the second render target on top of the first using BlendState.Additive, so that the black pixels are simply added to the background instead of drawn over-top. The problem with this is that it makes the other buttons look weird, since they're being drawn over top other things on the title screen. The second idea was to manually set every black pixel in the second render target to Color.Transparent, but we're not sure how efficient that is.

Any ideas on how we could achieve this effect?

|improve this question
\$\endgroup\$
1
\$\begingroup\$

Why not draw a semi-transparent black sprite in between the background and the yes and no buttons? For example something like this:

Transparent mask

If you had a scene that looked like this: Scene

Then you could simply draw the semitransparent mask on top and have it look like this: Scene with mask

Then all you'd have to do is draw the buttons on top of the mask while the rest of the scene is drawn below the mask.

Hope this helps!

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ By the way this isn't extremely relevant to the answer, but the mask sprite is rather easy to make. Simply open up Gimp, fill the background with black. Then use the paintbrush and white to shade the areas of the mask you want to be more transparent, and to smooth things out, use a gaussian blur at a rather high blur setting. Then use color to alpha and select the color white, then click OK. \$\endgroup\$ – Superdoggy Apr 19 '15 at 16:31
  • \$\begingroup\$ Okay, that's a nice solution. This could allow us to make a smooth transition between unfaded to faded by gradually changing the tint of the mask too. Thanks for the suggestion! \$\endgroup\$ – user3002473 Apr 19 '15 at 17:21
  • 1
    \$\begingroup\$ You're welcome - glad I could help. :) \$\endgroup\$ – Superdoggy Apr 19 '15 at 17:38

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.