LibGDX - Rendering an Angry Birds style animated score counter - libgdx

Question

My game has an end of level screen, on which I wish to display an animated player score. If you have seen the one in Angry birds and many other games, the score text starts at "000000" and increments rapidly until it reachs the actual score the player achieved. I have tried to write this with a while loop, and a for loop but it just doesn't work properly - I am obvioulsy still misunderstanding how the update method works. Here is my render() method of my End of Level screen:
#Override
public void render (float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
timeElapsed = delta;
while(this.iCounter < this.score) {
font.draw(batch, "Score: " + this.iCounter, screenWidth / 2, screenHeight / 2);
if(timeElapsed > 1.0f) {
iCounter = iCounter + 10;
}
timeElapsed = 0.0f;
}
batch.end();
}
The above just seems to crash the screen.
I just want the score to start at zero and then every half a second for example increase the score until it reaches the actual score.
Has anyone got any ideas on how to do this properly as I just can't seem to get this working.

Answer 1

You are calling font.draw() multiple times inside the render. The result would be multiple scores, drawn over ach other.
Note, that render is called once per frame and you want to animate the score over n Frames.
So your variable iCounter should be a class variable, and you increment and draw it once inside the render method. Yoou may also want to store a constant scorePerSecond, which defines how much the iCounter increments per second.
So the result should look like this:
public static final int SCORE_PER_SECOND = 100;
private int iCounter;
public void render (float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
iCounter = Math.min((int)(iCounter+SCORE_PER_SECOND*delta), score)
font.draw(batch, "Score: " + this.iCounter, screenWidth / 2, screenHeight / 2);
batch.end();
}

Answer 2

The render method is called every frame and all the drawing you put in there should just be for a single frame. What it's doing is trying to run your entire look in a single frame, and hence looking like it's crashed.
What you need to do is get rid of the loop and just add an amount to iCounter each frame (i.e. each time render() is called).
Here's your coded edited into a very simple implementation to show what I mean...
#Override
public void render (float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
font.draw(batch, "Score: " + this.iCounter, screenWidth / 2, screenHeight / 2);
if (this.iCounter < this.score) {
this.iCounter++;
}
batch.end();
}
This will increment the score every single frame, which I think is probably what you want. Eitehr way it should provide a good starting point.

Answer 3

Thanks to everyone above who helped me. This is how I got it working in the end.
time += delta;
if (time >= this.SCORE_DELAY) {
if (iCounter < this.score) {
iCounter = iCounter + 10;
}
time -= this.SCORE_DELAY;
}
SCORE_DELAY is declared as a float and I have got the setting at 0.15f which seems to be a good rate.
private static float SCORE_DELAY = 0.15f;