✅ | Circular health bar

[scarlet dome]

Im a beginner, and would like to know how I would go about making a circular health bar, or like a health bar that uses a progress bar, using its own art to surround the bar?

[mental basalt]

Making a circular health bar is totally doable! Use a Progress Bar element and feed it a placeholder that returns your current health percent (e.g. {"placeholder":"current_player_health_percent"}). Then:

1. Right-click the progress bar → Progress Value Score → paste the health percent placeholder.
2. Choose the fill direction (e.g., Circular if you’re using an FMA/APNG that supports it) or use a ring-style texture that masks part of the bar.
3. Set Background Texture to your custom art (the “frame” that surrounds the fill).
4. Set Bar Texture to whatever fills in when the health changes (you can use a second image that matches the circular frame).
5. Tweak Advanced Positioning/Sizing if needed so the fill lines up correctly.

For a completely circular look, make your art such that the progress bar’s bar texture is a wedge or radial gradient that exactly matches the circular frame. FancyMenu’s progress bars can animate and rotate textures, so you can simulate a circle even without rotating assets.

If you want the frame to stay static while the fill rotates, place the frame art as a separate Image element behind the progress bar and order it accordingly.

More on progress bars and placeholders here: FancyMenu Placeholder Docs and Progress Bar Overview.

[scarlet dome]

Well I'd like the background of the progress bar to be invisible or transparent, is there a way to do that?

[mental basalt]

Yep! You can make the progress bar’s background fully transparent so only the fill shows inside your circular frame:

1. Right-click the Progress Bar element → Background Texture and select a transparent PNG (just an empty image) or choose NO TEXTURE if that option exists. That makes the background invisible while keeping the bar fill visible.
2. Alternatively, set the Background Color’s alpha to 0 in the same menu so it becomes fully transparent.
3. If you still need your frame art visible, place it as a separate Image element behind the progress bar and use the Layers widget (menu bar → Window → Widgets → Layers) to sort the image beneath the fill.

You can find the progress bar options (including textures, fill direction, and opacity) described in the Elements guide: FancyMenu Elements – Progress Bar.

[scarlet dome]

How would I mask a progress bar?

[mental basalt]

You can’t really “mask” a progress bar the way you would in an image editor, but you can fake it:

1. Make the frame image (circular ring) as a separate Image element behind the progress bar.
2. Match the progress bar size to the inner ring so the fill only shows through the circular gap.
3. Use a transparent background texture (or no texture) for the bar so only the fill is visible (you already asked about that).
4. For a circular fill, use a wedge/radial texture for the bar itself and set the progress direction to circular if you’re using an FMA/APNG that supports it.

If the bar texture is shaped like a circle segment, the visible part will already look “masked” by the frame. Combine it with precise positioning and the frame image to get the effect you want.

Need more help refining the textures or placeholder setup?

[scarlet dome]

Uhm how would I go about making the progress bar fill a certain shape? Theres no option for that.

[mental basalt]

Progress bars can’t natively fill arbitrary shapes, but you can simulate it by matching the fill art to the shape you want and hiding everything else:

1. Make the bar texture itself look like the shape you want filled (e.g., a wedge or circle segment). The progress bar will reveal that texture proportionally.
2. Use the “Fill Direction” setting to pick the best direction (horizontal/vertical/circular) for that shape. Circular is best when the texture is a radial wedge.
3. Put any static frame or mask art as a separate Image element behind the bar so it looks like the fill is constrained to that shape.
4. Set the progress bar’s background to transparent so only the “fill” art is visible.

If you really need a complex mask, you can simulate it by stacking multiple progress bar elements with carefully crafted textures and loading requirements. There isn’t a built‑in masking option, so it’s all about matching the textures to the shape you want.

See the progress bar element docs for details on textures and fill directions: FancyMenu Elements – Progress Bar.

[scarlet dome]

Well there is no circular option, but that's not exactly what Im asking. Say the shape is for example something complex like a heart, if the progress bar would fill the heart, how would the bar that simulates health, go behind the outline of the shape?

[mental basalt]

For a complex shape like a heart, you “fake” the masking by stacking two pieces:

1. Frame Outline (Image element): Put your heart outline (the static art) as a separate Image element. Anchor it where the heart should be.
2. Progress Bar Fill: Place the progress bar behind the outline, sized so the fill sits inside the heart. Use a transparent background and a bar texture that matches the heart’s inner area (or just a solid color). The progress bar will fill according to the percent placeholder you set.
3. Use layers: Make sure the outline image is rendered on top. Open the Layers widget (menu bar → Window → Widgets → Layers) and drag the outline above the progress bar so the heart frame covers the fill edges.

Because FancyMenu doesn’t let you fully mask arbitrary shapes, the trick is to design the fill texture so it already “fits” the heart, then hide everything outside by overlaying the outline image. You can even split the fill into pieces (multiple progress bars) if the shape has parts that fill independently. More about progress bars is in the docs: FancyMenu Elements – Progress Bar.

[scarlet dome]

Okay so I have the shape done, but the progress bar isn't filling up the whole shape for some reason? any idea why?

[mental basalt]

If the fill is stopping short of your heart shape, it’s usually because the Progress Bar element’s actual size/shape is still a rectangle and the fill only covers that area. Here’s what to do:

