How do I smoothly animate a progress bar?

Use the Tween behavior: target Width to the new value over 0.3s with EaseOut. Or every tick: bar.Width = lerp(bar.Width, target_width, 10 * dt). Both produce smooth motion.

Why does direct Set Width look choppy?

Health changes by discrete amounts (5 damage = bar shrinks by 5 px instantly). Lerping interpolates between the previous and new values frame by frame, producing a continuous animation.

What about pixel-art aesthetics?

Lerp produces subpixel widths that may look fuzzy on pixel art. Floor the result for pixel-aligned: bar.Width = floor(lerp(...)). Trade-off: smoothness for crispness. Pick per project art style.

Fix: Construct 3 Progress Bar Not Updating Smoothly

Quick answer: Tween the bar’s width to the target, or every tick set bar.Width = lerp(bar.Width, target_width, 10 * dt). Direct assignment from health changes produces choppy jumps.

A boss fight has a health bar at the top of the screen. Each hit removes a chunk; the bar jumps instantly to the new width. Players asked for a smoother animation that decays toward the new value. The Set Width action is too instant.

Option 1: Tween Behavior

Add the Tween behavior to the bar sprite. On damage:

On damage_taken:
    HealthBar Tween Width to health over 0.3 seconds (Ease out)

The bar animates smoothly over 0.3 seconds with eased deceleration. Looks polished and is one action.

Option 2: Manual Lerp Every Tick

Every tick:
    HealthBar Set Width to lerp(HealthBar.Width, target_health, 10 * dt)

Each tick the bar moves a fraction (10 * dt) of the remaining distance toward target_health. Smooth exponential decay; reacts immediately to changes; no fixed duration.

Tune the multiplier (10 here): higher = faster response; lower = slower. 5 is languid, 20 is snappy.

Show Damage Buffer

For a “damage taken” visual effect, use two bars stacked: a back bar (drains slowly) and a front bar (drops instantly):

Every tick:
    HealthBarFront Set Width to health   // instant
    HealthBarBack Set Width to lerp(HealthBarBack.Width, health, 5 * dt)   // trails

The back bar lingers showing recent damage. Common in fighting games and RPGs.

Pixel Art Considerations

Lerp produces fractional widths (e.g., 47.3 px). Modern Construct renders subpixel cleanly but pixel art may look fuzzy. Floor for integer widths:

HealthBar Set Width to floor(lerp(HealthBar.Width, target, 10 * dt))

Animation snaps in 1-pixel steps. Less smooth but consistent with pixel art style.

Verifying

Take damage repeatedly. The bar should animate smoothly between values, not jump. Tune the lerp factor until the feel matches the game pace.

“Direct assignments produce jumps. Tween or lerp for smooth motion. Choose duration or response rate to taste.”

A trailing back-bar (delayed drain showing recent damage) sells the impact of taking hits more than a single fast bar.