2d - Efficient way of drawing outlines around sprites

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,

Answer

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.