How to draw a bitmapfont on a stage in libgdx?

Question

This is my current render method on my level in my Libgdx game. I am trying to draw a BitmapFont on my level's top right corner but all I'm getting is a bunch of white boxes.

 @Override
    public void render(
            float delta ) {
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

        this.getBatch().begin();

            //myScore.getCurrent() returns a String with the current Score
        font.draw(this.getBatch(), "Score: 0" + myScore.getCurrent(), 600, 500);
        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
        this.getBatch().end();
        }

I would like to add the score font into some kind of an actor and then do a scene.addActor(myScore) but I don't know how to do that. I followed Steigert's tutorial to create the main game class that instantiates the scene, font, in the AbstractLevel class that is then extended by this level.

So far, I'm not using any custom font, just the empty new BitmapFont(); to use to default Arial font. Later I would like to use my own more fancy font.

Solution 1

Try moving the font.draw to after the stage.draw. Adding it to an actor would be very simple, just create a new class and Extend Actor Like such

import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.Actor;

public class Text extends Actor {

    BitmapFont font;
    Score myScore;      //I assumed you have some object 
                        //that you use to access score.
                        //Remember to pass this in!
    public Text(Score myScore){
        font = new BitmapFont();
            font.setColor(0.5f,0.4f,0,1);   //Brown is an underated Colour
    }


    @Override
    public void draw(SpriteBatch batch, float parentAlpha) {
         font.draw(batch, "Score: 0" + myScore.getCurrent(), 0, 0);
         //Also remember that an actor uses local coordinates for drawing within
         //itself!
    }

    @Override
    public Actor hit(float x, float y) {
        // TODO Auto-generated method stub
        return null;
    }

}

Hope this helps!

Edit 1: Also try System.out.println(myScore.getCurrentScore()); Just to make sure that that isn't the issue. You can just get it to return a float or an int and when you do the "Score:"+ bit it will turn it into a string itself

Solution 2

Well, in this case, you may need to call this.getBatch().end first. Like this:

mSpriteBatch.begin();
mStage.draw();
mSpriteBatch.end();
//Here to draw a BitmapFont
mSpriteBatch.begin();
mBitmapFont.draw(mSpriteBatch,"FPS",10,30);
mSpriteBatch.end();

I don't know why, but it works for me.

Solution 3

I have solved similar problem with white boxes by closing batch before starting drawing stage. That is because the stage.draw() starts another batch and invalidates the previous batch not ended with end().

So in current example I would move this.getBatch().end() before drawing stage:

    ...
    font.draw(this.getBatch(), "Score: 0" + myScore.getCurrent(), 600, 500);
    this.getBatch().end();
    stage.act(Gdx.graphics.getDeltaTime());
    stage.draw();
    }

Comments

[Peter Poliwoda]

Thanks! This might do the trick, but I found a pretty awesome utility called a Label which uses exactly what I need. I extended the Label as my Score for now and added it to the stage as a regular actor. Works like a charm.