MC Dungeons Heart Shine Fix

[bleak otter]

The reason your shine locks at ~70% is the calc placeholder truncating the final value to an integer. With "decimal":"false" the expression snaps to whole pixels, so once (1 - health%/100.0) * elementheight gets below 1 px (which happens when you’re missing about 30 % health) the result becomes 0 and the shine stops moving.

Let the calculator keep the fractional part by using "decimal":"true" (or omitting the flag, since true is the default). That way the calc expression can still return values between 0 and elementheight, so the shine continues to track the bar down to 0 % health. See the Calculator placeholder docs for more on the decimal option.

[upper grove]

even with the change,

{"placeholder":"calc","values":{"decimal":"true","expression":"{"placeholder":"elementposy","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + .3 + (1 - {"placeholder":"current_player_health_percent"} / 100.0) * {"placeholder":"elementheight","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}}"}}

the shine still gets locked at 70% health

[bleak otter]

Looks like the shine is using its own bounds for the math, so once the offset hits the shine’s height the expression can’t move any lower. Anchor it to the health bar instead and use that element’s height when calculating the offset (subtracting the shine’s height so it stays inside the bar). For example:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposy","values":{"id":"health_bar_id"}} + (1 - {"placeholder":"current_player_health_percent"} / 100.0) * ({"placeholder":"elementheight","values":{"id":"health_bar_id"}} - {"placeholder":"elementheight","values":{"id":"shine_id"}})"
}}

That way you’re always working with the full height of the health bar, not the shine itself, so the glow can track all the way down. (You can read more about the calculator placeholder here: Calculator placeholder docs).

[upper grove]

it works, now please help me build this code in a way that the health shine shrinks to the center as health drops below 50%

{"placeholder":"calc","values":{"decimal":"false","expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * {"placeholder":"current_player_health_percent"} / 100.0"}}

[bleak otter]

Great! To make the glow only shrink once you drop below 50% and keep it centered, you need two things:

1. Width – clamp it to full width while health ≥ 50%, and scale it down from 50% to 0% otherwise.
2. X-position – shift it so the reduced width stays centered over the middle of the bar.

Here are the calculator placeholders you can use (just swap in your actual element IDs):

Width expression:

{
  "placeholder": "calc",
  "values": {
    "decimal": "true",
    "expression": "{ "placeholder": "current_player_health_percent" } >= 50 ? { "placeholder": "elementwidth", "values": { "id": "health_bar_id" } } : { "placeholder": "elementwidth", "values": { "id": "health_bar_id" } } * ( { "placeholder": "current_player_health_percent" } / 50.0 )"
  }
}

X-position expression (keeps the shrink centered):

{
  "placeholder": "calc",
  "values": {
    "decimal": "true",
    "expression": "{ "placeholder": "elementposx", "values": { "id": "health_bar_id" } } + ( { "placeholder": "elementwidth", "values": { "id": "health_bar_id" } } - ( { /* repeat the same width logic here */ } ) ) / 2"
  }
}

For the X expression, just paste the exact same inner width expression wherever you see (/* repeat ... */) so the math is consistent. The calculator placeholder documentation explains how these ternary expressions work if you want to tweak the behavior further: Calculator placeholder docs.

[upper grove]

what specifically do i paste into the (/* repeat ... */)?

[bleak otter]

Replace (/* repeat the same width logic here */) with the same expression you use for the width so both calculations stay in sync. For example:

Width (shrinks from 50% down):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"health_bar_id"}} : {"placeholder":"elementwidth","values":{"id":"health_bar_id"}} * ({"placeholder":"current_player_health_percent"} / 50.0)"
}}

X position (keeps it centered):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposx","values":{"id":"health_bar_id"}} + ({"placeholder":"elementwidth","values":{"id":"health_bar_id"}} - ( {"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"health_bar_id"}} : {"placeholder":"elementwidth","values":{"id":"health_bar_id"}} * ({"placeholder":"current_player_health_percent"} / 50.0) )) / 2"
}}

Just swap health_bar_id with your actual health-bar element ID. Both expressions use the calculator placeholder; see the Calculator docs if you want to tweak the math further.

[upper grove]

this code isnt shrinking the shine and just shifting it to the left, here are the IDs for the elements:

Health Bar ID: 6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717

Bar Shine ID: bc6ae5f4-35ca-4b87-bb81-61924bff1f2a-1773041716469

[bleak otter]

Here’s a working pair that actually shrinks the shine below 50 % and keeps it centered. Just replace both id fields with your actual element IDs.

