0 votes
asked by (160 points)
edited by
Using twine 2 and sugarcube 2. I have hp as a variable. Now I want to display a simple picture I drew of a healthy looking person at $hp gte 75, with a slight injured person at 50-75, bleeding person at 25-50 etc. I am a total novice so a ELI5 style explanation would be great.

EDIT: I couldn't get the replace part of the widget in best answer to work even with debugging methods so I disbabled the replace part of the widget by putting  /* before the first if and */ at the last if.

Then I put this is StoryCaption. Which worked.

<<if $hp gte 90 and $hp lte 150>>
    <img src="img/self/str.jpg" width="100%">
<<elseif $hp gte 70 and $hp lte 89>>
    <img src="img/self/tough.jpg" width="100%">
<<elseif $hp gte 51 and $hp lte 69>>
    <img src="img/self/good.jpg" width="100%">
<<elseif $hp is 50>>
    <img src="img/self/average.jpg" width="100%">
<<elseif $hp gte 35 and $hp lte 49>>
    <img src="img/self/sore.jpg" width="100%">
<<elseif $hp gte 11 and $hp lte 34>>
    <img src="img/self/weak.jpg" width="100%">
<<elseif $hp gte -50 and $hp lte 10>>
    <img src="img/self/skeleton.jpg" width="100%">
<<else>>
    <img src="img/self/base.jpg" width="100%">
<</if>>

1 Answer

+1 vote
answered by (22.3k points)
selected by
 
Best answer

First you add your picture to the sidebar using the StoryCaption special passage, meaning a passage titled "StoryCaption":

<span id="health"><img src="yourimagehere" width="100%"></span>

Now, whenever the players life changes call this code:

<<if $hp gte 75>>
	<<replace "#health">><img src="yourimagehere" width="100%"><</replace>>
<<elseif $hp gte 50>>
	<<replace "#health">><img src="yourotherimage" width="100%"><</replace>>
<<elseif $hp gte 25>>
	<<replace "#health">><img src="yourthirdimage" width="100%"><</replace>>
<<else>>
	<<replace "#health">><img src="yourlastimage" width="100%"><</replace>>
<</if>>

To safe time and keep things more readable create a widget to do this for you. Make a passage, give it the tag "widget", then say something like:

<<widget hp>><<nobr>>

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

<<if $hp gte 75>>
	<<replace "#health">><img src="yourimagehere" width="100%"><</replace>>
<<elseif $hp gte 50>>
	<<replace "#health">><img src="yourotherimage" width="100%"><</replace>>
<<elseif $hp gte 25>>
	<<replace "#health">><img src="yourthirdimage" width="100%"><</replace>>
<<else>>
	<<replace "#health">><img src="yourlastimage" width="100%"><</replace>>
<</if>>


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

If you now want to lower hp by for example 10, you can just say:

<<hp -10>>

To add hp similarly:

<<hp 10>> or <<hp +10>>

 

commented by (160 points)
edited by
Wow. I wasn't expecting such a great response. Cheers
commented by (160 points)
Sorry to bother you again when I tried adding hp by typing <<hp +15>> I had the following error message.

Error: <<hp>>: error within widget contents (Error: <<replace>>: no elements matched the selector "#health")

The stat changes and the first image is there. However it doesn't change the picture with more/less hp.
commented by (22.3k points)

You need to wrap your picture into a <span> or <div> with the id in question like I did above:

<span id="health"><img src="yourimagehere" width="100%"></span>

 

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.
...