Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

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

I'm using XNA to program a game, and have been experimenting with various ways to achieve a 'selected' effect on my sprites. The trouble I am having is that each clickable that is drawn in the spritebatch is drawn using more than a single sprite (each object can be made up of up to 6 sprites).

I'd appreciate it if someone could advise me on how I could achieve adding an outline to my sprites of X pixels (so the outline width can be various numbers of whole pixels).

Thanks in advance,

  • Greg.
share|improve this question
up vote 16 down vote accepted

By far the easiest way to do this (so probably the best way, unless you are really strapped for performance) is to have two copies of your sprites.

  • The regular version
  • A"fat", uncoloured version - basically a white version of your sprite X-many pixels "fatter" than the original.

Draw your entire object using the "fat" version, then draw the regular version over the top.

By making the "fat" version white, you can use SpriteBatch's built-in colour tinting to change the selection colour dynamically.

To generate your "fat" verison I recommend writing a Content Pipeline Extension that can automatically take your original sprites, read their alpha channel, create a new alpha channel by sampling the maximum alpha channel in the original image X-many pixels around each pixel, and setting RGB = (1,1,1).

You will have to make sure your sprites all have sufficient transparent border to add the outline (you could check this in the content processor - and even make room if necessary).

If you only have a few sprites, then you could just use a good image editor (GIMP, Photoshop) and do it by hand: Alpha channel to selection, expand selection, selection to alpha, fill colour channels white.

share|improve this answer

I guess you need to draw all the pieces who each object to a single sprite first. Then I think you'd have to write a shader to detect the edges of the sprite a draw a pixel where-ever it finds an edge. I expect there must be some shaders out there already to do this, which you could either use or port.

share|improve this answer
This kind of shader is surprisingly annoying to write, I've heard (we used it in one of our 3D games and kept running into unsightly edge cases). One thing you might want to consider is encoding the outline directly into the sprite texture with a specific color like (0, 255, 255, 0), and just have the shader transform that color when the sprite is selected. Then the shader is a trivial color change, and you have a high level of artist control over the outline and any details you want. – user744 Sep 14 '10 at 18:24

Depending on requirements, what might also be effective is just creating an outline on-demand for the sprite. I'm assuming your sprites have transparency, and are irregularly shaped rather than just being rectangles (while this would work fine for that, outline rectangles should be Trivial).

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

Note that you don't need to do this every draw (although I suppose you could), but just create the new outline sprite when switching sprites.

share|improve this answer
Yes, this is what I wanted to suggest as well. Render the masked sprite 1 pixel to the left, right, top and bottom of the original sprite, under the existing sprite. Many games used this method to outline rendered text, or with only 2 of the 4 positions to create a drop shadow. – Kaj Sep 14 '10 at 22:19

The simplest brute force approach is to build two copies of each sprite, a normal and a highlighted one. Then just swap them when highlighted.

If you've got memory to spare there is no need to get more complicated then that. Plus artists have complete control over the look when highlighted so you can do an outline or anything else you'd like.

share|improve this answer
I think part of the problem is that the OP says each object can be made of multiple sprites. So I guess the outline has to be the outline of the combined object, instead of having a separate outline around each component sprite. – Chris Howe Sep 14 '10 at 19:34
Chris, it does not have to be the outline of the combined object, and it will work fine for an object made out of multiple sprites. Just do exactly what wkerslake said, but make sure you draw the highlighted sprites behind all of the normal sprites for that object. That way no matter how many sprites an object is made of, the highlight will only use slightly more than double the draw time for that object, which should be a lot less than generating the outlines at rendertime with the combined sprites. – AttackingHobo Sep 14 '10 at 19:56

How about for each sprite, also have another sprite that's an outline of the base sprite. When drawing an outlined object, draw the base sprites, then make a mask of the combined rendering, then draw the outline sprites excluding the mask.

share|improve this answer
Why not just draw the outline sprites first and draw the regular sprites over them? – Chris Howe Sep 14 '10 at 19:32
One reason not to do this (or Chris's suggestion) is because it uses twice as much texture memory; another reason is that the artist workflow is crap because you need to update two files every time you change a sprite. – user744 Sep 14 '10 at 19:34
Well yeah, you ideally wouldn't have two actual sprite assets. If you're using alpha-testing for your sprites you could put the outline into the sprite and give it an alpha slightly higher than your transparent areas. Then by controlling the alpha test reference value you can control whether the outline is visible or not. All I was saying is that if you have 2 versions of the sprites (whether its 2 assets or 2 states of the same asset) you should draw the outline version first, and then the normal version. This way you don't require any fancy shaders, masks, or whatever. – Chris Howe Sep 14 '10 at 19:56
Chris's idea has merit; in addition having the artist update 2 files (or even the same asset) can be avoided if you produce a tool to generate the alpha for the outline sprites that runs as part of your asset/content pipeline. Texture memory may or may not be a problem, but separate outline sprites should be highly DXT compressible; possibly 1/6th the size of the original texture in video memory and with no fidelity loss. – jpaver Sep 14 '10 at 23:57

I'm not sure of effiency, but the easiest way I can see would be to draw a larger version of the sprite in the colour you want selected first. Draw the sprite on top of that. You'll only see the edge of the first sprite, giving the effect of selection.

EDIT: However, as you can see from the comments, this isn't a good idea.

share|improve this answer
Just scaling up a sprite doesn't give a true outline – Iain Sep 14 '10 at 17:58
I don't think it would, but it would be easy. – The Communist Duck Sep 14 '10 at 18:30
Plenty of things are easy but don't solve the problem. For sprites with any kind of interesting silhouette a scale-up will produce absolute garbage. – user744 Sep 14 '10 at 18:36
Scaling up will only look good for solid square or circular objects. If the shape is really wide, or tall, or has gaps it will look really bad. – AttackingHobo Sep 14 '10 at 18:40
Scaling up will give better results than doing nothing and would also be a useful step along the path to "perfection." While the graphical results won't be perfect, if this were for an internal tool it may be Good Enough. – dash-tom-bang Sep 14 '10 at 21:58

I agree with scaling up the sprite. By Far the easiest route, and you can apply it to selecting ANY sprite without having to create additional sprites especially for this purpose.

  • i.e. spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = new Color(255, 0, 0, 255);
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.