Scaling the GUI

If you are a new Irrlicht Engine user, and have a newbie-question, this is the forum for you. You may also post general programming questions here.
Post Reply
Gorbstein
Posts: 37
Joined: Wed Nov 25, 2009 8:44 pm
Location: Scotland

Scaling the GUI

Post 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
Image
greenya
Posts: 1012
Joined: Sun Jan 21, 2007 1:46 pm
Location: Ukraine
Contact:

Re: Scaling the GUI

Post 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.
CuteAlien
Admin
Posts: 9693
Joined: Mon Mar 06, 2006 2:25 pm
Location: Tübingen, Germany
Contact:

Post 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.
IRC: #irrlicht on irc.libera.chat
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
Gorbstein
Posts: 37
Joined: Wed Nov 25, 2009 8:44 pm
Location: Scotland

Post 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
Image
Gorbstein
Posts: 37
Joined: Wed Nov 25, 2009 8:44 pm
Location: Scotland

Post 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
Image
CuteAlien
Admin
Posts: 9693
Joined: Mon Mar 06, 2006 2:25 pm
Location: Tübingen, Germany
Contact:

Post 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).
IRC: #irrlicht on irc.libera.chat
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
Gorbstein
Posts: 37
Joined: Wed Nov 25, 2009 8:44 pm
Location: Scotland

Post by Gorbstein »

I resize when creating the GUI.. so setting the size through the skin worked beautifully, thank you!

D
Image
Post Reply