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,
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.
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.
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.
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.
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.
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.
A few different solutions with different trade offs.
Easiest: Render the object using a flat color multiple times and jitter the position (offset left, up, down, right etc), this will create an outlines version of whatever you render on top of it, but has performance costs and won’t allow for fat borders without a lot of extra renders. A one or two pixel border may be okay with 4x.
Fastest: Preprocess the texture and have a copy that is already bordered, or is just the border, or is a flat greyscale 8-bit mask that you can colorize in a shader. This will likely be fast at the cost of memory.
Best: My opinion, but generating a Signed Distance Field (SDF) representation of your object would likely be the best solution. These textures can be much smaller than the source texture and still capture useful data. Essentially each pixel encodes how far away it is from the object used to generate it. With this data in hand, you can write all kinds of effects from glows to outlines. The border could change in size and color etc, and is still a relatively cheap shader and only one extra draw. Downside is tooling, and preprocessing.
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.
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.
Replace the color of the original sprite with outline color (or even tint it if you like). Render this flat-shaded or tinted sprite four times with a 1 pixel offset: at x,y =(-1,-1), then (+1,-1), then (-1,+1) then (+1, +1). Repeat for all sprites that make up the object.
After that, render the original sprites in proper order on top at (0,0).
