libgdxscene2dbitmap-fonts

Libgdx font cut


I have an issue with libgdx BitMapFont, I display labels inside of a scene2d table, but the font is "cut" at some parts of the text (see below).

enter image description here

Here is my code :

For declaring the font :

font12 = new BitmapFont(Gdx.files.internal("fonts/text.fnt"));
font12.setUseIntegerPositions(false);
font12.getData().setScale(0.2f);

For declaring the table :

Table table = new Table();
table.top();        
table.setFillParent(true);
LabelStyle lblStyle = new LabelStyle();
lblStyle.font = font12;
scoreLabel =new Label("SCORE", lblStyle);
timeLabel = new Label("TIME", lblStyle);
levelLabel = new Label("LEVEL", lblStyle);

Thank you for your help.

[EDIT]

Here is the code I tried using freetype but this doesn't look smooth :

FreeTypeFontGenerator generator = new      FreeTypeFontGenerator(Gdx.files.internal("fonts/OpenSans-Regular.ttf"));
    FreeTypeFontParameter parameter = new FreeTypeFontParameter();
    parameter.size = 18;
    parameter.color = Color.BLACK;
    generator.scaleForPixelHeight(18);
    parameter.minFilter = Texture.TextureFilter.Linear;
    parameter.magFilter = Texture.TextureFilter.Linear;
    parameter.mono = false;
    parameter.gamma = 2f;
    font12 = generator.generateFont(parameter); // font size 12 pixels
    font12.setUseIntegerPositions(false);
    font12.getRegion().getTexture().setFilter(TextureFilter.Linear, TextureFilter.Linear);

    generator.dispose(); // don't forget to dispose to avoid memory leaks!

enter image description here


Solution

  • First thing, you should always avoid scaling fonts because the result is pixelated and looks really bad. You can generator fonts to the correct size that you need within your program using the FreeTypeFontGenerator:

    https://github.com/libgdx/libgdx/wiki/Gdx-freetype

    When adding components to a table the table sets the size on its child components. Essentially, the table will override the size of the label when the label is added to the table.

    To make sure the label keeps the same size, set the size on the table's cell that is holding the label like this:

    table.add(label).size(label.getWidth(), label.getHeight());
    

    You can also apply a different size to the label when adding it to the table (if for example you wanted to have extra space around the label):

    table.add(label).size(500, 100);
    

    EDIT

    This code works for me, give this a try.

    private Stage stage;
    
    @Override
    public void create () {     
        stage = new Stage();
        stage.setViewport(new ScreenViewport(stage.getViewport().getCamera()));
    
        Table table = new Table();
        table.setFillParent(true);
        stage.addActor(table);
    
        FreeTypeFontGenerator gen = new FreeTypeFontGenerator(Gdx.files.internal("internal/arialbd.ttf"));
        FreeTypeFontGenerator.FreeTypeFontParameter param = new FreeTypeFontGenerator.FreeTypeFontParameter();
        param.size = 18;
        param.borderColor = new Color(Color.BLACK);
        param.borderWidth = 1;
        BitmapFont font = gen.generateFont(param);
        gen.dispose();
    
        Label.LabelStyle style = new Label.LabelStyle();
        style.font = font;
        Label label = new Label("Hello World", style);
    
        table.add(label).size(label.getWidth(), label.getHeight());
    }
    
    @Override
    public void render() {  
        Gdx.gl.glClearColor(0.6f, 0.8f, 0.8f, 1.0f);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);   
        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }
    
    @Override
    public void resize(int width, int height) {
        stage.getViewport().update(width, height, true);
    }
    

    enter image description here