# help using image to overlay grayscale around player

I'm sorry for the confusing title but it is hard to explain in one sentence.

This is what I have

What I want to do is use that black overlay to convert everything in the black area to grayscale. This will create a colored aura around the player.

Does this require pixel shading or is there a simpler method?

You'll need a (simple) shader.

Render the whole scene in color to an offscreen. Then run the whole output texture through a greyscale shader.

You can then run a pass using both textures as input along with the mask to select which source(s) to sample and how to mix them.

You could do it without the explicit greyscale pass, too. I think the extra pass makes it a bit easier, though.

Remember that color space is not linear, so a greyscale shader is not as easy as averaging the RGB components. See http://www.johndcook.com/blog/2009/08/24/algorithms-convert-color-grayscale/ for some help there.

• I've spent all night researching on techniques to do this. At the moment I have a shader that will convert everything to grayscale. I understand what you are saying about blending the colored and grayscaled scene, but I don't have any code to go off of. – Matt Greenwood Feb 11 '13 at 4:37
• Pass the mask image to the shader and set the effect of the grayscale to the intensity of the masked image. Searching for "HLSL texture blending" might help you out. – swalog Feb 11 '13 at 6:49

For what I think you want to achieve, I think the simplest/best way is using shaders.

Modifying the pixels in a shader is much easier (and efficient) than having a dual set of assets, with the alpha map masking out the colored assets (or any other way of doing this that comes to mind). You could of course pre-process the assets to make them grayscaled, etc.

Now, I think the pay-off of using shaders and playing around with it might give you a lot of freedom to create interesting looking effects, without worrying much at all about how this affects your assets and structure.

Disclaimer: I haven't used xna, so I don't know how cumbersome it is to use shaders here.

I would recommend using the shader provided in this answer. Add another function and you should be able to convert everything to grayscale.

float4 PixelShader(VertexOut input) : COLOR0
{
float4 color;
color = tex2D(ColoredTextureSampler, input.textureCoordinates.xy);
return dot(color, float3(0.3, 0.59, 0.11));
}