How to make a rolling meter like in Earthbound.

Question

Hey, I'm making a thing where I can make numbers displayed as sprites and animating it counting up or down like Earthbound, Mother 3 or any other games that uses sprites as numbers, as HP, timers or scores.

I got it to animate the sprites counting up/down but my problem is that, for example, the tens digit slowly animating counting up/down while the unit digit animating counting up/down to the tens, which hurts the readability of the sprites, instead of the tens digit animate counting up or down after the unit digit animates counting above 9 or below 0, and the same goes for the hundreds digit from the tens digit and so on.

I'm using a for-loop and arrays for animating the digits.

Here's a gif of what I mean and what I'm going for.

alt text

Here's an another example.

alt text

I'm not sure what should I do, since I'm not very experienced with for-loops and I'm only starting using it recently. I'm not sure if I should add a parameter for it, an if statement or something else?

Here is the code for your perusal.

 public float countingSpeed;         // Controls the speed of countingNumber.
 [Space]
 public int number;                  // Controls where the countingNumber counts to.
 public float countingNumber;        // CountingNumber controls the frames of sprites for each digits.
 [Space]
 public SpriteRenderer[] digits;     // The amount of digits in a row e.g. element 0 is for the unit, element 1 is for the tens, element 2 is for the hundreds, etc.
 public Sprite[] digitSprites;       // Frames of sprites from 0 to 9 for each digits, you can also add frames between numbers like 0 to 1, 1 to 2 and so on.

 void Start()
 {
     countingNumber = number;    // Makes countingNumber set to the value of number in the start of the scene.
 }

 void Update()
 {
     int multiplyConvert = digitSprites.Length / 10;
     int convert = 1;    // Starting value for convert to multiply by itself in the forloop.

     // For animating the digits.
     for (int i = 0; i < digits.Length; i++)
     {
         float numberConvert = (countingNumber / convert) % 10 * multiplyConvert;
         convert *= 10;      // Convert multiples by itself by the size of the digits array e.g. 1 x 10 = 10 x 10 = 100 x 10 = 1,000 etc.
         digits[i].sprite = digitSprites[(int)numberConvert];
     }

     // Adding clamp to number and countingNumber.
     int numberLimit = convert - 1;
     number = Mathf.Clamp(number, 0, numberLimit);
     countingNumber = Mathf.Clamp(countingNumber, 0, numberLimit);
     
     CountingToNumbers();
 }

 // Allows countingNumber to count to number.
 void CountingToNumbers()
 {
     if (countingNumber < number)
     {
         countingNumber += countingSpeed * Time.deltaTime;

         if (countingNumber >= number)
         {
             countingNumber = number;
         }
     }
     else
     {
         countingNumber -= countingSpeed * Time.deltaTime;

         if (countingNumber <= number)
         {
             countingNumber = number;
         }
     }
 }

If you have any suggestions or an answer for it, let me know, thanks.

Answer 1

Well it all just boils down to doing the math right. First of all you should split up the selection of the right digit from the selection of the right intermediate sprite. So for a given input number you get a distinct set of digits you want to display. Think of them as the jumping digits without intermediate values. On top of those you just add your gradual change when appropriate. You always want your intermediate changed based on the fractional part of the lowest digits since they should all turn at the same time. However for higher digits you only want to add that transition when all the lower digits are at the value 9 and will roll over.

 int num = (int)countingNumber;
 int offset = (int)((countingNumber*multiplyConvert) % multiplyConvert);
 bool rollOver = true;
 for (int i = 0; i < digits.Length; i++)
 {
     int digit = num % 10;
     int spriteIndex = digit * multiplyConvert;
     if (rollOver)
         spriteIndex += offset;
     if (digit < 9)
         rollOver = false;
     digits[i].sprite = digitSprites[spriteIndex];
     num /= 10;
 }

I haven't tested this myself but the logic should be clear. The rollOver flag indicates if the current digit need to roll over. This is true in the beginning since the last digit will always roll. However we only carry the roll over along as long as the current "floored" digit is 9. As soon as we hit a digit less than 9 it will still roll along with all the digits to the right but not the next one.

How to make a rolling meter like in Earthbound.

1 Reply

Your answer

Follow this Question

Related Questions