Juicy Health Bar

A game-feel health bar for Unity, built layer by layer. Twelve steps, from a bar that just changes a number to one that drains, cracks, shakes, flashes, punches, glows and breathes — each layer is a single toggle you can step through and feel on its own.

No paid assets. The rounded/soft look is a small SDF shader that ships with the repo.

Türkçe: README.tr.md

Run it

1. Open the project in Unity 6000.3 or newer.
2. Open Assets/HealthBar/Scenes/HealthBarDemo.unity.
3. Press Play. Nothing runs on its own — you drive it.

Key	Button	What it does
D · →	›	Next layer
A · ←	‹	Previous layer
Space	Hasar	Deal random damage (14–25)
H	İyileş	Heal 22
R	Sıfırla	Refill to 100

Health is not reset when you change steps — layers 11 and 12 (low HP pulse, danger glow) only exist at low health, so switching to them mid-fight is the point.

The twelve layers

Each step adds one thing on top of the previous ones. The code line on screen is the real line doing the work — the values match HealthBarConfig.

#	Layer	Line
01	Base damage	fill.fillAmount = hp / max;
02	Smooth drain	fill.DOFillAmount(t, .3f).SetEase(Ease.OutCubic);
03	Damage chunk	chunk.DOFillAmount(t, .35f).SetDelay(.4f);
04	Chunk color	chunk.color = "#FFF6D8";
05	Shake	bar.DOShakeAnchorPos(.15f, new Vector2(28, 12), 20);
06	Flash	flash.DOFade(.85f, .04f);
07	Punch	root.DOPunchScale(new Vector3(.05f, .3f, 0), .3f);
08	Damage numbers	txt.DOAnchorPosY(y + 70f, .65f).SetEase(Ease.OutCubic);
09	Color states	fill.DOColor(gradient.Evaluate(t), .2f);
10	Heal juice	fill.DOFillAmount(t, .45f).SetEase(Ease.OutQuad);
11	Low HP pulse	root.DOScale(1.02f, .55f).SetLoops(-1, LoopType.Yoyo);
12	Danger glow	glow.DOFade(.55f, .55f).SetLoops(-1, LoopType.Yoyo);

Every layer is a flag in JuiceFlags, and every effect method starts with if (!Has(JuiceFlags.X)) return;. That is what makes them independently switchable at runtime instead of commented-out code.

Requirements

• Unity 6000.3 or newer
• DOTween (free version is enough) — included under Assets/Plugins/Demigiant, with the UI module enabled
• TextMeshPro (ships with Unity)

Using it in your own project

Copy Assets/HealthBar/ into your project, then:

1. Install DOTween and run its setup panel with the UI module on.
2. Import TMP Essential Resources if you have never used TextMeshPro in that project (Window → TextMeshPro → Import TMP Essential Resources).
3. Run Tools → EdinDev → Health Bar → Demo Sahnesini Kur. The scene, prefabs, config and material are rebuilt from code, so nothing depends on serialized references surviving the trip between projects or Unity versions.

Or skip the demo entirely and drop Assets/HealthBar/Prefabs/HealthBar.prefab into your own canvas: it carries Health (pure logic) + JuicyHealthBar (all the DOTween work). Drive it with health.TakeDamage(n) / health.Heal(n).

How the round corners work without a paid asset

RoundedImage is an Image subclass and RoundedRect.shader draws the shape with a signed distance field. Three things are worth stealing:

• All shape data rides in vertex UV channels (size, per-corner radius, softness, border width) instead of material properties, so every bar part still batches into one draw call.
• The normalized position is computed from the vertex position, not UV0. Image.Type.Filled clips the quad and shifts UV0; reading the shape from UV0 makes the rounded cap shrink as the bar drains.
• Shadow and glow are the same component, just with a large softness. The alpha ramps from 0 at the shape's edge to 1 that many pixels inside, which turns a rounded rect into a soft blob — no blur pass, no bloom, no post-processing.

⚠ The shape data needs TexCoord1/2/3 enabled in the Canvas's Additional Shader Channels. If they are off the component silently draws a plain rectangle, so RoundedImage turns them on itself in OnEnable.

Layout

Designed at 1080×1920 (the vertical video framing it came from) but anchored, so it holds up in a landscape window too: title on top, bar + code box + buttons as one centered column, and the layer list moves from the right edge to a two-column grid under the bar when the window is too narrow for it (ResponsiveLayout).

Structure

Assets/HealthBar/
├─ Scripts/Core/    Health · JuiceFlags · HealthBarConfig · JuicyHealthBar
│                   Palette · FloatingText · FloatingTextPool · CodeSyntax
├─ Scripts/UI/      RoundedImage            (the SDF component)
├─ Scripts/Demo/    DemoSteps · StepController · StepCard · LayerList · ResponsiveLayout
├─ Editor/          DemoSceneBuilder        (rebuilds the whole scene from code)
├─ Shaders/         RoundedRect.shader
├─ Prefabs/         HealthBar · FloatingText
├─ Configs/         HealthBarConfig.asset   (every tuning value)
├─ Art/             White · BgSpot · DotGrid · Vignette
└─ Fonts/           Inter Display · JetBrains Mono (both OFL)

A few notes from building it

• The bar uses three separate transforms — punch, low-HP pulse and shake each get their own. Two tweens on one transform overwrite each other.
• The damage chunk is cream (#FFF6D8), not orange. The health gradient passes through yellow and orange, so a saturated chunk disappears into the bar at ~35–50% health. The separation has to come from lightness, not hue.
• The low HP pulse is guarded by !IsDead, so it stops at zero instead of pulsing a dead bar.
• On-screen buttons keep Navigation.Mode.None and clear the EventSystem selection after a click. Otherwise Space fires both the demo's damage and the focused button's submit, and the arrow keys start walking between buttons instead of changing steps.

License

MIT — see LICENSE. The fonts are licensed separately under the SIL Open Font License; their license files sit next to them in Assets/HealthBar/Fonts/.

Built for the @edindev Unity series.