What is the best way to draw skinnable "buttons" in a video game?

Question

I'm looking for ideas on how to draw a skinnable "button" in a game application. If I use a fixed sprite non-vector image for the button background, then I can't size the button easily. If I write code to draw a resizable button (like Windows buttons are drawn), then the programmer has to get involved -- and it makes skinning difficult. Another option is to break the button into 9 smaller images (3x3) and stretch them all -- kindof like rounded corners are done in HTML.

Is there another "easier" way? What's the best approach?

Answer 1

Yes. I am working on an Editor. It's a XAML-like language (or OpenLaszlo-like, if you prefer) for XNA. So the buttons can be resized by the editor. The buttons might also be resized by a style sheet.

I guess you're right that it's likely that the buttons will all be the same size in a real design. But even in a window's app, you sometimes need to make a button wider to accomodate text.

Answer 2

If you really want to accomplish this, the way to do it is with texture coordinates. Much like you would make a stretchable button/panel design in HTML with a table, you simply define the UV coordinates for the corners, the top stretchable area, the bottom stretchable area, the side stretchable areas, and then the middle.

For an example of this being implemented in an XNA engine (though it's a closed source engine), see this: http://www.flatredball.com/frb/docs/index.php?title=SpriteFrame_Tutorial

Answer 3

It should be possible with shaders. You would probably have to do texel lookups, but it would cut down on the number of triangles in a complex UI.