libGDX - Add scores & display it at top left corner of the screen?

Question

Here is the sample code of a simple game in libGDX. When a rain drop falls into a bucket,score should be increased by one. And total score should be shown at the top left corner.

If 3 drops are missed than display GAME OVER. I know to increase the score but i don't know to display it. Thank you.

public class Drop implements ApplicationListener {
Texture dropImage;
Texture bucketImage;
Sound dropSound;
Music rainMusic;
SpriteBatch batch;
OrthographicCamera camera;
Rectangle bucket;
Array<Rectangle> raindrops;
long lastDropTime;

@Override
public void create() {
  // load the images for the droplet and the bucket, 64x64 pixels each
  dropImage = new Texture(Gdx.files.internal("droplet.png"));
  bucketImage = new Texture(Gdx.files.internal("bucket.png"));

  // load the drop sound effect and the rain background "music"
  dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"));
  rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"));

  // start the playback of the background music immediately
  rainMusic.setLooping(true);
  rainMusic.play();

  // create the camera and the SpriteBatch
  camera = new OrthographicCamera();
  camera.setToOrtho(false, 800, 480);
  batch = new SpriteBatch();

  // create a Rectangle to logically represent the bucket
  bucket = new Rectangle();
  bucket.x = 800 / 2 - 64 / 2; // center the bucket horizontally
  bucket.y = 20; // bottom left corner of the bucket is 20 pixels above the bottom         screen edge
  bucket.width = 64;
  bucket.height = 64;

  // create the raindrops array and spawn the first raindrop
  raindrops = new Array<Rectangle>();
  spawnRaindrop();
}

private void spawnRaindrop() {
  Rectangle raindrop = new Rectangle();
  raindrop.x = MathUtils.random(0, 800-64);
  raindrop.y = 480;
  raindrop.width = 64;
  raindrop.height = 64;
  raindrops.add(raindrop);
  lastDropTime = TimeUtils.nanoTime();
}

@Override
public void render() {
  // clear the screen with a dark blue color. The
  // arguments to glClearColor are the red, green
  // blue and alpha component in the range [0,1]
  // of the color to be used to clear the screen.
  Gdx.gl.glClearColor(0, 0, 0.2f, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // tell the camera to update its matrices.
  camera.update();

  // tell the SpriteBatch to render in the
  // coordinate system specified by the camera.
  batch.setProjectionMatrix(camera.combined);

  // begin a new batch and draw the bucket and
  // all drops
  batch.begin();
  batch.draw(bucketImage, bucket.x, bucket.y);
  for(Rectangle raindrop: raindrops) {
     batch.draw(dropImage, raindrop.x, raindrop.y);
  }
  batch.end();

  // process user input
  if(Gdx.input.isTouched()) {
     Vector3 touchPos = new Vector3();
     touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
     camera.unproject(touchPos);
     bucket.x = touchPos.x - 64 / 2;
  }
  if(Gdx.input.isKeyPressed(Keys.LEFT)) bucket.x -= 200 * Gdx.graphics.getDeltaTime();
  if(Gdx.input.isKeyPressed(Keys.RIGHT)) bucket.x += 200 * Gdx.graphics.getDeltaTime();

  // make sure the bucket stays within the screen bounds
  if(bucket.x < 0) bucket.x = 0;
  if(bucket.x > 800 - 64) bucket.x = 800 - 64;

  // check if we need to create a new raindrop
  if(TimeUtils.nanoTime() - lastDropTime > 1000000000) spawnRaindrop();

  // move the raindrops, remove any that are beneath the bottom edge of
  // the screen or that hit the bucket. In the later case we play back
  // a sound effect as well.
  Iterator<Rectangle> iter = raindrops.iterator();
  while(iter.hasNext()) {
     Rectangle raindrop = iter.next();
     raindrop.y -= 200 * Gdx.graphics.getDeltaTime();
     if(raindrop.y + 64 < 0) iter.remove();
     if(raindrop.overlaps(bucket)) {
        dropSound.play();
        iter.remove();
     }
  }
}

@Override
public void dispose() {
  // dispose of all the native resources
  dropImage.dispose();
  bucketImage.dispose();
  dropSound.dispose();
  rainMusic.dispose();
  batch.dispose();
}

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

@Override
public void pause() {
}

@Override
public void resume() {
}
}

Answer 1

Here is a link to a libGDX users wiki that I found helpful when I had encountered the same question for a Pong remake.

To display the score, the tools that you need are: an int variable to keep score, a String or CharacterSequence variable to help display the score (I'll use a String), and a BitmapFont which is used to display a font type.

First step: declare all of these tools.

private int score;
private String yourScoreName;
BitmapFont yourBitmapFontName;

Second step: initialize them in the create method

public void create()     
    score = 0;
    yourScoreName = "score: 0";
    yourBitmapFontName = new BitmapFont();

Tertiary step: increment the score variable and change the yourScoreName String variable in your collision logic method (when the raindrop overlaps the bucket).

if(raindrop.overlaps(bucket)) {
     score++;
     yourScoreName = "score: " + score;
     dropSound.play();
     iter.remove();

Fourth step: In the render() method, set the color of the font and call the draw method on your BitmapFont between spriteBatch.begin and spriteBatch.end.

batch.begin(); 
yourBitmapFontName.setColor(1.0f, 1.0f, 1.0f, 1.0f);
yourBitmapFontName.draw(batch, yourScoreName, 25, 100); 
batch.end();

Play with: the parameters in the font.setColor() method so that you can see them in contrast to your background color, the number parameters in the font.draw() method to get the score related textures displayed in the top left corner (the last two number parameters in the font.draw() method represent the x and y coordinates of the score texture).

Fifth step: run it, then smile.

The same logic will apply to displaying, "GAME OVER." For heuristic purposes, I'll leave the creation of the logic up to you.

Read the documentation in the link to gain a deeper understanding of the magic.

Answer 2

To display the score you could create a stage.

Stage stage = new Stage();
stage = new Stage();
stage.setCamera(cam);
stage.setViewport(WIDTH, HEIGHT, false);

Then you'll have to create like a label, and a text font. So you can look that up on the libgdx wiki for details.

Label text;
LabelStyle textStyle;
BitmapFont font = new BitmapFont();
//font.setUseIntegerPositions(false);(Optional)

textStyle = new LabelStyle();
textStyle.font = font;

text = new Label("Gamever",textStyle);
text.setBounds(0,.2f,Room.WIDTH,2);
text.setFontScale(1f,1f);

Then just add that to the stage when the game is lost using:

stage.addActor(text);