Jump to content

Font Size and Resolutions


Rick
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 smile.png

 

[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())!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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()

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...