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 (3×3) and stretch them all — kindof like rounded corners are done in HTML.
Is there another ‘easier’ way? What’s the best approach?
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