Is text in health bar possible?

Twine Version: 2.6.1
SugarCube: 2.36.1

So, I’m wondering if I can add text that’s linked to the health bar. To show how much health the player currently has instead of just a bar. Like a 100/100. With the left number being the players current health.

I have this in JavaScript"

Macro.add('statusbar', {
	skipArgs : false,
	handler  : function () {
		if (this.args.length < 4) {
			return this.error('not enough parameters specified');

		var identifier  = this.args[0],
			maximum     = State.getVar(this.args[1]),
			current     = State.getVar(this.args[2]),
			change      = State.getVar(this.args[3]),
			barWidth    = (current / maximum) * 100,
			changeWidth = 0,
			delayReset  = false;

		const $parent = jQuery(document.createElement('div'));
				'id': identifier,
				'data-maximum': maximum,
				'data-current': current

		const $bar = jQuery(document.createElement('div'));
			.css('width', barWidth + "%")

		const $change = jQuery(document.createElement('div'));
			.css('width', changeWidth + "%")


		if (change != 0) {
			changeWidth = (change / current) * 100;
			current     -= change;
			barWidth    = (current / maximum) * 100;

			State.setVar(this.args[2], current);
			State.setVar(this.args[3], 0);
			delayReset = true;

		if (delayReset) {
				$change.css({'width': '0'});
				$bar.css('width', barWidth + "%");
			}, 500);

This in Style Sheet:

.status-bar {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	height: 20px;
	padding: 5px;
	background: #ddd;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
.status-bar .bar {
	background: #c54;
	width: 100%;
	height: 10px;
	position: relative;
	transition: width .5s linear;
.status-bar .change {
	background: rgba(255,255,255,0.6);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0px;
	transition: width .5s linear;

#health-bar .bar {
	background: green;

#mana-bar .bar {
	background: blue;

With this in StoryInit:

<<set $level to 0>>
<<set $exp to 0>>
<<set $hpdamage to 0>>
<<set $mpuse to 0>>
<<set $Brawn to 5>>
<<set $Agi to 5>>
<<set $End to 5>>
<<set $Mind to 5>>
<<set $SP to ($MSP - $USP)>>
<<set $MSP to ($level*3)>>
<<set $USP to 0>>

<<set $maxExp to (Math.pow($level,3))>>
<<set $MHP to (($Brawn*$End)/2)>>
<<set $MMP to (($Brawn*$Mind)/2)>>
<<set $PD to (($Brawn+$End+$Agi)/2)>>
<<set $MD to (($Mind+$End+$Agi)/2)>>
<<set $CHP to $MHP>>
<<set $CMP to $MMP>>

And this in Story Caption:

HP: <<-$cHP>> / <<-$MHP>>
		<<statusbar "health-bar" "$MHP" "$CHP" "$hpdamage">>
MP: <<-$cMP>> / <<-$MMP>>
		<<statusbar "mana-bar" "$MMP" "$CMP" "$mpuse">>
1 Like

It sounds like Chapel’s meter macro might do what you’re looking for.


Ohhh yes! That’s perfect! But, how do I implement it? I found the macro set zip file I need to download. But, how do I instal it into Twine?

Edit: Nevermind. I got it. Thought it was more complicated then it actually was.