<p>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. </p>

<p>Is there another "easier" way? What's the best approach?</p>

[{'answer_id': 7256, 'author': 'jm.', 'author_id': 814, 'author_profile': 'https://Stackoverflow.com/users/814', 'pm_score': 0, 'selected': False, 'text': "<p>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. </p>\n\n<p>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.</p>\n"}, {'answer_id': 32564, 'author': 'Joel Martinez', 'author_id': 3433, 'author_profile': 'https://Stackoverflow.com/users/3433', 'pm_score': 3, 'selected': True, 'text': '<p>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.</p>\n\n<p>For an example of this being implemented in an XNA engine (though it\'s a closed source engine), see this:\n<a href="http://www.flatredball.com/frb/docs/index.php?title=SpriteFrame_Tutorial" rel="nofollow noreferrer">http://www.flatredball.com/frb/docs/index.php?title=SpriteFrame_Tutorial</a></p>\n'}, {'answer_id': 1038162, 'author': 'Jonathan C Dickinson', 'author_id': 24064, 'author_profile': 'https://Stackoverflow.com/users/24064', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n'}]
['https://Stackoverflow.com/questions/7017', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/814/']