help using image to overlay grayscale around player

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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));
}