Changing the color of the progress bar itself?

Question

Hi! I'm just getting started using Sugarcube (2.28.2) and I have a beginner question. I've already done a bunch of google searches, etc, but haven't been able to find the answer yet! 

So, I've started my game and I've set up a Health Bar which is so far working correctly thanks to some code I found on here. But now I'm trying to style the game/make it look pretty and I can't for the life of me get the progress bar to change from that standard pale blue color to any other color at all. The closest I've managed to get is to make the background box around it change color, but yeah, no matter what I do, the progress bar itself stays that pale blue. It's driving me crazy!

Here's what I'm doing so far ... In my StoryCaption passage I have this:

Health:
<div id="health"><progress @value="$health" max="100"></progress></div>

And in my Story Stylesheet I have this:

#ui-bar {
	color: #ff00da;
  background-color: #000000;
}

#health {
    color: #ff00da;
  
}

Please tell me where I'm going wrong! (Obviously that crazy hot pink - #ff00da - is the color I'd like my health bar to be! Thank you in advance. :)

Answer 1

That's really not the purpose of the <progress> element.  The correct element for what you're attempting to do would be <meter>.  That said, both are notoriously difficult to style consistently across browsers (heavy use of pseudo-elements and vendor prefixes).  It's doable, but you'll have to work for it.

In this case, I'd really suggest using something like Chapel's Meter Macro Set.

Comments

Thanks for your quick reply! I tried out the <meter> in its basic form - just out of interest why is that the correct element? Just in terms of how it looks? Personally I prefer the thinner line aesthetic of the progress bar (but I also don't want to mess something up later on if it's going to cause me problems of some kind that I'm not aware of, or look confusing to people ...). 

I took a look at Chapel's Meter Macro Set but unfortunately, even with the demo it's all just a little too far advanced and over my head to fully comprehend; the health/max health thing for a start, plus all this stuff: 

<<link 'Drink a potion (restore some health).'>>
    <<set $health to Math.clamp($health + random(10, 20), 0, $maxHealth)>>
    <<updatemeter 'health' `$health / $maxHealth`>>
<</link>>

When before all I had to do at the end of a passage to update the health was to write <<set $health +=1>>  ... 

Is there any simpler solution? I just want my bar to be pink instead of blue! 

---

You can have that code automatically update the meter the same way as it does now by placing code like the following in a passage named "PassageDone". 

<<updatemeter "health" `Math.clamp($health / 100, 0, 1)`>>

You'd want to have your meter set up something like this in your StoryInit special passage: 

<<newmeter "health" 1>>
    <<colors "pink">>
<</newmeter>>

And in StoryCaption

<<showmeter "health">>

You can adjust the size of your meter too if you want it thinner or thicker. 

 

Explanation of why the code is more complicated. 

This was a design choice. To make meters consistent, every single one represents a value from 0 (empty) to 1 (full). You can get that value quickly by dividing the value you want from the meter's maximum value, eg $health / $maxHealth. In your case that maximum value is hard-coded to 100, so we use that instead. This also makes it easier to set meters, imo. Eg if you want the meter to be half full, you set it to one half (0.5). I'm open to ways to simplify it, but I think this in particular is a capital-G Good idea. 

The Math.clamp() part just keeps the value between two other values, in this case, 0 and 1. It's just a sanity check to make sure you don't pass in a bad value and create an error. 

---

Thanks for your quick reply! I tried out the <meter> in its basic form - just out of interest why is that the correct element?

Because what you're attempting to do is <meter>'s actual use case: gauges, meters, etc.  The <progress> element is for showing progression over time; e.g., a download.

 

Personally I prefer the thinner line aesthetic of the progress bar […]

You should chose elements based on fitness for purpose, not for looks.  Looks are what styling is for.

---

Ah, this is great, thank you! My health bar is looking a lot more fitting with the rest of my game!!

Answer 2

You might want to take a look at my health bar sample code.  That code shows you how to create a Health() function in Twine/SugarCube that you can call to update how the health bar looks, the code you'll need to add to your passage to use it, and how to modify it to be whatever color you'd like, including having the color vary depending on the amount of health.  (Click "Jump to Start" in the UI bar to see other sample code there.)

Hope that helps!  :-)

Comments

Thanks so much - tried Chapel's help above and luckily that solved the problem but thank you anyway! :)