#twine tips

So, Twine has two types of variables, a temporary variable and a story variable. Temporary variables are declared with an _, and can only be used within one single passage to store information, so if you attempt to use a temporary variable in another passage, Twine will no longer remember the information you put in it.

So you'll mostly be using the story variables in Twine, which are declared using the $, as Twine carries the information in those throughout the entire story. And for characteristics for MC, you'll obviously want to use those as well.

There are several ways of setting variables in Twine using various Macros, so I'll try to cover some of the most regular ones. You can use any of these ways to set variables for anything.

Name:

So for setting names, most games have a list of suggestions, as well as the option to type in your own name, like this:

For suggestions, you only need to have a regular link that sets a variable, which can be done either by using the [[]] link syntax or the <<link>><</link>> macro, like I have done here:

So for the first four names above, I've used the [[]] syntax to set the $firstname variable:

In the first part of the syntax, I write what I want to display in my link, which in the first example is the name Emma, then after the | I have the name of the passage that I want the link to take the player to next, which most logically would be the passage to set the last name (just an example, of course). Then I tell the syntax which variable to set whenever the player clicks on Emma, which is $firstname, as well as what information to store in that variable, which is Emma. So we're basically telling Twine to set $firstname to "Emma", so that whenever we write $firstname in our story, it will show up as Emma after this.

-

For the next four names, I've done the exact same as above, just by using the <<link>><</link>> syntax. These two are legitimately the same, but sometimes it's better to use one over the other for coding purposes.

in <<link>> between the first two "" I've again put the name I want the link to display for the user, then in the next "" I've put the next passage, but this time we have to use the <<set>> macro between the <<link>> and the <</link>> to set the variable. So we're doing exactly the same thing as above, telling Twine to set $firstname to "Tobias" if the user clicks Tobias.

Sidenote: Whether you use the = sign to set variables or the word to, doesn't matter. It's all preference, they do the exact same thing. Also the * that I have in front of the links is simply to make the name suggestions an unordered list with list items, for styling purposes.

-

Now for the player to type in their own name, you will use the <<textbox>> macro and do basically the same as above:

Inside the first "" we'll tell Twine which variable we want to set, which is $firstname, then in the next "" we tell Twine what value the textbox should hold by default. You can use this to tell the player what the textbox is for, ie. "Type your own name here", or you can put a name suggestion in there if you want. Then in the last "" we're telling Twine which passage to take the player to next, as soon as the enter button is hit. You don't have to include this if you'd rather the user had to navigate to the passage some other way, like a button.

When the player goes to the next passage, Twine will fetch the value inside the textbox and save it inside the $firstname variable.

Other ways to set variables

Generally, you can the [[]] syntax or the <<link>><</link>> macro to set any variables, whether it be name, gender, pronouns or appearance, like I have used it here to set the $gender variable:

I basically just use one of those for setting most variable, and I think most games do too, but I'll still cover some other ways of setting variables to show you how they work..

Radiobutton / <<radiobutton>>

Let's say we want to use Radio Buttons to set $gender like we did above. This will will look like this in Twine:

This result is achieved by this code:

Again, in between the first "" we're telling Twine which variable to set, which is $gender, then which information we want that variable to store, depending on which radio button is selected, then you have the option to tell Twine if you want a button to be autocheck-ed, which means that Twine will automatically check which value $gender currently holds and check that option, but in our case $gender has no value, so none is checked. The other option is to set one radio button to checked by default.

So, if the player checks of the Woman option, whenever they click through to the next passage, the $gender variable will set to "Woman".

Listbox / <<listbox>>

Let's say we're setting $haircolour by using Listbox. How it will look in game + code:

Inside of <<listbox>>'s first "" we're telling Twine which variable to set, in this case it's $hairColour.

Then we have a selection of <<options>> where the first "" will be the text that is displayed to the player, and the second "" is the value that the variable will actually hold. So in the first example, the player will see Blonde hair in the selection menu, and when selected, $hairColour will be set to "blonde".

Cycle link / <<cycle>>

This one is quite popular to use in Twine, it's the link that will function like this:

And is achieved by this code:

