Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question
    
Basically: Use one texture for the line, one texture for the round ends of the line. Rotate and scale sprites that use these two textures appropriately. –  Olhovsky Jun 7 '11 at 4:41
add comment

2 Answers 2

up vote 7 down vote accepted

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:

enter image description here

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

share|improve this answer
add comment

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:

Button Resource

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.

share|improve this answer
    
Yes, this doesn't answer the question directly - but someone might still find it useful. –  Jonathan Dickinson Nov 15 '11 at 13:27
3  
It's called a nine-patch and is actually much more flexible (and cheaper!) than using a shader since you can make it look however you want with a texture. You can then put all your widget images in a single texture atlas. Most GUIs do it this way. –  Elisée Nov 16 '11 at 12:27
add comment

Your Answer

 
discard

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.