Anahit DEV

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

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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.