Font Size and Resolutions

[Rick]

I never really put much thought into this before, but with my current game and how I handle the UI and really thinking about so many different resolutions when we get into the mobile space it's been at the front of my mind.

 

Curious how others would handle this issue, but for me I've designed a small/medium/large value to all the fonts I would use in a game. When the game starts, based on the current resolution, it'll pick the "best" actual values to represent small/medium/large from a config type file which links in resolutions to size.

 

Reasons for doing this. I define my UI by aspect ratio via % values of the resolution (or parent widget). So I may put a button at 10% x position, 10% y position, with a 25% width & 25% height for the 4:3 aspect ratio. Once I play around with the position/size on one 4:3 aspect ratio to my liking all other resolutions at the same aspect ratio will scale up/down the images of the UI based on the resolution and the screen looks the exact same, and this works perfectly! Except for the font size on the widgets! Since the fonts don't seem to be scalable I needed a system to figure out what size fonts I should use per resolution, but I don't want to define the layout of my UI (widgets) per resolution as doing 1 layer up to aspect ratio works for that.

 

What this means is for LE2 I have add a bunch of font images to cover all sorts of different resolutions. It's nice in LE3 that we wouldn't have to do that, however, the system to figure out what size to use based on screen resolution would still be needed.

 

Honestly, it would be nice if we could scale fonts by a % value. I'd love to define the font size as a % of the button size it's used on, and then when the button gets scaled so does the font to match, just not sure if that works.

[ChrisMAN]

I had been using leadwerks buffers to downsample eveything. I havn't tested the extremes though :| I could see it falling apart after 30%

[Rick]

So you draw all your widgets on a buffer, and then scale this buffer (instead of each widget) to fit the resolution of the screen? If so, how is that working out? Does it look good? Sounds like a good approach although I have to imagine would still need unique widget positons per aspect ratio to avoid stretching right, which is fine it's a problem no matter what approach is used I think.

 

Besides doing 1 scaling of the buffer vs each widget, does this bring any other benefits to table from scaling each widget?

 

Could you give an example of how you are doing this? It's been ages since I've used buffers. Since the framework was introduced I never had much need to mess around with worlds or buffers. I assume you draw your UI at a constant resolution size buffer that you have tested to look good with the images drawn to it (say 1024x768) and then scale that to the actual resolution the user selected when you draw it on screen? Then you just have to scale the clickable areas of the controls so they will register events?

[ChrisMAN]

yes that is what i was doing. my gui framework i wrote handled it so i don't have a nice clean snippet of how to do it.

1. create a full sized buffer
   
2. copy the color buffer
   
3. use DrawImage to draw just copied texture to the backbuffer
   

*protip be mindful of your color during this whole thing. it is much like setworld. if you don't manage it... it will manage you!!!

 

as far as positioning goes i positioned everything using left, right, top, bottom. right and bottom subtracted the width of the element to that it could cleanly snap to the side/bottom of an element. again the gui tool i wrote handle this for me. i also used a combination of horizontal/vertical centering for things that would go in the middle of the screen.

 

i find using these relative coordinates solves the majority of ui issues.

 

if you can't get that to work i can cook something up.

[Rick]

So you do something like:

 

TEntity ui = CreateBuffer(800, 600, BUFFER_COLOR);

// before drawing our widget textures to our UI buffer, clear and set
ClearBuffer();
SetBuffer(ui);

// draw to ui bufferhere

// set back
SetBuffer(BackBuffer());

// draw our ui buffer to screen
DrawImage(GetColorBuffer(ui), 0, 600, 800, -600); // this flips the image also

 

How do you handle transparency? I would think you want the buffer itself to be transparent besides the widgets you draw on it.

[ChrisMAN]

I don't know much about opengl but once i started thinking of buffers as an array of memory addresses on the video card things started to make more sense. When you copy from the buffer you are still just copying memory addresses so if you modify the buffer after a copy, the copy is affected as well.

 

Here is the trick to get the transparent buffer:

 

SetBlend(1)
SetColor(Vec4(0,0,0,0))
ClearBuffer()

 

in summary set the color before clearing the buffer. the buffer's background will inherit the current color.

[Rick]

Thanks, this combined with using %'s for size and position gives me exactly what I'm looking for with scaling fonts! I'll have to find a resolution for each aspect ratio to use as the base.

[Rick]

How are you offsetting the clicking regions? I tried finding the difference between the base res to the actual res and then subtracting those values for each widget but doesn't seem to work. The mouse over and clicking isn't registering correctly for any resolution but the base resolution picked.

[Rick]

Nevermind, I got it. Needed the % difference between the default & actual screen resolutions and multiply that by each widget's x, y, w, h. All good now!

[Rick]

Just a shot in the dark here but no matter what font I configure to load the size of the font is always the same. This doesn't make any sense. In my xml file I have a font_name & font_size tag which when I load the xml UI file in, I load the font file into a map of maps. The font names are all in a directory like "FontName-14.dds". So I combine the name + size to load the font. It looks like all that is working fine, but no matter what size I pick the size of the font visually looks the same size on screen. This is driving me nuts

 

[EDIT]

Even if I change one of the buttons font styles to say Comic-20, I see in the font container I have that's it's loaded, but the font is still the other font I'm using for the button. hmmm

 

[EDIT2]

I changed one of the buttons to Comic-14 (which I don't have) and the font container shows it's a bad pointer but the button still uses the other font and not 14 size. Am I missing something about SetFont()? Each Widget has a TFont variable, and when I load the Fonts I load them into a UI class which holds all widgets. After loading a widget I set it's TFont variable to the UI's TFont that matches the name & size. It's almost as no matter what name/size it requests it's always giving some default one.

 

[EDIT3]

I know I'm rambling but this is so confusing. I remove all references of the other font and only Comic is in the xml file. The font container reflections this, however everything is still using the old font. *sigh*

 

[EDIT4]

Son of a!! Don't name your function names the same as LE function (::SetFont() instead of my classes SetFont())!!

[ChrisMAN]

I would be very interested in hearing if any one has gotten free type integrated with leadwerks 2.5.

[gamecreator]

I would love to see automatic 2D proportion adjusting in Leadwerks. Something like:

 

Adjust2D(1920,1080,GraphicsWidth(),GraphicsHeight());

 

Then you could draw using the resolution you're designing the game for and it would adjust to whatever the resolution ends up being. It could handle the text properly this way. Not sure how images would be handled. Ideally you could give the engine several sizes and it could pick the closest one to use but maybe there's a better solution.

[Rick]

From what I'm experiencing we pretty much have to position controls by aspect ratio. Once you do that, then all the resolutions in the same aspect ratio seem to scale just fine. For mobile programming this can get stupid because there is a wide range of aspect ratios out there, but to make controls scale correctly with resolution using %'s seems to be the best way, but when you do that for a particular aspect ratio, other aspect ratios don't look right and get all screwed up.

[Josh]

Honestly, it would be nice if we could scale fonts by a % value. I'd love to define the font size as a % of the button size it's used on, and then when the button gets scaled so does the font to match, just not sure if that works.

In L3:

Context::SetScale()