Sign in to follow this  

Pixel-perfect GUI: resolution fixed or scaleable?

This topic is 4853 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
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
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
You should make the GUI textures at close to the maximum resolution and scale down at run time. Test it at all resolutions. If anything looks funky you might need an additional medium res textureto scale down. Warcraft 3 scales the GUI and it looks good at every resolution fro 800x600 to 1600x1200.

If you do not do scale the GUI people with high res screens (like my UXGA laptop) will be very annoyed when they play in 1600x1200. Also since there are now a lot of wide screen notebooks you probably want to account for non standard aspect ratios by allowing your GUI elements to be anchored to one side (or corner) of the screen, so that these uses do not have wierd looking gaps or have to play with black bars on the sides of the screen.

Share this post


Link to post
Share on other sites
Quake 3 has a fixed GUI, it works quite well. Quake 2 had a scaling GUI, and it didnt work so well I find... Complicated things and the text was way too small in 1600x1200.

For a game, which does not need the flexibility of an operating system, I would advise going with simplicity, and making a fixed GUI.

Share this post


Link to post
Share on other sites
I personally prefer a GUI where the widgets do not occupy the same screen real estate when run in higher resoultions.

Some games in 640x480 have GUI's that almost fill the screen, so running in a higher resoution means that the GUI will end up smaller and leave more room for the "game" to be displayed.

This really depends on the game. Currently I'm playing games like Everquest and World of Warcraft and some other MMORPG that I cant talk about. =)

-=[ Megahertz ]=-

Share this post


Link to post
Share on other sites
I wrote simple gui system and I have used scaleable GUI - it's not a feature of the GUI rendering system, but in app I change sizes of controls according to resolution. Program supports resolutions from 640x480 to 1600x1200 and I scale all gui elements (fonts, controls...) with simle function:

int CS(int x, int min = -1)
{
int res = (int) (((float) wnd.GetWidth() / 1024.0f) * x);

if (min != -1)
{
if (res < min) return min;
}

return res;
}

I have designed whole gui in 1024x768 (default res) and in other resolutions everything scales using this function. I looks good, only in 640 there is a little problem with font readability, so I have to clamp values for font heights (it'sthe second param of function, -1 does not clamp). Fonts are generated on app startup, so there is no problem with blurring.
I don't use textures for gui controls and everything looks ok.

But I have another problem with my gui: I use OpenGL to render all controls and they look differnetly on radeon 8500 than on GeForce. On my card the borders (I use GL_LINE_LOOP) don't have one pixel in upper-left corner. On nvidia it looks OK.
I think it is caused by the driver, but i dont know ho to fix it.
I don't want to test for card type, because it would be pretty stupid.

Share this post


Link to post
Share on other sites
Quote:
Original post by Megahertz
I personally prefer a GUI where the widgets do not occupy the same screen real estate when run in higher resoultions.

Some games in 640x480 have GUI's that almost fill the screen, so running in a higher resoution means that the GUI will end up smaller and leave more room for the "game" to be displayed.

This really depends on the game. Currently I'm playing games like Everquest and World of Warcraft and some other MMORPG that I cant talk about. =)

-=[ Megahertz ]=-


Well in this case you're talking about a game where the GUI is an actual part of the game. That is a different situation than FPS and other action games. I agree that the GUI should scale with the resolution in an RTS, but things like the configuration menu and the main menu of an FPS have not many reasons to scale.

Share this post


Link to post
Share on other sites

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