Counter effect

0 favourites
  • 7 posts
From the Asset Store
Make a displayed number gradually increase or decrease, making an impression of a real-time counting.
  • Hi, did anyone already make an effect like this image below?

    I would like to do something like this to count score in game over, for exemple, and finally show the players score...but have no idea how to start.


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Do you want the numbers to give impression of rolling up and down just like what you posted too?

  • Do you want the numbers to give impression of rolling up and down just like what you posted too?

    Yes, rolling up for a couple of seconds and finally stop in the final it?

    Tks for reply

  • One possibility:

    You have to create an image for all numbers 0-9, and also create images for when the numbers are rolling. Do you want just several frames of quick speedy animation (which the player couldn't see what the number is) OR do you want to create the frames showing the gap between each number? This is all entirely up to you.

    You will have a Sprite called "Digit" which has 2 animations: "stillNumber" and "rolling".

    "stillNumber" will have 10 frames, frame 0 has number 0. Frame 1 has number 1. And so on until 9.

    "rolling" will obviously have the frames of rolling numbers.

    Create an instance variable called "index" for the Sprite Digit. Now, clone the sprite until you have 6 instances of sprite Digit. Line them up in a row just like what you posted. From the rightmost Digit to the leftmost Digit, assign a running index value starting from 0 to 5 to its variable "index". So the rightmost Digit will have "index" of 0. The second rightmost Digit will have "index" of 1. And so on, until the leftmost Digit which will have "index" of 5.

    In the event sheet, you will refer to each Digit using the variable "index", using For Each (ordered). You will have to refer to the number variable you want in this loop and pick out the particular digit from such variable. You can acquire just the nth digit of an integer variable by dividing it by 10^(n-1), floor the result and do modulo operation (%) on it with value of 10. For example, getting the 3rd digit of 98765: floor(98765 / (10^2)) = 987 --> 987 % 10 = 7. Thereby, you get number 7 which is the 3rd digit of number 98765. From here, you can map these values you get with the "stillNumber" animation frames.

    However, one part still remains and that is the rolling part. The paragraph above is simply for mapping number to be shown correctly, but for aesthetics of rolling number, suppose the integer variable you are referring to is changing, you could make it so the Digit changes its animation to rollingNumber for a brief moment before turning into "stillNumber" animation once again. But for this part here, how the rolling numbers should look like exactly when the referred variable change around is entirely up to you.

    Follow everything so far?


    Above is just one possibility, and it has its own pro and con. But does this fit your bill?

    Also, if anyone can come up with something simpler, please do share.

  • I followed your way of thinking, and its a nice suggestion!! I will try to make some .capx and then post to improve with some help!!

    Thought anyone could have already done that...

    Tks a lot!!

  • too much blur..but anyway...


  • thats it!! its exactly what i was looking for!!

    Tks a lot to everyone

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)