0 votes
asked by (300 points)
edited by

I've implemented this health bar and was wondering if it was possible to make edits to this code to change a stat's title once it reaches a certain level? I attempted to use <<if>> macros but that didn't change anything. I know the div id is equivalent to the variable, so renaming them "health2" "health3" "health4" wouldn't work (and makes the bar disregard any changes) but I'm stumped. I'd like to make the colors to of the bar change, but that's beyond my expertise atm. 

:: StoryInit

<<set $health to 100>>

:: StoryMeters

<<if $health gte 75 lte 100>>
<div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div>
<<elseif $health gte 50 lt 75>>
<div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div>
<<elseif $health gte 25 lt 50>>
<div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div>
<<else>>
<<elseif $health gte 0 lt 25>>
<div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div>
<</if>>

 

3 Answers

0 votes
answered by (14.6k points)
selected by
 
Best answer

You have to use <<replace>> or a similar macro to update what is already one the screen. Wrap what you want to change into a div or span with a specific id:

<div id="test"><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div></div>

Then call your <<if>> statement whenever the health value changes like this:

<<if $health gte 75>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 50>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 25>>
<<replace "#test">><div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div><</replace>>
<<else>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div><</replace>>
<</if>>

To save yourself the hassle of having to retype this <<if>> over and over again create a widget. Create a new passage, Give it the tag (not just the name) "widget". Now you can use this passage to create new widgets:

<<widget health>><<nobr>>

<<set $health += $args[0]>>

<<if $health gte 75>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 50>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 25>>
<<replace "#test">><div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div><</replace>>
<<else>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div><</replace>>
<</if>>

<</nobr>><</widget>>

Any change of your health variable should now be done in the following manner:

<<health +10>> or <<health 10>>
<<health -17>>

The (live:) macro @Deadshot talks about is in Sugarcube 2 the <<timed>> macro. For this case you should not use it though (and it should generally only be used if absolutely nescessary since it - for a the time of its execution - prevents user input).

commented by (300 points)
Thanks a lot! That works perfectly, and I managed to figure out how to change the color of the bars, too.
0 votes
answered by (5k points)

im not sure what you mean but it sounds like you want what's displayed to change real time. the reason the if statement won't work is because the pasage has to be reloaded. theres two ways to do this:

use a goto macro to refresh the passage

use a live macro. I use harlowe and im not sure how this would would in sugarcube, but this is how id do it:

(live: 0.001s)[$variable]

Every 0.001 seconds, the variable will be printed to the screen, so if its value has changed, it will change

commented by (300 points)
Sorry about that. I mean that when $health dips below 50 I'd like the "health" label to turn to "ill" so it's printed over the stat bar in place of "healthy." It'll still be the health variable, I'd just like the particular label (the data-label) to change (and the color with it, if that's possible).
commented by (5k points)

In harlowe:

(live: 0.001s)[(if: $health > 50)[(text-color: 'green')[Healthy]](else:)[(text-color: 'red')[Ill]]]

I'm sure its not hard to translate into sugarcube

BTW: I added text colour stuff just for fun

0 votes
answered by (18k points)

If you're interested, I have some sample health bar code for SugarCube here as well.

commented by (300 points)
Oh, this is awesome! :D thanks!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...