Jump to content
  • Advertisement
Sign in to follow this  
CarlJ

scaling a gui?

This topic is 3823 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
Advertisement
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
OK so the borders would be four the middle would be five. So what about the other three?

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
OK, now that I've done that part what about then the button as a gradient as the center?

Share this post


Link to post
Share on other sites
Don't use gradients where you'll be stretching things. Use textures you can tile instead.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!