Hi, How is this normally done in GUI engines? I'm currently using sprites for my GUI but the problem with that is it can't scale itself without getting blurry. So whats the technique for doing this?

Most of the time applications only support a couple of screen sizes. So artists create a couple of versions for different sizes, similar to wallpapers.

For user interfaces it might be feasible to use a vector format instead of bitmaps (e.g. see Windows Presentation Foundation) so it can be scaled to any size.

How would i implement that into my GUI engine? Is that something i could do?

Implementing a vector GUI is non-trivial.

You can make things like buttons scale well by dividing it up into 8 textures where the borders are always the same size and the middle fills the hole. For things like icons and logos you could just load a picture big enough for the biggest resolution and scale it down.

A vector GUI will take serious work and i do not recommend you attempt one.

OK so the borders would be four the middle would be five. So what about the other three?

Quote:Original post by carlj133
OK so the borders would be four the middle would be five. So what about the other three?

No, the middle is excluded. The 8 pieces are only for the borders. One for each corner and one for each side of the control (top, bottom, left and right side). The corners are almost never scaled, since they are not made for that, only the rest of the borders are scaled. The rest of the borders are made of 1xA and Ax1 pixels (where A is the native resolution and size of the corners), respectively for horizontal and vertical borders, since you cannot properly scale images larger than 1 pixel.
The middle will have to consist of a 1x1 pixel image (here, a simple color value is probably a wiser idea) or an image that cannot be scaled with a background color (or scaled with good filtering of some sort).
Because the middle is usually just implemented as a color value, you typically only need 8 textures for a control/window.
If you look at a simple Win32 window, for example, you can very easily imagine this division along the lines of the window.
Of course, you can adapt controls/windows to several other layout types, should you like, but the one mentioned here is very simple and light-weight to implement.

Aha, Got it now. Thanks for the help guys. :)

OK, now that I've done that part what about then the button as a gradient as the center?

Don't use gradients where you'll be stretching things. Use textures you can tile instead.

You can gradient along any axis that is not stretched.