Label & Font Basic

Tutorial Objectives:

Showcase Label using BitmapFont, the “Gdx FreeType” extension and Skin

screenshot

Introduction

A Label is one of the components available out of the box with LibGDX through the Scene2D Library.

The Label’s font can be :

  • BitmapFont: a graphical representation of a ttf font that can be generated by a tool such as Hierro. Bitmap Font do not scale very well (as it streches the image)
  • Gdx FreeType: Extension that allow you to generate your BitmapFont on the fly. Carefull! You cannot use this if you target HTML. That is why this extension must be included upon creating your project if you wish to use it. It gives you plenty of parameters to manipulate your font programatically (size, color, shadow).
  • Skin: Equivalent on LibGDX to a CSS on HTML. Create your Label using style defined within your Skin. Download an existing Skin from sites such as czyzby’s gdx-skins repository or create your own using one on of the tool available on that site.

For this tutorial it is assumed you have been through the Image basic tutorial.

Video

Code:

Code available for download or can be read below:


public class MyGdxGame extends ApplicationAdapter {
  private Stage stage;

@Override
  public void create () {
    stage = new Stage(new ScreenViewport());
    int Help_Guides = 12;
    int row_height = Gdx.graphics.getWidth() / 12;
    int col_width = Gdx.graphics.getWidth() / 12;
    addBackgroundGuide(Help_Guides);

    Label.LabelStyle label1Style = new Label.LabelStyle();
    BitmapFont myFont = new BitmapFont(Gdx.files.internal("bitmapfont/Amble-Regular-26.fnt"));
    label1Style.font = myFont;
    label1Style.fontColor = Color.RED;

    Label label1 = new Label("Title (BitmapFont)",label1Style);
    label1.setSize(Gdx.graphics.getWidth(),row_height);
    label1.setPosition(0,Gdx.graphics.getHeight()-row_height*2);
    label1.setAlignment(Align.center);
    stage.addActor(label1);

    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("truetypefont/Amble-Light.ttf"));
    FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
    parameter.size = 30;
    parameter.borderWidth = 1;
    parameter.color = Color.YELLOW;
    parameter.shadowOffsetX = 3;
    parameter.shadowOffsetY = 3;
    parameter.shadowColor = new Color(0, 0.5f, 0, 0.75f);
    BitmapFont font24 = generator.generateFont(parameter); // font size 24 pixels
    generator.dispose();

    Label.LabelStyle labelStyle = new Label.LabelStyle();
    labelStyle.font = font24;

    Label label2 = new Label("True Type Font (.ttf) - Gdx FreeType",labelStyle);
    label2.setSize(Gdx.graphics.getWidth()/Help_Guides*5,row_height);
    label2.setPosition(col_width*2,Gdx.graphics.getHeight()-row_height*4);
    stage.addActor(label2);

    Skin mySkin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));

    Label label3 = new Label("This is a Label (skin) on  5 columns ",mySkin,"black");
    label3.setSize(Gdx.graphics.getWidth()/Help_Guides,row_height);
    label3.setPosition(col_width*2,Gdx.graphics.getHeight()-row_height*6);
    stage.addActor(label3);

    Label label4 = new Label("This is a Label (skin) with a 5 columns width but WITH wrap",mySkin,"black");
    label4.setSize(Gdx.graphics.getWidth()/Help_Guides*5,row_height);
    label4.setPosition(col_width*2,Gdx.graphics.getHeight()-row_height*7);
    label4.setWrap(true);
    stage.addActor(label4);
}

public void addBackgroundGuide(int columns){
    Texture texture = new Texture(Gdx.files.internal("background.jpg"));
    texture.setWrap(Texture.TextureWrap.MirroredRepeat, Texture.TextureWrap.MirroredRepeat);

    TextureRegion textureRegion = new TextureRegion(texture);
    textureRegion.setRegion(0,0,texture.getWidth()*columns,texture.getWidth()*columns);
    Image background = new Image(textureRegion);
    background.setSize(Gdx.graphics.getWidth(),Gdx.graphics.getWidth());
    background.setPosition(0,Gdx.graphics.getHeight()-background.getHeight());
    stage.addActor(background);
}

@Override
  public void render () {
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    stage.act();
    stage.draw();
  }
}