Width (shrink only below 50 %)

{
  "placeholder": "calc",
  "values": {
    "decimal": "true",
    "expression": "{"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} : {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} / 50.0)"
  }
}

X position (center the shrinking shine)

{
  "placeholder": "calc",
  "values": {
    "decimal": "true",
    "expression": "{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - ({"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} : {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} / 50.0))) / 2"
  }
}

These use the calculator placeholder’s ternary logic to keep the shine full-size at ≥50 % and scale it down proportionally afterward while shifting it so the new width is centered. If you want to double-check the syntax or tweak it further, the Calculator placeholder docs explain how nesting and the decimal flag work.

[upper grove]

how do i use the calculator placeholder's ternary logic?

[bleak otter]

The calculator placeholder uses a simple ternary syntax like condition ? value_if_true : value_if_false.
You can nest placeholders inside that expression just like you already do. Here’s what that looks like in your case:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"HEALTH_BAR_ID"}} : {"placeholder":"elementwidth","values":{"id":"HEALTH_BAR_ID"}} * ({"placeholder":"current_player_health_percent"} / 50.0)"
}}

Replace HEALTH_BAR_ID with your actual health-bar element ID.

• The part before the ? is the condition (health ≥ 50).
• After ? comes the value if it’s true (full width).
• After : is the value if it’s false (scaled width).

You can reuse the same expression inside other calculations (e.g., for centering) to keep everything consistent. The docs explain this in detail: Calculator placeholder.

[upper grove]

the shine still wont shrink and its still shifted to the left

[bleak otter]

If the shine still isn’t shrinking, the issue is that the width expression isn’t actually ever dropping below the full bar width—because the condition always returns the full width before the ternary even gets to the scaled branch. Try replacing your width expression with this exact calculator placeholder (using your health bar ID):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"current_player_health_percent"} >= 50 ? {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} : {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} / 50.0)"
}}

That ensures the shine stays at full width until health drops below 50 % and then shrinks proportionally. For centering, reuse the entire scaled width expression inside the X-position calculator so the shrinkage is mirrored on both sides:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - (" + /* paste the width expression above exactly here */ + ")) / 2"
}}

If you paste the entire width expression (including the ternary) where indicated, the positioning math stays in sync with the shrink amount. You can read more about the calculator placeholder and ternary logic here: Calculator placeholder docs.

[upper grove]

it still wont shrink and shifts my shine to the left, try something else

[bleak otter]

If resizing the shine keeps just sliding left, it means the width formula never actually shrinks below 100 %—the expression always evaluates to the full bar width. Try replacing the width with this calculator expression so it stays at full size until 50 % and otherwise scales linearly down to zero:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
}}

Then use that same branching logic inside the X-position math so the shine stays centered while it shrinks:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0))) / 2"
}}

Those expressions use the calculator placeholder’s ternary operator (condition ? trueValue : falseValue). You can read more about how the calculator handles nested placeholders and ternary logic here: Calculator placeholder docs.

[upper grove]

still not working, try something else

[bleak otter]

If the calculator still won’t shrink the shine, let’s try a different approach: instead of directly driving the shine’s width, animate a mask or Image on top that gets scaled/positioned to match your desired effect. Spiffy’s elements can’t shrink below their texture’s minimum, so forcing the shine’s width via calculator might just be fighting the renderer.

Plan:

1. Keep the shine element at full width, but put it inside an Image element that acts as a clipping mask.
2. Animate the mask’s width with the same ternary math you already tried:

   {"placeholder":"calc","values":{
     "decimal":"true",
     "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
   }}
   

3. Anchor the mask to the health bar so it stays centered; you can reuse the X-position expression from earlier but apply it to the mask instead of the shine.

The shine stays mapped to the mask, and the mask actually resizes, so you get the shrinking effect without fighting the shine’s built-in width limit. If you’d rather keep it simple, you could also stack two images (the left & right halves) and fade one out instead of resizing.

For reference on using the calculator placeholder and ternary logic: Calculator placeholder docs.

[upper grove]

guide me step by step for this

[bleak otter]

Here’s a step-by-step way to get the shine to actually shrink below 50 % while staying centered:

1. Keep the shine element full width (as it already is) and add a transparent “mask” Image on top of it. Anchor that mask to the same health bar so it follows the bar’s position/size.
2. Drive the mask’s width with this calculator expression so it stays 100 % until health drops below 50 %, then scales proportionally to zero:

   {"placeholder":"calc","values":{
     "decimal":"true",
     "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
   }}
   

