Jump to content
  • Advertisement
Sign in to follow this  
rick_appleton

Pixel-perfect GUI: resolution fixed or scaleable?

This topic is 5221 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

Once again I am working on my GUI framework. Most of it is starting to come together, however, I do still have one important design decision to make, and I was wondering what others have chosen. When creating a GUI, one can assume a certain resolution and create for that. If everything is indicated relative to the screen, then is the user has a different resolution all the elements would still be positioned correctly, but the may become a bit blurry, due to texture scaling. Another option is to give precise pixel coordinates for each element. This can easily achieve pixel-perfect reproduction. However, if the resolution is different, the GUI widgets will not scale, and the entire UI will either crunch up in one corner, or be split up into the corners (depending on how they have been defined). The pixel accuracy is still there, but all the widgets are smaller now because there are more pixels on screen. The first option is what I currently use. The base level of the GUI goes from (-1,-1) to (1,1), and everything is scaled. When using textures for entire elements, the scaling is easily done, and with some calculations, 1 pixel boundaries may still be achieved with either method. But what to do with fonts? If using bitmap fonts, the font can be scaled (however, due to magnification it wouldn't look as good as in the native resolution). So I'm thinking of preserving the pixel size of fonts (so as resolution increases, the size of text decreases), but having two or three sizes of font. For instance one font created for 640x480 which is also used up to 12??x1024 and then another one used for the higher resolutions. The size of the fonts will still change, but at least it will still be readable in the higher resolutions. edit: hmm, I posted this in the wrong forum. I meant to post in the Graphics forum. Could a moderator maybe move the thread please?

Share this post


Link to post
Share on other sites
Advertisement
There are 3 options:

1) Fixed GUI, fixed resolution.
2) Fixed GUI, scaled when resolution goes higher/lower.
3) Fixed GUI, not scaled but placed into corners/center.

I see a lot of professional games use the first one for the menu. Never see the second, and the third is mostly in-game. So I'd suggest a mix of the first (menu) and the third (in-game).


[edit] Fix.

Share this post


Link to post
Share on other sites
In general the approach in gaming is either to scale (what you see most of the time) or to have it set for the smallest resolution (640x480 or 800x600) and center it with either a black background or something else. If you have an "art" background you can somewhat hide the fact that your GUI is taking up less space then normal so long as their are not too many widgets on the screen at once (since then it will seem as if they are intentionally crowded into the center, where as a simple menu with 5 or 6 items looks like it is just being properly centered).

To avoid the fuzzy look when scaling most games design the textures for the highest normal resolution (1024x768 or 1280x1024) and scale down, rather then up. Even with this though certain elements will still appear fuzzy. To solve that you can setup fonts to be resolution independent (rather then scaling one font, have a true type font that can be draw at any size while staying sharp), and render any sharp edges (such as borders) manually.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
I did all three in my GUI engine. I let the screen designers choose which they wanted.

Share this post


Link to post
Share on other sites
Anon: how did you do that? Did you create several similar widgets, each implementing one of the above, or did you only create one widget which could handle all the options?

Share this post


Link to post
Share on other sites
Michalson: and I assume the scaling of the textures can be done during load, so the higher res texture needn't be residing in memory if you're on a low resolution (and probably have limited videomemory as well).

CoffeeMug: would you create three version of the GUI framework, or have some kind of switch in the gui elements.

I'm currently using the visitor pattern to iterate through the widgets, so I might be able to do something with that instead of changing all the widgets to support the different possibilities. However, this can only affect a 'screen' of widgets, not individual ones.

Share this post


Link to post
Share on other sites
I load my GUI from xml files, and take the same approach as Everquest did with thiers; just store seperate GUIs for each resolution. Each file specified the appropriate height, width, position, etc. for each GUI. In the UI directory, each screen piece will have a different file for each resolution, so you might see something like:

UI\Console640x480.xml
UI\Console800x600.xml
UI\Console1280x1024x.xml
UI\ConsoleDefault.xml
UI\Inventory640x480.xml
UI\InventoryDefault.xml

etc.

It's simple, effective, and produces very few bugs. Obviously having to manually adjust these can be a pain, but it's not a big deal, as you just move a few offsets and such, and I do allow for some relative positioning (such as making the height equal to the height of another element, and then set it's leftmost position to be equal to the leftmost position of the other element + the other element's width, which would position it next to it).

It also has the nice effect of giving users an easily customizable interface.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
If you don't need a scaleable gui, then don't code one! Makes life easier, alot... :)

My current solution for a scaleable gui is, defining "unscaleable" zones in my widgets-bitmaps. Take for example a button: You have a border and a color gradient within. The unscalable zone would be the border. If the widget needs to be scaled up I resize the top and bottom border to the right width but do not touch the height. The left and right border get resized to the right height, but the width isn't touched. Than I resize the center of the button with bicubic. Looks perfect and not blurry. Font's are bitmaps created for each supported resolution.

I hope you understand what I mean (draw a button on the paper and than draw two vertical and horizontal lines through, and you will know whtas going on ;))

TrueTom

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!