We use the <<cycle>> macro, and inside <<cycle>>'s "" we'll tell Twine which variable we want to set, in this case it will be $eyeColour, then between <<cycle>> and <</cycle>> we will once again use the <<option>> macro to set the selection of options the player can chose from, like we did above with the <<listbox>>

Protip:

If you wanted to set more than one variable with one single link, there's a simple way to do so. Let's use pronouns as an example, since you specifically asked for that. How it looks in game + code:

So above, we're doing the exact same thing as we did in the first example at the top of this post using the [[]] link or the <<link>><</link>> to set variables with a link, except we're setting several variables at the same time simply by separating them with a ;

So in the first example, if She/Her is clicked, we're setting $they to "she", $them to "her", $their to "her", etc. — all within the same link.

-

I think that covers the most basic and most popular ways of setting variables in Twine. I've linked all the macros as well, if you want to read more about them.

This is all done in CSS actually.

I have four <div> elements in play here:

The <div class=“stat-bar-container”> is exactly that, the container that contains everything. <div class=“stat-bar-overlay-left”> contains the text for the left stat, and <div class=“stat-bar-overlay-left”> contains the text for the right stat, and last but not least <div class=“stat-bar”> will be the actual bar for the left stat.

So let’s start styling stat-bar-container. This is how I’ve styled it and I’ll explain why:

position: relative; is the most important part, because we’re going to use position: absolute; on all the child elements, and position: relative makes sure that the child elements stay within the container.

background-color: $pink determines the colour of the “bar” to the right, which is the lighter pink one/sarcastic stat bar in this case. 

This one is technically not a bar at all, it spans the entire width of the container at all times, but so long as the left stat bar moves, it will look like the right one has changed as well because it’s underneath it 

(also don’t mind the fact that I’ve used a variable here, it’s because I use Sass, just use regular hex codes or whatever you use to set colours):

The rest of the styles are just general styling for appearance that you can set to whatever you want. For example: I’ve used width: 100% because I want the stat-bar to take up the entire width of its parent element, and margin: 10px 0 because I want to make sure there’s always some space above and beneath each stat bar so they don’t blend together.

-

Now, stat-bar-overlay-left is the sincere 50% text, and stat-bar-overlay-right is for the sarcastic 50% text, and here’s my styling for the former:

Usually elements will position themselves in the order they’re written in the html file, like building blocks, but we’re gonna use position: absolute to make the text position itself over the stat bar instead of below, so it’s laying on top of it. 

Now that stat-bar-overlay-left is just floating freely within its container, we can adjust the position of the text using left: 7px. This just means that the text will be positioned 7px from the left of the stat bar. 

We then use z-index: 3; just to make sure that the stat-bar-overlay-left is always above stat-bar and stat-bar-container. The default z-index for other elements is 0.  

Now for stat-bar-overlay-right, we’re doing the exact same thing as above, except this time we’re using right: 7px instead to make sure this one is positioned 7px from the right of stat-bar-container: 

-

Now, last, but not least, we’ll style stat-bar which is the actual stat bar for the sincere 50% stat:

Here’s my styling:

Again, we’ll use position: absolute to make this one position itself over the stat-bar-container instead of positioning itself below it. We’ll set top: 0 and left: 0 to make sure it’s positioned all the way at the top left of the stat-bar-container, then setting height: 100% to make sure it takes up the whole height of the stat-bar-container. 

We’ll set width: 50% because these oppositional stats are usually set to 50/50 and we’ll set a max-width: 100% to make sure this bar never exceeds the width of the stat-bar-container. Then we’re setting a different background-color for this one to set it apart from the other stat, and the rest is just styling!

And that’s it! I hope that was understandable, let me know if you have any questions or if this was greek ✨🤎

You can find everything related Settings in Twine here, but I'll try to explain as much as I can

SO first you'll have to navigate into the Story JavaScript:

This is the code we'll use (I'll try to explain line by line what the code does):

