Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In XNA, how can I draw a sprite on the screen that inverts the colors behind that sprite (i.e. the colors that would appear if the sprite weren't in the way of them)?

I feel this is the best technique for an aiming cursor in a game, but I'm unsure how I can achieve this. I'm open to other ideas for aiming cursors if this is less than ideal.

share|improve this question
The problem of making something visible on all backgrounds appears in situations like painting the label text for desktop icons, and no color manipulation solution works for all cases. The approach that tends to give the best visibility is drop shadows or otherwise outlining the shape with contrasting colors. – Lars Viklund Aug 6 '11 at 23:00

To do this in XNA, you will need to use a shader. You will need to render your scene to a texture (Or, render just the portion the cursor covers), and then draw the cursor using that texture and a shader that inverts the color. Unless you've already got a deferred renderer, this will probably be more hassle than it's worth. If you do, you can use the existing depth/color buffers, and re-shade the pixels covered by the cursor in your color-inverting shader.

share|improve this answer
Have any examples about how I use a shader? – Corey Ogburn Aug 7 '11 at 2:05
There's some in the app hub education stuff. – Blecki Aug 7 '11 at 3:19

You can do this by altering the way that you are rendering the game. First render to a texture

After you have rendered the frame to the texture you can then edit the colours of the location that you are interested in:

Color pixel;
int xlocationOfSprite;
int ylocationOfSprite;
int widthOfSprite;
int heightOfSprite;

for (int x = xlocationOfSprite; x < widthOfSprite; x++)
    for (int y = ylocationOfSprite; y < heightOfSprite; y++)
        pixel = bitmap.GetPixel(x, y);

        // Do what ever color manipulation you want

        bitmap.SetPixel(x, y, pixel);

Then render the modified texture to the screen.

share|improve this answer
Are you suggesting that he'd do the manipulation CPU-side? That's not going to be cheap, particularly with the pipeline stalls from readbacks. – Lars Viklund Aug 7 '11 at 1:35
He'd have to download the texture from the graphics card, and then upload it again. Doing it in-place with a shader would be much faster. – Blecki Aug 7 '11 at 3:16

A simple method to reduce the likelihood that your cursor is the same color as your background is to sample the center pixel beneath your cursor, and invert that color. You would draw your entire cursor with that color, or use it to apply a shading.

Or sample say 5 pixels (if it's a cross hair you could sample the center, top, bottom, left, right pixel) and average them, then invert the average.

share|improve this answer

A quick 'n' cheesy way goes something like:

  • Enable alpha blending
  • Set your source blend factor to one minus dest color
  • Set your dest blend factor to one minus source alpha
  • Set your blend equation to additive
  • Draw the sprite as normal
  • Disable any states you need to disable

Just tested this (in OpenGL, not XNA, but the principle is the same) and it works well enough.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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