[libGDX] day 5 – fonts

Today we want to write something on the screen. Therefore we first have to generate our font as a BitmapFont. libgdx uses therefore a cool tool called hiero. If you have JavaWebStart, you can use it via this URL: http://wiki.libgdx.googlecode.com/git/jws/hiero.jnlp
You just have to play a little bit with this tool to find out, what all the fancy buttons are doing, but if you finally got a font that you like, you have to save it to your assets folder (maybe a subfolder called fonts).
Go to File -> Save BMFont (text) … and select in a mysterious dialog the folder where you want to save the file.

In this folder there will be a .fnt and a .png file, which together are your bitmap font. Loading this font into your game is really easy:

font=new BitmapFont(Gdx.files.internal("font/test.fnt"), false);

As well it is pretty easy to draw some text with our font in the render()-Method. In the last tutorial we used a stage and the stage has its own sprite batch, so we use that to draw the font.

// draw the stage
stage.draw();

// draw some text :)
stage.getSpriteBatch().begin();
font.draw(stage.getSpriteBatch(), "mega-awesome font :D", 50,80);
stage.getSpriteBatch().end();

Another important thing you need if your game get’s bigger, is some structure in your source code.
We do that by seperating our code into different “screens” (like splashscreen, menuscreen, ingamescreen).

To do that the main class has to be completly changed. It does not anymore implement the ApplicationListener, but extends Game.

public class TestGame extends Game{
 @Override
 public void create() {
  setScreen(new SplashScreen());
 }
}

The only thing this class is good for, is to switch between the screens. The main code is now inside the screens.

The Screens just implement the interface screen and all the methods. To access the TestGame if I want to switch the screen I pass the TestGame in the constructor.

public class SplashScreen implements Screen{

 Texture tree;
 TextureRegion christmasTree;
 Texture ball;
 Texture snow;
 Stage stage;
 BitmapFont font;

 TestGame game;
 public SplashScreen(TestGame pGame){
  game=pGame;

  tree=new Texture(Gdx.files.internal("graphics/tree.png"));
  christmasTree=new TextureRegion(tree, 0, 0, 450,730);
  ball=new Texture(Gdx.files.internal("graphics/ball.png"));
  snow=new Texture(Gdx.files.internal("graphics/snow.png"));

  font=new BitmapFont(Gdx.files.internal("ui/test.fnt"), false);

  stage=new Stage();

  // our christmas tree
  Image ctree=new Image(christmasTree);
  ctree.setSize(296, 480); // scale the tree to the right size
  ctree.setPosition(-300,0);
  ctree.addAction(moveTo(400-148, 0,1f));
  ctree.setZIndex(0);
  stage.addActor(ctree);

  Image ballImage=new Image(ball);
  ballImage.setPosition(400 - 148+60, 170);

  ballImage.setOrigin(32,32);
  ballImage.setColor(1,1,1,0);
  ballImage.addAction(sequence(delay(1),parallel(fadeIn(1),rotateBy(360,1)),delay(2f),
    new Action() { // custom action to switch to the menu screen
     @Override
     public boolean act(float delta) {
      game.setScreen(new MenuScreen(game));
      return false;
     }
    }));

  stage.addActor(ballImage);

  // create the snowflakes
  for(int i=0;i<10;i++){
   spawnSnowflake();
  }
 }

 @Override
 public void render(float delta) {
  // clear the screen
  Gdx.gl.glClearColor(1,1,1, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // let the stage act and draw
  stage.act(delta);
  stage.draw();
  stage.setViewport(800,480,false);

  // draw our text
  stage.getSpriteBatch().begin();
  font.draw(stage.getSpriteBatch(), "mega awesome-game starts...", 50,80);
  stage.getSpriteBatch().end();
 }

 public void spawnSnowflake(){
  final Image snowflake=new Image(snow);
  snowflake.setOrigin(64,64);
  int x=(int) (Math.random()*800);
  snowflake.setPosition(x,480);
  snowflake.setScale((float) (Math.random()*0.8f+0.2f));
  snowflake.addAction(parallel(
    forever(rotateBy(360,(float) (Math.random()*6))),
    sequence(moveTo(x,0,(float) (Math.random()*15)),fadeOut((float) (Math.random()*1)),
     new Action() { // we can define custom actions :)

     @Override
     public boolean act(float delta) {
      snowflake.remove(); // delete this snowflake
      spawnSnowflake(); // spawn a new snowflake
      return false;
     }
    }
    )));
  stage.addActor(snowflake);
 }

 @Override
 public void resize(int width, int height) {  
 }

 @Override
 public void show() {
 }

 @Override
 public void hide() {
 }

 @Override
 public void pause() {
 }

 @Override
 public void resume() {
 }

 @Override
 public void dispose() {
  tree.dispose();
  ball.dispose();
  snow.dispose();

  stage.dispose();
 }
}

While trying around with these things I learned some other usefull stuff:
Add

import static com.badlogic.gdx.scenes.scene2d.actions.Actions.*;

to the other imports and you do not anymore have to write

Actions.moveTo()

but only

moveTo()

As well a Stage does not need a camera. If you want to set the viewport just use:

stage.setViewport(800,480,false);

The menu-screen mentioned in the example is at the moment structured the same way. Today we will take a look on how to add real ui-Elements (like buttons) into there.