Sugarcube Resource-bar

As the title says, I am having trouble with managing to make a standardized type of resource-bar, along the lines of a health-bar or a stamina-bar. Now, I am well aware that there are a handful of topics similar to this one floating around on the forum, but none of them are fully comprehensive, or presume the reader has a relatively elaborate knowledge of Twine and its related systems already.

I learn best by observing a working example, and as such, that is exactly what I am requesting. A very thorough step-by-step guide on how to create something along the lines of a health-bar, preferrably one also explaining what the various parts of the code actually do.

For the sake of clarity, I am using SugarCube 2.28.2 at the moment.

Have you looked at the Twine Cookbook? Specifically the static healthbars and timed progress bar examples?

I’m guessing you have, and those aren’t comprehensive enough, so here’s a fuller explanation of the static healthbar example from the link above:

HTML 5 has <progress> and <meter> elements for showing progress bars. With SugarCube, you can put either one into your passages. Whichever one you use, you need to follow it with a closing tag (</progress> or </meter>).

Inside the angle-brackets of the opening tag, the progress bar needs you to tell it the max and the current value (its range always starts at zero). The meter also has a min attribute, so it can cover arbitrary ranges. So you have something like <progress max="100" value="73"></progress>.

In order to show a variable, SugarCube lets you put an @ symbol before the attribute name. This makes SugarCube treat the attribute as TwineScript instead of just a sequence of characters. So <progress max="100" @value="$health"></progress> would show a progress bar using the value of the $health variable.

Note that this is static: it will set the value when the passage is displayed, but won’t animate if you have some code that is changing the variable in real-time without going to another passage.

Is that adequate to your needs?

Have you taken a look at my “Health Bar” sample code for Twine/SugarCube? There’s a bunch of other sample code there as well (just click “Jump to Start” in the UI bar).

If that isn’t quite what you’re looking for, just let me know.

I’ve made you a little Twine project as a “working example”. I’ve tried to make it as straight-forward as possible and be as descriptive as possible in my comments.

Note: I haven’t looked at the links provided above, so I apologize if I’m unintentionally copying an already-existing-and-provided example. (137.5 KB)

I have a macro set for this too, here.