1. Match the element size to your heart’s interior. Resize the progress bar so it covers the full area where the heart fill should appear. Use Advanced Sizing/Positioning if needed so the bar sits exactly inside the outline.
2. Use a heart-shaped bar texture. Set the Bar Texture to an image that already looks like the full heart interior (a fully filled heart). The progress bar will then reveal that texture proportionally—if the texture covers the whole heart, the fill will too.
3. Pick the right fill direction. Make sure the “Fill Direction” matches how you want the heart to fill (left-to-right, up-to-down, circular, etc.). That determines how much of the texture is shown as the value goes up.
4. Transparent background plus outline image. Keep the progress bar background invisible and put your outline frame as a separate Image element on top, so the heart looks complete even though the progress element is technically rectangular.

If you still see gaps, double-check that the placeholder you use (like current_player_health_percent) returns a 0–100 value so the bar actually reaches 100% when you’re at full health. More details on progress bars are in the FancyMenu docs: Progress Bar Element Overview.

[scarlet dome]

No I sized it correctly, but howcome the bar texture isn't like filled up to the actual texture, its only displaying part of it in game.

[mental basalt]

If the bar texture only shows a slice of your heart (instead of the whole image filling up), it’s because the progress bar is revealing the texture over a rectangle and only the portion that matches the current value is visible.

How to fix it

1. Use a heart texture where the “full” version is exactly how the heart should look when the value is 100%.
2. In the progress bar settings, set Fill Direction so it “unveils” the heart from the correct edge/direction (e.g., left-to-right if your heart fills that way).
3. Keep the background transparent and the bar texture aligned to the full heart. The progress bar will show more of that texture as the value increases.
4. If the heart still looks cut off, try a larger texture and ensure the element’s width/height match it; the bar will crop to the element bounds, so make sure the element isn’t smaller than your art.

If you need the heart to fill in multiple directions or to 100% reveal the texture, you can also stack multiple progress bars (each covering a part of the heart) with their own fill directions.

More on progress bar textures/fill behavior here: FancyMenu Elements – Progress Bar.

[scarlet dome]

Once again not the issue. Here can you look at images?

[mental basalt]

Sure! Please attach the screenshots so I can see what’s happening (progress bar settings, textures, and how it looks in-game). Also let me know:

• Which placeholder you’re using for the value.
• How you’ve set the fill direction/texture.
• Whether the progress bar element’s size matches the source image.

Those details help me figure out why the texture only shows partially. Once I have the images, I can point you toward the exact tweak you need!

You can also re-check the progress bar docs while you wait: FancyMenu Elements – Progress Bar.

[scarlet dome]

You can see here the background is the darker red, and the actual bar is the brighter red. Problem is Im at max hp and it looks like Im at like very little hp.

[mental basalt]

Thanks for the screenshot — that makes it clear. The bright red part is the progress fill, and it’s only sparingly filling because the value you feed the progress bar is between 0 and 20 (your raw health), while FancyMenu expects 0–100 for a full bar. At max health you’re still only giving it 20, so it only fills ~20% of the widget.

To fix it:

• In the progress bar’s Progress Value Score field, use the health percent placeholder instead of the raw health value:

  {"placeholder":"current_player_health_percent"}
  

  That already returns 0‑100, so the bar will fill the whole heart at full health.
• If you need to rely on plain health, convert it to percent first, e.g. with the calculator placeholder:

  {"placeholder":"calc","values":{"decimal":"false","expression":"({"placeholder":"current_player_health"} / {"placeholder":"max_player_health"}) * 100"}}
  

FancyMenu’s progress bar docs cover these placeholders and the value range in more detail: FancyMenu Elements – Progress Bar and the placeholder list shows current_player_health_percent. That should give you a full heart fill when at max HP.

[scarlet dome]

Now this is just an out of place question, but is there anyway to make the progress bar animate the progress? I wanted a bar that had like a liquid in it that would represent your health, and the top would flow.

[mental basalt]

You can fake that “liquid” animation by playing with a looping texture and the bar’s fill direction:

1. Make the bar texture an animated FMA/APNG that shows the liquid swaying. Put that as the Bar Texture of the progress bar.
2. Enable the progress bar’s Fill Animation/ Fading options so the amount changes smoothly when the value updates.
3. If you want the top to keep “flowing” even when the health doesn’t change, loop the texture (APNG/FMA) and set the element’s Animation to looping so the liquid always moves.
4. Combine that with a transparent background and your outline image on top, just like before.

FancyMenu doesn’t have per-value animation, but animated textures + the bar’s smooth filling get that liquid effect. More on configuring the bar (textures, fill direction, animation) is in the docs: FancyMenu Elements – Progress Bar.

[scarlet dome]

Well how would I animate it if the texture needs to be the shape of the bar outline?

[mental basalt]

Thread Message Limit Reached

This support thread has reached the maximum limit of 20 messages. To continue getting support, please start a new thread by asking your question in the #spiffy-help channel.

Creating a new thread will help keep conversations organized and ensure you get the best support possible.

[mental basalt]

Thread Marked as Solved

This support thread has been automatically marked as solved because there were no new messages for at least 24 hours.

If you still need help, feel free to continue the conversation or create a new support thread.

Marked automatically after 24h of inactivity