How to create numbers count up/down animation with Phaser?

[Anahit DEV]

Hi All,

I was trying to create numbers count up/down animation with phaser and need some help.

I found this https://codepen.io/netgfx/pen/GJgVJR but when adding it to my game i am getting a lot of errors. Any idea how i can create such animation with numbers.

Thanks in advance.

[samid737]

You can use repeat to add the score X amount of times:
 

 

[Anahit DEV]

Is good example @samid737.

Can we animate all numbers not specific characters?

Thanks

[samid737]

 

You can use tweens then as an alternative if you want all digits to be visible, and with tweens you have the ability to yoyo the animation (increase then decrease). same example with addScore() slightly modified:
 

 

[Anahit DEV]

Great snippet.

 

Thank you @samid737. Will check it out

[loki1991]

@Anahit Dev just considere doing it slightly different to how samid did it. have a loop the increments by 1 until it reaches the actual score as with the way samid has it if you click a bunch of times it results in an off score.

keeping the score increment to animate the numbers going up and the score itself as separate parts will allow you to handle that issue.

[Anahit DEV]

@loki1991 thank you for the feedback. In my game i dont have the animation on click. I just need to animate numbers when user will win.

If you can give me an example what you are referring to i would really appreciate it.

Thanks.

[loki1991]

@Anahit DEV in any situation where the score counter is increased before the animation finishes.

this line. 
game.add.tween(text).to({score:text.score+1000},1000,"Linear",true);

what happens if an event occurs that triggers the addition of another score before this line finishes animating? some games have many different ways to add to the score and it's not always possible to guarantee the player won't gain more points before it finishes. like collecting coins a little too close together.

simply look at your example and in your mind change the "click" to any event that would add to the score. The result is an incorrect score. While it may work in some games where you only ever add to the score at set points it doesn't for any game the would update the score multiple times. the score bord only goes up in increments of 1000 in your example yet i can get a score of 3251 which should not be possible.

[Anahit DEV]

Hey @loki1991 , thank you for the feedback

In my game i don't have such option when it can count another win points as am disabling all buttons during the countup animation.

I have another issue here.

I added the below code for points countup animation

creditsMeterLines = game.add.text(0, 0, "100", { font: "44px lcditrichregular", fill: "#ff0000", boundsAlignH: "right"});
creditsMeterLines.setTextBounds(785, 423, 108, 32);
game.add.tween(creditsMeterLines).to({text:1000},2000,"Linear",true);

and it is animating numbers throughout game full width not inside the element box area where i have the numbers. Any way of setting some overflow so it animates numbers in the specific space area?

Thanks.

[loki1991]

@Anahit DEV while you don't have that issue because of how your game is it seems bad to not point out the possible error with the code.


im not sure what your issue is. Also sorry if i gave off a different impression but i am also new to phaser. my background is C# and Java. so this is rather new to me.
 

[Anahit DEV]

Is like having countup with 20 characters. Am also new to Phaser.

Maybe there is a way setting characters count in tween or adding an overflow?

[Norbert]

If you use Phaser3 by now, I can recommend this solution from the official Phaser3 examples:
https://phaser.io/examples/v3/view/tweens/number-tween