How To Change Background Color In Twine 1.4.2 Sugarcube 2

Not a silly question at all! 💕

Kickoff off, Stats (the named variable and value stored within it) is a different thing from displaying stats.

A Quick Overview of Stats in SugarCube

Let's utilize your example. If Chaos and Control are two separate stats, you will need to set their variables individually. Let'southward say that Chaos is stored in a variable called $chaos and Command is set in a variable called $control.

<<set $chaos to 50>>

would gear up the value of $chaos to 50.

<<set $control to 10>>

would fix the value of $command to 10.

Whenever you type $chaos, the variable will be printed as 50. And whenever you type $command, the value volition exist printed as ten.

It's always a good thought to set any numerical variables in your StoryInit passage. This defines the variable when your game initializes. Variables that store numbers cannot be added to or subtracted from if they are non defined.

Additionally, yous will want to know what the minimum and maximum numbers are for each stat. How far does the range go? What do y'all want the lowest number to be and what do you desire the highest number to be? 0 – 100 is a helpful range, merely it doesn't have to be that.

Once you figure that out, you can clamp your numerical variables whenever there's a stat change.

For example:

Say you lot're working with a scale of 0 to 100. Both $chaos and $control are initialized at 50. Define them in your StoryInit passage using the set macro:

<<set $chaos to 50>>

<<set $command to 50>>

Whenever you add or decrease from the stat, yous can clamp information technology using Math.clench. Math.clamp prevents stats from going lower or higher than your desired range, which can prevent a lot of funky stat stuff happening afterwards in the game.

Let'due south say the Player takes an action that increases their $chaos stat by 10.

If the alter happens when a passage loads, you can utilize the expression:

<<set $anarchy to Math.clamp($chaos + ten, 0, 100)>>

If yous desire the change to happen when the player clicks a link (before the next passage loads), you lot can use the expression within SugarCube'south link markup:

[[1. Anarchy pick.|Next Passage Proper noun][$chaos to Math.clench($chaos + 10, 0, 100)]]

+10 adds 10 to the $chaos stat.
0 denotes the minimum value (0).
100 denotes the maximum value (100).

And so if the Thespian's $chaos stat was at 95 and they clicked this link, with Math.clamp, they would max out at 100 instead of going all the way to 105.

Displaying Stats

Now, on your stats page, you could list your stats:

Anarchy: $chaos
Command: $control

And phone call it a twenty-four hour period. Merely if you desire to have some kind of visual indication for your stats, you will need to practice some extra work.

Making a Progress Bar

There's a lot of ways yous can do this. Chapel's Meter Macros are a skilful place to starting time; @/townofcrosshollow has an caption of how to utilize the macro hither.

I personally don't use this macro and rely on the HTML progress element instead, so that's what I'll explicate here. This isn't necessarily the best way to do it (there are pros and cons), but it's what I'thou familiar with.

On your stats page, yous can transform your $stat variable into a progress bar like so:

@value="$stat" – this needs to exist the targeted variable
max="100" – this needs to be an integer. It doesn't take to exist 100, it can be any number. Whatsoever that number is, it should be where you plan that stat to max out.

Styling the Progress Bar

Styling the progress element can be a lilliputian catchy since the progress element looks different on every browser.

You tin can modify what it looks similar with a trivial CSS in your Story Stylesheet.

progress[value] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

width: 100%;

top: 15px;

}

This volition re-gear up the default advent so you can actually style it. You lot can suit the height and the width of your bar by changing the values of height and width.

progress[value]::-webkit-progress-bar {

background-color: #hexcode;

border-radius: 2px;

}

This styles the bar and its groundwork colour (anything that isn't the "fill" color of the progress bar). Change #hexcode to whatever color you want to apply. The border-radius isn't necessary, only you lot can use it to make the corners a little softer or more than rounded, depending on what yous set the px to.

progress[value]::-webkit-progress-value {

groundwork: #hexcode

border-radius: 2px;

}

This styles the colour of the fill department of the progress bar. If you want it to work in Firefox, you'll demand to add this extra bit here:

progress[value]::-moz-progress-bar {

border-radius: 2px;

color: #hexcode;

}

This will create a default styling for all progress elements. If you want to have different stylings per $stat (I accept separate stylings for power confined and approving/romance bars), then y'all can copy what you did before, change the colours, and wrap it in a div tag.

For example:

.relationship progress[value] {

-webkit-appearance: none;

-moz-appearance: none;

advent: none;

width: 100%;

superlative: 15px;

}

.relationship progress[value]::-webkit-progress-bar {

groundwork-color: #hexcode;

edge-radius: 2px;

}

.human relationship progress[value]::-webkit-progress-value {

background: #hexcode

border-radius: 2px;

}

Would get in your stylesheet. And then on your stats page, you lot would put:

Combining & Displaying Two Stats Together

If you want to do something where two stats share a brandish bar (every bit is common in ChoiceScript games), I would probably use Chapel'south meter macro. But if yous wanted to use the progress element instead, I would but set one variable for the two stats.

Going back to Chaos/Control–instead of having separate $anarchy and $control stats, I would ascertain one variable called $chaosControl, and ready it on a 0 to 100 range.

You could so style the progress element, using the fill colour to bespeak the stat on the left hand side and the groundwork colour to indicate the stat on the right manus side. Add some extra labels around the progress chemical element to indicate the 2 sides.

This is a little ugly, simply it would come out looking similar this: