How to make a score counter display through images?

Godot Version

4.4.1, Steam version if it helps

Question

Hello! I’m trying to make a score counter for a little project I’m working on. This would be an integer that increases the more times a button is clicked in game, starting from zero. However, I’m trying to display the score using images. For example, if the score was 3, there would be an image of the number 3 on the screen. If it was 15, images of the number 1 and the number 5 would be displayed next to one another.

Is this possible? I’m trying to use GDScript to accomplish this. I just can’t figure out how to detect the individual numbers in an integer. I’m probably just overthinking how to do this, but I could use another opinion or insight on this.

You can get the first digit of a number by using the modulus operator, this gives you the remainder of a division, so if you mod by 10, you will only get numbers zero through nine

var first_digit = 14 % 10 # 14 divides by 10 with a remain of 4, the first digit
print(first_digit) # prints 4

And when you divide by 10 (and round down) that effectively moves the number back one digit.

var my_number: int = 123

# get the first digit
var first_digigt = my_number % 10  # == 3
# move our digits down
my_number = floori(my_number / 10) # == 12

# our new number is 12, it's first digit is 2
var second_digit = my_number % 10  # == 2
my_number = floori(my_number / 10) # == 1

var third_digit = my_number % 10   # == 1
my_number = floori(my_number / 10) # == 0

Notice the my_number finished at zero, you could use a while loop to continue this process for a number of any size.

Thank you so much! This worked like a charm. I had to put each number in an array to get the amount of digits in order to make the loop possible, and that seemed to do it!