Line 1. - We're creating a variable that's going to hold the names of the different themes how we want them displayed in Settings. Mine are Light Theme, Dark Theme and Black Theme (or Nyx' Theme)

Line 3. - We're creating a variable to set the theme when the user selects an option. This variable will hold a function to do the work for us.

Line 4. - We're creating a variable that selects the <html> tag in your html file, which is the element that will hold the different classes to style the theme

This is the normal <html> tag:

This is how the <html> tag will look when the "dark" theme is selected:

Line 5 and 6. - We're making sure that whenever the "default" theme is set, which in this case is the Light Theme, the "dark" theme class and the "black" theme class is removed from the <html> tag

Line 8. - We're using the JavaScript switch statement to switch between themes, you don't really need to understand how this works, just copy it, but make sure that each case is called the corresponding name as the name in line 1

Line 10 - We're telling the <html> tag to add a class called "dark" if the Dark Theme is selected

Line 14 - We're telling the <html> tag to add a class called "black" if the Black Theme is selected

Line 19 - We're using Twine's Setting.addList() method to make these settings appear in the Settings dialog box, 

Line 20 - We're typing in what we want the label to be for this particular setting

Line 21 - We're telling Twine what list of theme names to display in the dropdown in Settings, which is the list we stored in the variable settingThemeNames on line 1

Line 22 and 23 - We're telling Twine what function to run when something is changed, which is the function we stored in the variable setTheme on line 3

-

Now all you have to do is change the CSS for the respective themes by using html.dark for the "dark theme" for every element you want to change in the Dark Theme, and html.black for every element you want to change in the Black Theme:

In the above example I've changed the font colour of every h1 heading in the "dark" theme to brown and every h1 heading in the "black" theme to black. These will override the styles you have for your default <html> tag

-

How to do font-family and font-size settings: 

Basically the same thing, except this time with fonts!

The only real difference here, as you can see above, is the name of the variables, ie. settingFontFamily to set the names you want to display in your Settings dropdown. setFont to hold the function. 

On line 29 we create a variable called passages that selects the <div id=“passages”> element in your html, which is the one that holds all your passages (obviously):

Then we do the exact same thing as before with the switch statement, except on line 32 and 37 we use the passages variable to change the inline fontFamily style of the <div id=“passages”> element to whichever font we want to use. 

In the above photo you can see that the inline style is currently set to ‘Poppins’, sans-serif

Then we do the same as before with the Setting.addList() method, except this time with the corresponding info.

-

With font-size it’s basically the same again, except this time with font-size:

Only difference here is that we have more cases under the switch statement. We’re still using the same passages variable to target the same <div id=“passages”> element, but this time we’re changing the inline font-size style to different pixels (you can use other units as well, like rem, em etc.)

And... I think that's it! Let me know if you have more questions or if something was unclear ✨

I assume you're talking about these ones?:

I'm not sure which part you're having trouble with, so I'll explain it all

So these dropdown selections are html <select> elements, which goes under the <form> elements in html, as many other elements do, such as <input> and <textarea>. You can style these in CSS by targeting them like this:

I have applied the same styles to all of them, but you can of course separate them and do different styles for each.

Now, with that being said, there are more than one "states" of these elements, same way there are different states for <a> elements, so you can have a different style for whenever the mouse is hovering over the element, or whenever the element is in focus (which it will be after it's recently been selected/changed, like Sans-Serif is in the first image.

So to style these states, we'll target them using pseudo-classes:

So, above I've used three different pseudo-classes at once to style <input>, <select> and <textarea> while they are focused, using the :focus pseudo-class, but also making sure they don't change style if they are disabled, using the :not(:disabled) pseudo-clas

Then all you have to do is add your styles.

Now, as for having different styles for different themes, all you have to do is all of the above, but make sure you have html.themename in front in the CSS like I have done here with my "dark" theme:

So for my three themes, I have one style in my css that is just input or input:not(:disabled):focus to style the default theme

then another style that's html.dark input and html.dark input:not(:disabled):focus to style the "dark" theme

aaand another style that's html.black input and html.black input:not(:disabled):focus to style the "black" theme

Now they should change according to which css class the <html> tag has.

You can do this by using one of Twine's String Methods, the <String>.toUpperFirst(). To use this one (or any other method really) inside a passage, you just have to put it inside a <<print>> macro, or a <<=>> macro, which is basically the same thing, like I've done here:

These are just two examples of the same thing, so you can pick one of them to use. <<=>> is just an alias for <<print>> in Twine.

As you can see I'm just asking Twine to print a variable that is a string, by telling Twine which string variable i want to print, which in this case is $hello, then using the .toUpperFirst() method to capitalise the string data inside the variable.

-