Libgdx - Changing Vis UI font using Scene 2d doesn't work, is there an alternative?

Question

I am currently using Scene 2d to create some user interface for this libgdx app I am making. I found Vis UI and realized that it would work out pretty well. Everything is fine except for the font.

Since, Vis UI is made on Scene 2d, I attempted to use the mothods descriped here, to change the font.

I tried the simple answer (which was also marked correct)

        Skin skin = VisUI.getSkin();
        VisUI.dispose(false);
        FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("customText.ttf"));
        FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
    parameter.size = 14;
        skin.add("default-font", generator.generateFont(parameter), BitmapFont.class);
        skin.add("small-font", generator.generateFont(parameter), BitmapFont.class);
        VisUI.load(skin);

Then I tried the more complex answer

    VisUI.dispose(true);

    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("customText.ttf"));
    FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
    parameter.size = 14;

    ObjectMap<String, Object> fontMap = new ObjectMap<String, Object>();
    fontMap.put("default-font", generator.generateFont(parameter));
    fontMap.put("small-font", generator.generateFont(parameter));

    SkinLoader.SkinParameter par = new SkinLoader.SkinParameter(fontMap);

    assets.load(VisUI.SkinScale.X1.getSkinFile().path(), Skin.class, par);
    assets.finishLoading();

    Skin skin = assets.get(VisUI.SkinScale.X1.getSkinFile().path());
    VisUI.load(skin);

None of the two methods actually made a difference with the ScrollableTextArea

The previous code was placed in the constructor while I made sure that I created my VisWindow after changes to VisUI since I place the window creation in the show() method in libgdx's Screen interface.

Inside the VisWindow it is basially the following items and thats it.

    textArea = new ScrollableTextArea("...");

    VisTable table = new VisTable();

    VisScrollPane scrollPane = new VisScrollPane(table);
    scrollPane.setFlickScroll(false);
    scrollPane.setFadeScrollBars(false);

    add(textArea.createCompatibleScrollPane()).growX().growY().row();

I don't get what I did wrong. Am I not supposed to use Scene2d to change the font? Or did I forget something somewhere.

Any suggestion is welcome. Thanks in advance.

score 0 · Answer 1 · answered May 17 '18 at 09:20

You need to add font before loading the rest of the widgets.

Try to first create the skin, before loading the VisUI. Then add the font, atlas and json file. Then load the generated skin with VisUI.

    Skin skn = new Skin();
    skn.add("default-font", font12, BitmapFont.class);

    skn.addRegions(new TextureAtlas(Gdx.files.internal(("x1/uiskin.atlas"))));
    skn.load(Gdx.files.internal("x1/uiskin.json"));
    VisUI.load(skn);

In skin json file remove (since you will be adding it trough code):

com.badlogic.gdx.graphics.g2d.BitmapFont: {
default-font: {file: default.fnt }},

This does not seem to work for me. The line `skn.load(Gdx.files.internal("x1/uiskin.json"));` triggers a serialization error `Caused by: com.badlogic.gdx.utils.GdxRuntimeException: No com.badlogic.gdx.graphics.g2d.BitmapFont registered with name: default-font` . It appears that when loading a skin, the already added attributes aren't used. — axlan, Dec 13 '19 at 07:21

score 0 · Answer 2 · answered Dec 13 '19 at 07:38

After going back to Putting Freetypefont into libgdx skin the only solution that worked for me was using an AssetManager. For example:

AssetManager assetManager = new AssetManager();
ObjectMap<String, Object> fontMap = new ObjectMap<String, Object>();
fontMap.put("default-font", myNewFont);
SkinLoader.SkinParameter parameter = new SkinLoader.SkinParameter(fontMap);
assetManager.load("skins/basic/uiskin.json", Skin.class, parameter);
assetManager.finishLoading();
VisUI.load(assetManager.get("skins/basic/uiskin.json", Skin.class));

score 0 · Answer 3 · answered Aug 10 '23 at 08:39

It seems like the font does not get overridden if it's already in the font file. So, copy the visui skin assets into your "assets" folder (uiskin.json, uiskin.atlas, uiskin.png).

You can find these via fuzzy search in your IDE. You'll probably want to customize them later anyway.

Then remove the font definition (the whole block) from the top of uiskin.json.

Here's a working example. You'll probably want to tune the density stuff a bit:

    AssetManager assetManager = new AssetManager();
    ObjectMap<String, Object> fontMap = new ObjectMap<>();

    FreeTypeFontGenerator fontGenerator = new FreeTypeFontGenerator(Gdx.files.internal("Roboto-Regular.ttf"));
    FreeTypeFontGenerator.FreeTypeFontParameter fontParameter = new FreeTypeFontGenerator.FreeTypeFontParameter();

    int size = (int) (20 * Gdx.graphics.getDensity());
    fontParameter.size = size;
    fontParameter.color = new Color(1, 1, 1, 1);
    fontParameter.genMipMaps = true;
    fontParameter.magFilter = Texture.TextureFilter.Nearest;
    fontParameter.minFilter = Texture.TextureFilter.MipMap;

    fontGenerator.scaleForPixelHeight(size);
    BitmapFont font = fontGenerator.generateFont(fontParameter);

    fontMap.put("default-font", font);
    fontMap.put("small-font", font);

    SkinLoader.SkinParameter parameter = new SkinLoader.SkinParameter(fontMap);
    assetManager.load(Gdx.files.internal("uiskin.json").path(), Skin.class, parameter);
    assetManager.finishLoading();
    VisUI.load(assetManager.get(Gdx.files.internal("uiskin.json").path(), Skin.class));

I found that many of the examples on SO did not work, so here you! :)

You'll also probably want to generate different fonts for default vs small font. Here I use the same one for both for brevity.

Libgdx - Changing Vis UI font using Scene 2d doesn't work, is there an alternative?

3 Answers3