Libgdx pixelated TextButton

Question

I've got a problem in libGDX. I wan't to use a virtual screen size to achive the same looking app on every phone. I've generated a .fnt file from .ttf with hiero. Then I've made a TextButton with this .fnt (using a skin). But the problem is, when I set a virtual screen (480x800) with Viewport, Stage and Table, and I set things like this:

In the constructor:

viewport = new StretchViewport(480, 800);
stage = new Stage(viewport);

In the resize method:

viewport.update(width,height);

and the text on the TextButton is pixelated.

How can I solve the problem, or how should I set the screen to look the same on all devices and get smooth text?

Thanks!

Answer 1

Use the FreeTypeFontGenerator, it creates a BitmapFont from a .ttf on the fly within your program while it is running so your BitmapFont can be generated at the correct size for the device with no stretching/scaling required. https://github.com/libgdx/libgdx/wiki/Gdx-freetype

Answer 2

I would definitely look into the FreeTypeFontGenerator and use a BitmapFont, so you may then use a texture filter which makes a huge difference in quality. TextureFilter.Linear is what you're looking for. Not tested, but something along the lines of the following:

    BitmapFont yourBitmapFont = new BitmapFont();
    yourBitmapFont.getRegion().getTexture().setFilter(TextureFilter.Linear,TextureFilter.Linear);


    Skin tileSkin = new Skin();
    tileSkin.add("white", new Texture("whatever/image/path"));
    tileSkin.add("default", new BitmapFont());

    TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
    textButtonStyle.up = tileSkin.newDrawable("white");
    textButtonStyle.down = tileSkin.newDrawable("white", Color.DARK_GRAY);
    textButtonStyle.checked = tileSkin.newDrawable("white",
            Color.LIGHT_GRAY);
    textButtonStyle.over = tileSkin.newDrawable("white", Color.LIGHT_GRAY);
    textButtonStyle.font = _yourBitmapFont;     
    tileSkin.add("default", textButtonStyle);