Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


Anahit DEV
 Share

Recommended Posts

@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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 years later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...