Sign in to follow this  

scaling a gui?

This topic is 3460 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Quote:
Original post by Kylotan
Don't use gradients where you'll be stretching things. Use textures you can tile instead.
But how would i scale along the Y-axis as that causes stretching?

Quote:
Original post by Dave
You can gradient along any axis that is not stretched.

Wow, i should have tried before i posted.


Would creating a larger version of the gradient and scaling down help?

Share this post


Link to post
Share on other sites
Vector graphics doesn't have to be hard -- there are libraries like the excellent Cairo that take care of the messy rendering details for you. You could even keep your current sprite-based system as is, and just re-render the sprites textures at the new resolution whenever the GUI is rescaled.

Share this post


Link to post
Share on other sites

This topic is 3460 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this