Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

LibGDX FreeType font blurry

I'm generating my font dynamically using the screen height percentage and set percentages (Obviously multiplied by density's in the future.

Some notes. I'm reading from an OTF file. Using the latest version of LibGDX (Version 1.2.0)

I have the following problem: (Large breaks in the font and looks very blurry, but only on medium. Large and small look very sharp)

Bad font

My Preset font sizes:

//Font sizes, small, med, large as a percentage of the screen.
    public static float
            FONT_SIZE_LARGE = 0.175f,
            FONT_SIZE_MEDIUM = 0.06f,
            FONT_SIZE_SMALL = 0.04f;

My font generator settings

FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
        FreeTypeFontGenerator generator;
this.generator = new FreeTypeFontGenerator(Gdx.files.internal(filename));

Creating the actual font:

//Create a new font and add it to available font sizes.
public BitmapFont createFont(float size, float color)
{
    this.parameter.size = Math.round(size);
    BitmapFont bitmapFont = generator.generateFont(parameter);
    bitmapFont.setColor(color);
    listOfFonts.add(new FontStorage(bitmapFont, size));
    return bitmapFont;
}

Now I've tried a few things on different devices but still have the same issue. I'm thinking it could be because it's not the power of 2? (Do font's need to be a power of 2 to be even?)

The fonts are drawn on many different screen resolutions, so making three bitmap fonts of a certain size is out of the question.

Can someone help me out here?

like image 948
Oliver Dixon Avatar asked Jul 13 '14 21:07

Oliver Dixon


1 Answers

I figured this out, there are 3 settings you need to set if you want ultimate clear fonts.

The first two are just before creating it from file (Can be OTF or TTF) and they are:

//Make sure you ceil for your current resolution otherwise you'll be nasty cut-offs.
this.parameter.size = (int)Math.ceil(size);
this.generator.scaleForPixelHeight((int)Math.ceil(size));

The next step is setting a magnify and minifies filters. (For scaling if you want too, I'm not because I'm drawing almost pixel perfect). Here's the code anyhow:

this.generator = new FreeTypeFontGenerator(Gdx.files.internal(filename));
this.parameter.minFilter = Texture.TextureFilter.Nearest;
this.parameter.magFilter = Texture.TextureFilter.MipMapLinearNearest;

This will give you super nice crisp font on any resolution. GL.

like image 146
Oliver Dixon Avatar answered Oct 06 '22 08:10

Oliver Dixon