Label & Font Basic

Tutorial Objectives:

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

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 :

• Gdx FreeType: Extension that allow you to generate your BitmapFont on the fly. This is the most flexible to programatically. It gives you plenty of parameters to manipulate your font size, color, shadow… It would be your preferred approach for handling fonts but Carefull! You cannot use this if you target HTML. That is why it is not included by default when you create a LibGDX Project, the extension must be included by ticking the FreeType box within the Project creation tool.
• 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) but if you are going for a predefined resolution it works.
• 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();
  }
}

Advertisement