How To Change The Color And Font For A Single Line In Twine

Colouring text in Twine is incredibly elementary, but also incredibly useful. If you're dealing with of import data – whether that's a particularly meaning word or phrase, or a stat the player must recognise at a glance – then it helps to format it in some manner that immediately sets it autonomously from the rest of the text on screen.

If you're unfamiliar with Twine, you might similar to familiarise yourself with it using this tutorial which will go you started in merely four clicks – and mayhap take a glance at some of the others in the serial – but many of the following techniques will be very straightforward. If all you want to do is alter the colour of specific bits of text in Twine, this tutorial volition assist you practise just that.

In fact, this tutorial is and then simple that you tin can probably just glance through the example story, Snazzy Susan and the Majestic Markup, which will contain most of the following information (as well as a few examples of how to mode text in other ways). This post volition only go into marginally more detail, just will also link to some handy external resources then exercise pop back if you get stuck.

How to change text color:

The easiest way to change the colour of your text is with the (text-colour:) macro. Essentially, you write something similar this:

(text-colour: "scarlet")[Some text you want to appear red.]

and it produces this:

Some text you desire to announced blood-red.

Here'due south how information technology'll await in the editor:

(text-colour:"blueish")[blue]

(text-colour:"dark-green")[green]

(text-colour:"purple")[imperial]

(text-colour:"transparent")[transparent] <-(This 1 says "transparent")

(text-colour: "cyan")[cyan]

(text-colour: "blanchedalmond")[blanchedalmond]

(text-colour: "darkolivegreen")[darkolivegreen]

(text-color: "lightgoldenrodyellow")[lightgoldenrodyellow]

She institute a token reason to consider that all these were achieved by writing:
`(text-colour: "Any Color YOU LIKE")[WHATEVER TEXT You Want TO APPEAR IN THAT Color]`

At this point, she figured she could either look into [[how to add cool effects]] or peradventure [[more than avant-garde use of colour]].

" data-image-caption="" data-medium-file="https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=300" data-large-file="https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=540" class="aligncenter wp-image-2715 size-full" src="https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=540" alt="" srcset="https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=540 540w, https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=150 150w, https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png?w=300 300w, https://damonwakes.files.wordpress.com/2019/01/how-to-change-text-colour.png 698w" sizes="(max-width: 540px) 100vw, 540px">

And hither's how information technology'll look when run:

Note that (text-colour: "transparent")[anything yous write] will essentially turn anything you write invisible. This is plain unhelpful for drawing attending to information technology, merely tin exist useful nether other circumstances.

There are a lot of options when it comes to colours you can just write in like this. 140, in fact: here'due south a list of all of them. This is probably enough for anyone, but if you lot want to include one that isn't in there (or sufficiently similar to one that is), at that place are several ways to manually pick whatever color that you lot like. Those volition be covered below.

Advanced text color:

Earlier on I mentioned that if you wanted to produce a colour not on this list, at that place would be ways of doing that. Here's the simplest:

(text-colour: (rgb: 255, 0, 0))[Some text y'all want to appear red.]

rgb stands for red, green, blue, with the numbers 255, 0, 0 dictating how much of each the reckoner should add to the mix.0 is the minimum and 255 is the maximum and so (text-colour: (rgb: 255, 0, 0)) does exactly the same matter as (text-colour: "blood-red" ). It means: "as much red equally possible, no greenish, no bluish." For comparison, (rgb: 0, 0, 0) would be black (no colour), while (rgb: 255, 255, 255) would be white (all 3 colours lit upwardly every bit brilliant as possible on screen). By specifying numbers in this style, yous tin create whatsoever color you like. This site lets y'all come across what dissimilar combinations look like before you type them into Twine.

However, the 140 named colours really should be enough for anyone when information technology comes to formatting in-game text. The real reason yous might want to step beyond those 140 named colours and use thergb method is that the numbers can be provided by variables.

This example uses a (live:) macro (which are covered in a unlike tutorial), but the basic idea is very simple: $randomRed, $randomGreen and $randomBlue are all variables representing a number from 0 to 255.

I've fabricated those numbers random (and prepare them to refresh one time per second) to brand the effect articulate in the example, just yous could just as easily use variables that are already significant to your game. Perhaps your protagonist is a reptile who can perform good or evil actions over the grade of the game. Yous might set their proper noun to appear in a colour that reflects that:

(text-colour: (rgb: $karma, $karma, $karma))[Chameleon]

If you lot set $karma to somewhere between 0 and 255 at the offset of the game (perhaps about 150), the character's proper noun will initially appear gray. From that bespeak on, yous can use $karma to keep track of the graphic symbol's moral choices (for example, having other characters respect them if information technology'southward risen above 200 or fear them if it's dropped below 100), and the name itself will announced lighter or darker to reflect their calorie-free side/dark side condition.

If yous're wondering, "Do I really take to blazon out(text-color: (rgb: $karma, $karma, $karma))[Chameleon] every time I want to write my grapheme's name?" so this other tutorial volition give you some tips on how to keep this sort of thing tucked away and recycle it when necessary.

More advanced text colour:

The problem with the (rgb:) method is that you have to specify 3 different values to generate one colour. Not only does something like (rgb: $karma, $karma, $karma) look awkward in the editor, it'southward likewise quite difficult to ensure that every combination of values (if you're using multiple unlike variables) will mix together to make a decent colour. In this specific example, since we're merely using one variable, a more elegant solution might be to add an alpha value to specify opacity:

