Rounded corners in XNA?

Question

Is there any way that I can make rounded corners on a rectangle rendered in XNA through primitives (line-strips)? I want to make my UI a bit more fancy than it is already, and I would like the code to be flexible, without too many textures involved.

Answer 1

You can render your primitive, and make a shader that can create these rounded corners.
Here is a simple pixel shader in pseudocode that can draw a rounded square:

xDist = abs(x-0.5)
yDist = abs(y-0.5)
xD = xDist*xDist*4
yD = yDist*yDist*4
alpha = floor((1-xD)*(1-yD)*5)

Result of this pixel shader:

If you use shaders, you can make really fancy UI, even an animated one.

For me great to prototype simple pixel shaders is program EvalDraw

Answer 2

Another way to do this is to use a 'button stretch' (also called a 'box stretch' or 'nine-patch'). Essentially you create an image that is made up of 9 parts:

In order to draw that button at any size, you draw each piece (from top to bottom, left to right):

1. Draw unscaled at the top left of the destination rectangle.
2. Draw scaled horizontally (with width - ((1) + (2)).Width) at the top of the destination rectangle, with the left offset by the width of (1).
3. Draw unscaled at the top right of the destination rectangle.
4. Draw scaled vertically (with height - ((1) + (2)).Height) at the left of the destination rectangle, with the top offset by the height of (1).
5. Draw scaled in both directions (with the width of (2) and height of (4)), offset by the width and height of (1).
6. Draw scaled vertically (same height as (4)) at the right of destination rectangle, offset by the height of (1).
7. Draw unscaled at the bottom left of the destination rectangle.
8. Draw scaled horizontally (same height as (2)) at the bottom of the destination rectangle, offset by the width of (1).
9. Draw unscaled at the bottom right of the destination rectangle.

If you look at the button you will see that it doesn't matter if (2), (5) and (7) get scaled horizontally (because it is essentially a straight line); in the same manner (4), (5) and (6) can be scaled vertically without affecting the quality of the image.