3. Re-center the mask by using the same scaled width inside the X-position expression so the shrink happens evenly on both sides:

   {"placeholder":"calc","values":{
     "decimal":"true",
     "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0))) / 2"
   }}
   

4. Clip the shine by placing it behind the mask (or make the mask the only visible part if you use a solid image). As health drops, the mask’s width shrinks, so the shine only shows inside the remaining area.
5. If needed, adjust the mask’s texture so it’s opaque where the shine should show and transparent elsewhere.

The calculator placeholder’s ternary logic (condition ? trueValue : falseValue) lets you run two different math paths depending on health; see the Calculator placeholder docs for reference.

[upper grove]

how do i make that mask image?

[bleak otter]

Create a simple mask image (mostly transparent) that sits on top of your shine and only reveals the area you want. Here’s how:

1. Make the mask image – Open any image editor (Photoshop, Krita, Paint.NET, etc.) and create a PNG the same size as your health bar. Fill the whole canvas with full transparency, then paint a solid rectangle (white or any color) where the shine should remain visible. Save it as e.g. shine_mask.png.

2. Drop it into Spiffy’s assets – Place the PNG inside config/fancymenu/assets/. Spiffy can only load local resources from that folder (see the Resources docs).

3. Add it as an Image element – In the HUD editor, add a new Image element, set its source to your shine_mask.png, anchor it to the health bar, and match the size/position. Right-click it and enable “Interactable: Disabled” so it doesn’t block clicks.

4. Drive its width/position with the calculator expressions from the previous step so the mask shrinks/centers below 50% health. The shine image should sit directly beneath this mask so only the visible portion shows through.

If you want the mask to disappear entirely when health hits zero, you can also add a loading requirement that checks if current_player_health_percent is greater than 0.

[upper grove]

cant figure this out, try a new method

[bleak otter]

Alright, let’s try a different mechanic that doesn’t touch masks or extra images.

Goal

You want the shine to visually shrink toward the center once health drops below 50%. Instead of editing width directly, we’ll do it by overlaying two shine layers and switching their opacity/position:

---

Step 1: Keep your original shine (full width)

• This stays untouched and always renders full-width under everything.

Step 2: Add a second shine overlay

• Create a new Image (call it Shine Clip), anchored to the same health bar.
• Point it to the same texture as the shine.
• Set it to blend mode = Multiply/Alpha (so it can act like a fading mask).
• Turn “Render Behind” on if needed to keep it layered correctly.

Step 3: Drive its opacity via calculator

Use this expression so the overlay fades in only when health drops under 50% (acting like a shrinking highlight around the center):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"current_player_health_percent"} >= 50 ? 0 : 1 - {"placeholder":"current_player_health_percent"} / 50.0"
}}

This makes the overlay gradually appear as health goes from 50% → 0%, leaving the original shine showing only in the middle.

Step 4: Offset the overlay’s position

Have the overlay match the shine’s center so the alpha buildup happens from both sides. Use this expression for its X position:

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} / 100.0)) / 2"
}}

This slides the overlay slightly toward the center as health drops, mimicking a shrinking effect.

---

If this still doesn’t give the visual you’re after, let me know exactly how you want the shine to behave (maybe it should stay full width but fade out edges instead of shrinking), and we can adjust the math again.

[upper grove]

where are the blending mode and render behind options?

[bleak otter]

You can find those options when you right-click the Image element and open its context menu:

1. Blend Mode – Right-click the element → Appearance → Blend Mode. Pick an option like Multiply or Alpha to make the overlay behave like a mask.
2. Render Behind – Right-click → Layering → Render Behind Custom Elements (or similar wording). This pushes that image below other elements so your shine stays on top.

If you can’t see those entries, the element might already be using a special layer (like vanilla), so try adding a brand-new Image element instead.

[upper grove]

still not seeing those options

[bleak otter]

If you don’t see those options it’s because they’re only available when the element is set to use custom textures and is in the foreground layer. Try this:

1. Right-click your Image → Texture → make sure you’re using a custom texture (not resource pack default).
2. Right-click again and choose Advanced Appearance (or simply “Appearance” depending on context).
3. Inside that menu you’ll find Blend Mode and Render Behind. If you still can’t find them, it might be because the element is currently treated as a Vanilla element (which doesn’t expose those settings). In that case, delete it and add a new custom Image element (make sure it’s not automatically converted to a vanilla copy), and the options should appear in its right-click menu.

If you’re still stuck, tell me what right-click menu entries you see—the exact names help me point you to the correct submenu.

[upper grove]

