Number display

Hello all,
Im looking at a score system that displays like an arcade style game say the score starts like 00000000 you get some points and it rolls up to the score say 00001200 instead of it saying 1200

Cheers

I made 2 widgets for this, a digit block:

digitblock_hierarchy.jpg

and a counter that holds the digit blocks in a horizontal box: (edit: forgot to rename it but *wDigitBlock *= wFieldNumber)

Here the score is added via a button click:

This counter keeps the track of the Total Score, turns it into a string array so we can push individual numbers into digit blocks. Rather than updating all blocks, we only update the ones whose value changed - going from 152 to 172 should only update the middle digit: 5 turns into 7. You may want to add bound checks.

The *Update Display *is a custom event in the Digit Block widget. The *New Digit *keeps track of what needs to the displayed, and we then play an animation:

Above, the *UpdateDigitMidAnim *is a widget animation event that reads New Digit and has the text block display it. This event is triggered in the middle of the animation, as seen below:

The border Clips to Bounds and we update the text block’s value as soon as the widget if fully obscured:

widgetanim.gif

Above, animate text block translation: slide up to -40, linear cut to +40 and interpolate back to 0. The end result:

endresult.gif

There are some bits and bobs here that will surely need improving but the method seems sound enough for this.

1 Like

Thanks that’s awesome I’ll give it a try

If you wanted to make it look more like a cylinder with numbers, so the next number is pulled up early, I’d probably use a vertical box with 2 stacked text blocks and animate the box instead, switching values inside as needed or reorder children. Something along the lines of: