Skip to content

"Static Healthbars": SugarCube (v2.18)#

Summary#

"Static Healthbars" demonstrates how to write HTML elements using variable values. In this example, Attribute Directive markup is used to inject the current value of the $heath story variable into the <progress> and <meter> elements.

Example#

Download

Twee Code#

:: StoryTitle
Static Healthbars for SugarCube

:: Start
<<set $health to 80>>

Show a healthbar using a Progress element:
<progress @value="$health" max="100"></progress>

Show a healthbar using a Meter element:
<meter @value="$health" min="0" max="100"></meter>

Twee Download