Page 1 of 1

Scaling the GUI

Posted: Wed Apr 20, 2011 11:23 am
by Gorbstein
Is it possible to set the GUI to scale with my application when it uses different resolutions?

If not, what would be the best way to adjust irrlicht to do this?

When I bump up to 1920x1200 the gui text is hardly readable, and my listbox items are tiny.

I wrote an xml loader to create elements with relative widths/heights (ie, I specify them as 0...1 , so width=0.5 means it's half the size of the parent).
But still the fonts and lists etc are all dwarved by the elements.

Cheers,

D

Re: Scaling the GUI

Posted: Wed Apr 20, 2011 12:14 pm
by greenya
Gorbstein wrote:When I bump up to 1920x1200 the gui text is hardly readable, and my listbox items are tiny.
If this is the only problem, you can use own font (not built-in), and it will render just fine and quite readable.

I dunno how to zoom ui, but even if you will zoom it, built-on font is just to small to look good zoomed, so changing font is a good point.

Posted: Wed Apr 20, 2011 12:30 pm
by CuteAlien
All gui-elements can define how they should behave on resizing with setAlignment. So you use one (invisible) background of a certain size which is the top-most parent. That one has the size which you use for making your GUI (for example 800x600). If you need to resize the GUI you just resize that element and all child elements will then behave according to the options you used in setAlignment.

Which leaves one problem - fonts. Unfortunately those don't resize automatically (which would look ugly without truetype fonts anyway). But usually fonts are using the font set in IGUISkin - so you can replace that font with another font when you resize.

Posted: Wed Apr 20, 2011 12:46 pm
by Gorbstein
Thanks.

As far as I can see the main problem is the fonts, since items which contain text scale up when a larger font is used.

I see now that I can build a new larger bitmap font with the utility. I think I will either allow the user to set the font size, or automatically chose one based on the resolution.

Cheers,

D

Posted: Wed Apr 20, 2011 1:08 pm
by Gorbstein
Hmm, so I tried this and I'm getting acceptable results by switching between two fonts; one for below 1024x768 and one for above.

However I now have a problem with the listboxes; the scrollbars and arrow buttons are absolutely tiny at high res. Can this be altered anywhere?

Thanks,

D

Posted: Wed Apr 20, 2011 1:29 pm
by CuteAlien
Do you resize at runtime or before creating the gui? If you do that before creating it - the sizes can be set in the default skin by setting skin->setSize(EGDS_SCROLLBAR_SIZE, yoursize), where yoursize is the new size you want to set.

If you resize after the listbox already exists it will be a little bit more complicated (would have to figure out myself how to do that).

Posted: Wed Apr 20, 2011 1:44 pm
by Gorbstein
I resize when creating the GUI.. so setting the size through the skin worked beautifully, thank you!

D