Settings

Value: The numeric or text value to be displayed in the component. It can be dynamically updated from a script.

Main Settings

Autoplay: Defines the counter’s behavior on start. The options are:

• None: No automatic animation or value change occurs. The value remains static unless modified by a script.
• Counter: The value progressively increases from a starting value to an end value.
• Countdown: The value progressively decreases. Ideal for countdowns.
• Animation to Target Value: Animates the transition from the current value to the one specified in the ‘Value’ property.

Show Value: Allows showing or hiding the digits. This can be useful if you only want to display other elements like the progress bar.

Show Progress Bar: Toggles the visibility of the associated progress bar.

Global Alpha: Adjusts the overall transparency of the entire component (digits, progress bar, and other effects), ranging from 0 (fully transparent) to 1 (fully opaque).

Events

On Value Change: An event that fires whenever the digits’ value changes. You can add functions to be executed in response to this change.

On Animation Finish: Fires when a transition or Autoplay animation (like Counter or Countdown) has finished.

Profile: Allows saving the current configuration as a reusable profile or loading a previously saved one. Very useful for maintaining consistency across multiple UI elements.

Format

Format String: Defines the pattern to format the displayed value. It uses a special syntax to control the number of digits, decimal places, and the inclusion of other characters. Below are the supported format patterns:

• Basic Format Patterns
  • Number Placeholders
    • 0: Digit placeholder (shows 0 if no digit exists). Example: 00000 with value 123 → 00123
    • #: Optional digit placeholder (shows nothing if no digit exists). Example: ##### with value 123 → 123
  • Decimal Numbers
    • .: Decimal point. Example: 0.00 with value 123.456 → 123.46
    • Example: 0.000 with value 123.4 → 123.400
  • Thousands Separator
    • ,: Thousands separator. Example: #,##0 with value 1234567 → 1,234,567
    • Example: 0,000.00 with value 1234.5 → 1,234.50
  • Special Characters
    • %: Percentage (multiplies value by 100). Example: 0.0% with value 0.125 → 12.5%
    • -: Negative number placeholder (shows space for positive numbers). Example: -0000 with value -123 → -0123
    • Example: -0000 with value 123 → 0123
  • Literal Text
    • Any character that is not a format specifier (0, #, ., ,, %, -, H, h, M, m, S, s, f) is treated as a literal character.
    • You can also enclose literal text in single (') or double (") quotes. This is useful for including special characters as literals.
    • Example: SCORE: 00000 with value 123 → SCORE: 00123
    • Example: $#,##0.00 with value 1234.5 → $1,234.50
    • Example: 88:88 will always display 88:88, as 8 is not a digit placeholder.
    • Example: '#'0 with value 5 → #5 (the first # is a literal).
• Time Formats
  • Time Components
    • HH: Hours (24-hour format, 2 digits)
    • hh: Hours (12-hour format, 2 digits)
    • MM or mm: Minutes (2 digits)
    • SS or ss: Seconds (2 digits)
    • ff: Fractional seconds (hundredths)
  • Time Examples
    • MM:SS: Minutes and seconds (e.g., 05:23)
    • HH:MM:SS: Full time format (e.g., 01:05:23)
    • MM:SS.ff: With hundredths (e.g., 05:23.67)
    • TIME: MM:SS: With label (e.g., TIME: 05:23)

Presets: Offers a selection of predefined format patterns for common use cases like clocks, scores, or simple counters, facilitating initial setup.

Font Settings

Font Asset: Specifies the font asset (TextMeshPro Font Asset) to be used for rendering the digits.

Digits FX includes a few SDF fonts. You can use the Text Mesh Pro SDF font generator tool to create any number of new fonts that are compatible with Digits FX as well (Digits FX use its own SDF font shaders, Text Mesh Pro is not used to render the digits).

Color Mode: Choose between a solid color or a gradient for the digits.

• Single Color: Applies a single, uniform color.
• Gradient: Applies a color gradient.

Color: Defines the base color of the digits when ‘Color Mode’ is ‘Single Color’.

Gradient: Defines the color gradient to apply. It allows adjusting the rotation to change the gradient’s direction, as well as the frequency and amplitude to modify its appearance.

Softness: Softens the edges of the digits, creating a less sharp and more blurred effect.

Face Texture: Applies a texture to the front face of the digits, allowing for custom appearances like metal, wood, etc.

Back Texture: Applies a texture to the back part of the digits, visible during flip animations.

Layout

Size: Controls the font size of the digits.

Best Fit: If enabled, the font size will automatically adjust to fit within the component’s panel or container.

Constraint to Rect: When enabled, the text scales to not exceed the bounds of the object’s RectTransform.

Horizontal Alignment: Aligns the digits horizontally within their container (Left, Center, Right).

Horizontal Padding: Adds horizontal padding when the alignment is not centered.

Vertical Padding: Adds vertical padding.

Spacing: Defines the spacing between each individual digit, allowing adjustment of character separation.

Effects

Bevel: Adds a bevel effect to the edges of the digits to give a 3D appearance, with options to control width and lighting.

Blink: Enables a blinking effect for the digits, separators (like the colons in a clock), or both. The frequency and phase of the blink can be configured.

Edge Fade: Fades the top and bottom edges of the digits, useful for visually integrating the component.

Fade In On Start: If enabled, the digits will appear with a fade-in animation when the scene starts.

Fade Out After Delay: Defines a delay after which the digits will fade out. A value of 0 disables it.

Glitch: Adds a digital distortion (glitch) effect with options to customize intensity and frequency.

Glow/Fire: Enables a glow or fire effect around the digits, with settings for color, intensity, and animation.

Heat Wave: Simulates a heat distortion that ripples through the digits.

Ice/Frost: Creates an ice or frost effect on the surface of the digits.

Move & Scale: Allows for continuous animation of the digits’ position and scale.

Pulse: Applies a pulsing effect that rhythmically animates the size of the digits.

Outline: Adds an outline to the digits, with options to define thickness and color.

Scan Lines: Overlays horizontal scan lines on the digits for an old monitor look.

Shadow: Casts a shadow behind the digits, with controls for color, offset, and blur.

Slant: Slants the digits and the progress bar, with a control to define the tilt angle.

Tremble: Adds a trembling effect to the digits, with options for intensity and speed.

Wave: Applies a wave-like deformation to the digits.

Transition

Animation Flow: Determines if the value change animation applies to all digits at once or sequentially, one by one.

Effect: Choose the visual effect for the transition between values. Options include:

• Scroll: The digits scroll up or down.
• Morph: The digits smoothly morph into the new ones.
• Fade: The old value fades out and the new one fades in.
• Flip Vertical/Horizontal/Clock: The digits flip on an axis like a flip clock.
• Pixelate: The transition is done with a pixelation effect.
• None: The value change is instant, with no animation.

Direction: Defines the direction of the transition animation (e.g., Up/Down for scroll).

Effect Duration: The duration of the transition animation in seconds.

Easing Type: Defines the animation’s acceleration curve (e.g., Linear, easing) for ease-in, EaseOut, ease-out, Bounce, bounce) for a more polished finish.

Sound Effects: Allows for assigning audio clips to be played during the transition animation.

Progress Bar

Type: Selects the shape of the progress bar: Horizontal or Circular.

Layout: Configures the position (e.g., top, or bottom, etc.) of the digits, as well as dimensions the (widths and height) of the progress bar height) in relation to the digits.

Appearance: Customizes the appearance of the progress bar, including:

• Border Width/Color: The thickness and color thickness of the border.
• Padding: The space between the border and the fill.
• Background Color: The color of the bar’s background.
• Fill Color or Gradient/Color: The color or gradient of the fill bar that shows indicating the progress.Segments: Allows for dividing the bar into a specified number of visual segments.