i added it as an image element with a custom image texture but those options still dont show

[bleak otter]

Those right-click options don’t exist in Spiffy’s HUD. Image elements in Spiffy are simpler than the full FancyMenu editor, so you can’t switch blend modes or explicitly “render behind” other content from the element menu.

To get the same stacking effect, control the order of your layouts or elements instead:

• Right-click the editor background and open Layout Index to rearrange which layout draws on top of which.
• You can also stack multiple layouts with different orderings if you need one shine layer above another.

See the “Menu Backgrounds” doc for how layout stacking/order works (it explains how backgrounds/elements stack and how to change their order via layout index). That’s the only way to change what appears behind/above something in Spiffy’s HUD.

[upper grove]

then how do i do the advanced appearance and blend mode in spiffy?

[bleak otter]

SpiffyHUD doesn’t expose FancyMenu’s “Advanced Appearance / Blend Mode” controls. The HUD editor is intentionally lightweight, so those options simply don’t exist there. Instead you have to rely on layout ordering to control what’s on top (right-click the editor background → Layout Index) or build multiple layouts/elements stacked in the right order.

If you need actual blend modes you’d have to do that in FancyMenu’s full menu editor (Spiffy doesn’t support it). For stacking advice, see the Menu Backgrounds/Layouts docs—layout index and layout stacking are the only ways to change draw order in Spiffy.

[upper grove]

okay, then give me a new solution to have the shine shrink as health drops below 50% health and stays centered

[bleak otter]

Let’s keep it simple: keep the shine full width, and use a second overlay image whose width is driven by the calculator placeholder so it only starts shrinking once health is below 50%. Feed the same expression into its X position so the shrinking area stays centered.

Width expression (shrink below 50%):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
}}

X position expression (keep it centered):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)) / 2"
}}

Apply these to the overlay/mask element that sits on top of the shine. The calc’s ternary (condition ? true : false) keeps the overlay full width until 50% then scales it down toward zero, and the position math recenters it so the shrinking happens equally on both sides. You can read more about that placeholder syntax here: Calculator placeholder docs.

[upper grove]

try a new solution without adding extra images and just fix the current shine

[bleak otter]

You can keep using that single shine element—no extra images—but force it to resize/shift based on the health bar’s dimensions instead of its own. Here’s how:

1. Enable advanced sizing for the shine
   Right-click the shine → Advanced Sizing → set the Width to this calculator expression (swap in your health bar ID):

   {"placeholder":"calc","values":{
     "decimal":"true",
     "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
   }}
   

   That keeps the shine at full width until health drops below 50 %, then scales it down proportionally to 0 % as health goes to 0.

2. Keep it centered
   Still in advanced sizing, set the X position to this so the reduced width stays centered:

   {"placeholder":"calc","values":{
     "decimal":"true",
     "expression":"{"placeholder":"elementposx","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} + ({"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} - {"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)) / 2"
   }}
   

3. Disable “Stay On Screen” if the layout tries to clamp it back to the original bounds. That option is also on the right-click menu.

This uses the calculator placeholder’s ternary (condition ? trueValue : falseValue) to branch the math depending on health, and the width is always based on the health bar’s size rather than the shine itself. If you need a refresher on nesting/ternaries, the placeholder docs explain it in detail: Calculator placeholder.

[upper grove]

code doesen't work, shine is centered but wont shrink

[bleak otter]

If the shine stays centered but never shrinks, it means the element’s width is still pegged to its original size. You need to set the advanced width with the calculator so Minecraft actually resizes it. Try this exact expression (replace HEALTH_BAR_ID with your health-bar ID):

{"placeholder":"calc","values":{
  "decimal":"true",
  "expression":"{"placeholder":"elementwidth","values":{"id":"6e9bfa9a-63f5-468f-afa3-d76f484d5233-1772710991717"}} * ({"placeholder":"current_player_health_percent"} >= 50 ? 1 : {"placeholder":"current_player_health_percent"} / 50.0)"
}}

Make sure you edit the Width inside Advanced Sizing (right-click -> Advanced Sizing) and paste that there. This keeps the shine at full width down to 50 % and then shrinks it proportionally to zero as health hits 0.

If you already have a centered X position expression, leave it; the width math alone should make the shine shrink. If it still doesn’t, check that the element isn’t locked (right-click -> Advanced Sizing -> make sure width isn’t controlled by another value) and that “Stay On Screen” isn’t forcing it back to full width.

[upper grove]

the shine image element has stay on screen disabled and its width is controlled by the expression but the shine still wont shrink