(text-colour: (rgba: 255, 255, 255, $karma))[Chameleon]

This alpha value can exist anywhere between 0 (completely transparent) and 1 (100% opaque). If you're using Twine'southward standard blackness background, setting the text colour to white (which is what (rgb: 255, 255, 255) gets you) then irresolute the opacity will requite the appearance of multiple shades of grey. To brand this piece of work in-game, nosotros'll demand to have $karma start around 0.75 and then but change by tiny amounts over the course of the game. Perhaps anything over 0.nine is saintly and anything under 0.6 is pure evil. Alternatively, $karma could exist anything betwixt 0 and 100 (starting at around75) and we could simply set the alpha value as ($karma / 100). It works exactly the same either way – it only depends which you find easier to work with.

Only this still doesn't accost the problem of reliably changing colours using a single variable. For that, nosotros'll need a different method of doing things altogether. Here's yet another way of producing red text.

(text-colour: (hsl: 0, 1, 0.5))[Some text yous want to announced red.]

hsl stands for hue, saturation, lightness. It's non quite as intuitive as rgb, simply the central thing is that hue allows you lot to cull a color by specifying degrees around a colour wheel. Here'southward how that works:

Basically, 0 (degrees) gets us red, correct up at the acme. 90 would requite the states a greenish-xanthous, 180 would give us cyan, 270 would give the states a sort of bluey-regal, and 360 would finish our lap of the color wheel and take u.s.a. back to cherry. You can actually apply any number you like for hue –450 (one lap and a quarter) gives you lot exactly the aforementioned shade of orangey-yellow as90 – which is how this next example works.

This produces a similar consequence to the DANCE Political party!!! 1 higher up, but instead of flashing random colours it moves around the colour wheel ten degrees at a fourth dimension.

This makes for a prissy visual effect, but also opens up some options when it comes to displaying in-game information using colour. Perhaps the protagonist is operating a nuclear reactor and we want to show how information technology's doing at a glance:

(text-colour: (hsl: $rubber, 1, 0.5))[REACTOR STATUS]

This lets us set the hue of REACTOR Status based on a variable: $prophylactic. If we start $condom at an initial value of 120 (green), nosotros can both use it to track events in the game (with $safety getting lower if the reactor is damaged) and to display the text in a corresponding color. If $safe drops to threescore or so, REACTOR STATUS will appear in yellow, while if it gets really depression – approaching 0 – information technology'll be red.

The other values – saturation and lightness – affect other properties of the colour you've chosen, and tin can be anywhere between0 and1, just like the alpha value mentioned above. For the near part you'll want to go along these prepare at 1 and 0.5 respectively. This is because no matter what hue yous set, 0 saturation will make it grey, 0 lightness volition make information technology black, and ane lightness volition make it white. This page will allow yous play around with those values and run into what y'all get, just do bear in mind that it gives y'all percentages, while you'll take to give Twine values betwixt 0 and 0.i.

Speaking of blastoff, by the way, (hsla:) gives you lot that option in merely the same way as (rgba:). There aren't all that many occasions you lot'd be probable to apply information technology, but yous tin if you desire to.

Summary:

This has been a long tutorial, merely really it'south all just unlike means of doing the same thing: colouring text in Twine. The really key points to recall are:

(text-colour: (some sort of colour)) will permit y'all to colour your text.
(some sort of colour) can be a colour name, (rgb:) values, or (hsl:) values.
Whatever of those values (including the color proper name) can be provided by a $variable, which y'all tin use to change it over the grade of the game as appropriate.

That's all at that place is to it! If you want to open up Snazzy Susan and the Majestic Markup for yourself, you tin can import it into Twine past post-obit this tutorial.

If you take any questions, feel gratis to ask them below! You tin can annotate here without an account or fifty-fifty an email address (though obviously if you choose not to supply an e-mail address, yous can't be notified of replies). Whatever your problem, I'll do my all-time to assistance.

If yous've plant this tutorial useful, y'all might like a expect at the others in my Twine for Beginners series.