Skip to content

Image Sprite Meter

An Image Sprite Meter displays a value by driving a UI Image with scale, resize, or frame-based updates.

This is ideal for:

  • UI health and mana bars
  • Status bars inside HUD panels
  • Segmented or frame-based icon meters
  • UI meters that need anchored left-to-right or bottom-to-top fill

Widget setup:

Image Sprite Meter Component

Add Component -> PlayMaker -> Widgets -> Image Sprite Meter

Parameters

Field Description
Value Current meter value. In edit mode, this is used for preview.
Min Value Value corresponding to an empty meter.
Max Value Value corresponding to a full meter.
Clamp To Range Keeps values within Min/Max before normalizing.
Invert Reverses normalized output so Min becomes full and Max becomes empty.
Image UI Image to update.
Fill Method How the meter is visualized: ScaleTransform, ResizeImage, or AnimationFrames.
Axis Axis to apply fill on (X or Y) for scale/resize methods.
Anchor Mode Which side stays fixed while filling: Center, Start, or End.
Update Label Optional Meter Label to update when the meter changes.
Frames Sprite list used by AnimationFrames (first = empty, last = full).
Use Color Gradient If enabled, drives Image.color from a gradient.
Color Gradient Gradient evaluated from 0 to 1 (min to max).

Notes:

  • ScaleTransform changes the RectTransform.localScale of the target image.
  • ResizeImage changes the RectTransform width or height while keeping the chosen anchor side fixed.
  • AnimationFrames swaps the Image sprite based on the normalized value.
  • Anchor behavior respects the target RectTransform pivot, which makes it useful for left/right or top/bottom filling UI bars.

Actions

Image Sprite Meter uses these actions:

Tips

  • Use ScaleTransform for simple bars that should preserve the original image proportions.
  • Use ResizeImage when you want the UI element itself to shrink or grow across the layout.
  • Use AnimationFrames for hearts, battery icons, ammo pips, or any meter with clear visual steps.
  • Pair the meter with a Meter Label when you want both a visual bar and a numeric readout.