Interfaces, designed and
built where they run.

// Layout and styling stay in the Widget Blueprint; behaviour lives in C++.
UCLASS()
class UHealthBarWidget : public UUserWidget
{
    GENERATED_BODY()
public:
    UFUNCTION(BlueprintCallable) void SetHealth(float NewPct);
protected:
    virtual void NativeTick(const FGeometry& Geo, float Dt) override;
    UPROPERTY(meta=(BindWidget)) TObjectPtr<UProgressBar> Fill;
    UPROPERTY(meta=(BindWidget)) TObjectPtr<UProgressBar> Ghost;
    UPROPERTY(Transient, meta=(BindWidgetAnim)) TObjectPtr<UWidgetAnimation> HitFlash;
    UPROPERTY(EditAnywhere) float GhostDelay = 0.45f;
    UPROPERTY(EditAnywhere) float GhostSpeed = 1.f / 0.6f;
private:
    float Target = 1.f, Hold = 0.f;
};

void UHealthBarWidget::SetHealth(float NewPct)
{
    NewPct = FMath::Clamp(NewPct, 0.f, 1.f);
    if (NewPct < Target) { Hold = GhostDelay; PlayAnimation(HitFlash); }
    Target = NewPct;
    Fill->SetPercent(Target);
}

void UHealthBarWidget::NativeTick(const FGeometry& Geo, float Dt)
{
    Super::NativeTick(Geo, Dt);
    if ((Hold -= Dt) > 0.f) return;
    Ghost->SetPercent(FMath::FInterpConstantTo(Ghost->GetPercent(), Target, Dt, GhostSpeed));
}

// Layout in UXML, look in USS. The ghost trails through a USS transition:
//   .health-bar__ghost--trailing { transition: width 0.6s ease-out 0.45s; }
[UxmlElement]
public partial class HealthBar : VisualElement
{
    readonly VisualElement fill = new() { name = "fill" };
    readonly VisualElement ghost = new() { name = "ghost" };
    float target = 1f;

    public HealthBar()
    {
        AddToClassList("health-bar");
        Add(ghost);
        Add(fill);
    }

    public void SetHealth(float pct)
    {
        pct = Mathf.Clamp01(pct);
        bool damage = pct < target;
        target = pct;

        fill.style.width = Length.Percent(target * 100f);
        ghost.EnableInClassList("health-bar__ghost--trailing", damage);
        ghost.style.width = Length.Percent(target * 100f);

        if (!damage) return;
        AddToClassList("is-hit");
        schedule.Execute(() => RemoveFromClassList("is-hit")).StartingIn(120);
    }
}

# Fill and Ghost are TextureProgressBars styled by the project Theme.
extends Control

const GHOST_DELAY := 0.45
const GHOST_TIME := 0.6

@onready var fill: TextureProgressBar = %Fill
@onready var ghost: TextureProgressBar = %Ghost
var _tween: Tween

func set_health(pct: float) -> void:
    pct = clampf(pct, 0.0, 1.0)
    var damage := pct < fill.value
    fill.value = pct

    if _tween:
        _tween.kill()
    _tween = create_tween()
    if damage:
        _flash()
        _tween.tween_interval(GHOST_DELAY)
    _tween.tween_property(ghost, "value", pct, GHOST_TIME) \
        .set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_OUT)

func _flash() -> void:
    modulate = Color(1.8, 1.8, 1.8)
    create_tween().tween_property(self, "modulate", Color.WHITE, 0.12)

// Attached to a Group element under a Screen; fill and ghost are Image elements.
import { Script, math } from 'playcanvas';

export class HealthBar extends Script {
    static scriptName = 'healthBar';

    /** @attribute @type {import('playcanvas').Entity} */ fill;
    /** @attribute @type {import('playcanvas').Entity} */ ghost;
    /** @attribute */ ghostDelay = 0.45;
    /** @attribute */ ghostTime = 0.6;

    target = 1; shown = 1; hold = 0;

    setHealth(pct) {
        pct = math.clamp(pct, 0, 1);
        if (pct < this.target) this.hold = this.ghostDelay;
        this.target = pct;
        this.fill.element.anchor = [0, 0, pct, 1];
    }

    update(dt) {
        if ((this.hold -= dt) > 0) return;
        const step = dt / this.ghostTime;
        this.shown += math.clamp(this.target - this.shown, -step, step);
        this.ghost.element.anchor = [0, 0, this.shown, 1];
    }
}

// The compositor does the motion. CSS that goes with it:
//   .fill, .ghost       { transform-origin: left; transform: scaleX(var(--hp)); }
//   .is-damage .ghost   { transition: transform .6s cubic-bezier(.2,.7,.2,1) .45s; }
export function setHealth(bar: HTMLElement, pct: number): void {
  pct = Math.min(1, Math.max(0, pct));
  const previous = Number(bar.style.getPropertyValue('--hp') || 1);
  const damage = pct < previous;

  bar.classList.toggle('is-damage', damage);
  bar.style.setProperty('--hp', String(pct));

  if (damage) {
    bar.animate({ filter: ['brightness(1.8)', 'none'] }, { duration: 120 });
  }
}