Font sizes

[Rick]

This thread sort of talks about what my question is and doesn't seem anything really came from it.

 

http://www.leadwerks.com/werkspace/topic/2169-font-questions/page__hl__font+sizes

 

When I look into creating a GUI, I want the controls to have text scales with the control. Today, I can either create new font files for each supported resolution (a pain and lots of work to fine tune it), or I can create my own font code that loads the fonts as images and I scale them and piece them together manually (another pain ). Anyone have any other suggestions that might be more dynamic and easier?

 

 

Is the new Leadwerks going to address any of these?

[Josh]

The new engine loads TTF files with any size.

[MasteR]

Hi Rick,

 

Short of reading through the forum thread you linked, I'm 99% sure that I implemented "a" solution to the same problem some time ago...

 

How's that for a tease!

 

Give me an hour and I'll hunt down the code.

 

***EDIT***

I began my own GUI implementation 2 years ago but never finished it as a result the code is far from complete. I don't have the patience this evening (evening in Australia right now) to re-learn all the specifics, so I'll give you the code as is.

From what I can discern this is how I accomplished the task.

 

1. Decide on the main resolution you want your application to run at. That is, the resolution you expect the majority of your users to...use. This is an important stage. Armed with this "optimal" resolution your artists can go to town creating all the required GUI assets to suit.

 

2. The implementation uses bitmap fonts.

 

3. All your drawing can be done to the regular LW back buffer but you'll have to crack into some OpenGL functions from this point. I'll omit the meat of this stage but the "trick" is to scale the drawing of all your GUI widgets so that they occupy the same amount of window realestate regardless of the window resolution.

 pRenderScale = (float)GraphicsWidth() / (float)aWidth;

where aWidth is the "optimal" width you chose in step 1. Use pRenderScale to multiply the width and height when drawing your GUI widgets.

 

e.g. A label created at 10*10 pixels should be drawn at (10* pRenderScale)*(10* pRenderScale).

 

I think a working example is really going to be the best thing to show at this stage as I've run out of time.

 

You want to focus on the CLabel class as this is the text output. In main.cpp muck around with resolution values in the following lines:

Graphics(640, 480);
gui.SetBaseResolution(640, 480)

 

There are going to be many ways to implement a solution and my code attached is old, messy and incomplete. But the key points to remember are:

* Create all GUI assets, including a bitmap font, to suit an "optimal" resolution.

* In your application draw "scaled" version of theses assets based on the formula in step 3.

 

Follow these guidelines and you'll only ever have to create GUI assets once and the will always occupy the same amount of window realestate regardless of the window's resolution.

 

I hope this helps, even if it's just a little.

[Rick]

Hey Master, thanks for the explanation and code. Very nice of you to share this. I currently do the scaling of other GUI elements based on the base resolution and it does work great. However with pure LE code only, the fonts don't allow this when using DrawText() and loading fonts. Sounds like maybe you got around this specific limitation by using OpenGL commands? I'll check those out in your code.

 

One way I got around it, some months ago, was to actually create an image for each letter for a base font size and then load each letter individually as normal images so that they can be scaled while drawing based on the resolution using LE's DrawImage() function. Of course this was a pain in the butt and the spacing wasn't always perfect so that's why I was wondering.

 

Something I haven't tested either, but almost sounds like when you do this method you have to have multiple GUI setups based on the different aspect ratios that monitors can have these days and switch based on that also since otherwise the GUI would look funky switching between aspect ratios. Nothing is simple in the game world is it. Thanks for the code!

[MasteR]

Ok I've looked at the code some more and you'll need the following things:

#include "glut.h"

After rendering lights the regular LE way you can start to render all your GUI stuff. I have not tested the code below, nor do I remember exactly what each function does but it *should* work.

int viewPort[4];
glGetIntegerv(GL_VIEWPORT, viewPort);
gluOrtho2D(0, viewPort[2], viewPort[3], 0);
glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();
SetBuffer(BackBuffer());
SetBlend(BLEND_ALPHA);
TFont font = LoadFont("Bitmap font...");
SetFont(font);
std::string text = "winner!";
glScalef(pRenderScale, pRenderScale, 1.0f);//this is your magic function
characterWidth = (FontHeight() * pRenderScale) * text.size();//labels can be multi lined
for(int i = 0; i < text.size(); i++)
{
DrawText(0, 0 + characterWidth * i), text[i].c_str());
}
glLoadIdentity();//reset gl matrix
glPopMatrix();