hi! i’m wanting to make custom templates for my twine games. i was wondering — for the main menu screen you have on your template, did you have to delve into the storyinterface? honestly thats the only part thats confusing me 😂
Hi there! I'm not entirely sure which of the two templates you're referring to, but I did use StoryInterface for both of the templates 😊
Using StoryInterface allows you to build the user interface entirely yourself using HTML, but it will replace all of SugarCube's built in code, so you'll have to create all the elements of the UI yourself - if that makes sense.
You must include an element with the id "passages" for your story's passages to show up, for example with a <div id="passages"></div> element. Just leave it empty, and Twine will populate it with your story's passages.
Another neat trick is using the "data-passages" attribute to populate elements with content from certain passages. For example, in my first template the StoryInterface contains this element:
class="story-author" obviously allows me to style the element using CSS in the Story Stylesheet, whereas the data-passage attribute is an attribute native to Twine that allows you to populate elements with the content of specific passages. This one has the value "storyAuthor", which means that Twine will automatically populate the <h2> element with whatever content is inside a passage called "storyAuthor" when the game runs.
Other than that, if you're looking to learn more coding, I find w3schools really helpful, it's completely free and you find everything you need there. I also used the Twine documentation a lot. To learn more about how everything works, maybe download one of my templates and play around with the StoryInterface that's already built to learn what everything does? 💁🏼♀️
hi vahnya! i'm trying twine (sugarcube) for the first time and my tiny brain refuses to understand how codes work :'( could you please share with us how to do a character creation passage that includes name, gender, pronouns, appearance, etc? how do we make twine remember this? sending much love to you and your big brain <3
Hi there! ✨ Absolutely, I'll do my best to explain. I'm not sure of you meant that you wanted one single passage to set all of the character creations, or if you meant spread out over several passages as most games do, but it doesn't really matter. You can definitely have the entire character creator on one single page.
Also, thank you for calling my brain big, I think it spurred on the creation of a new brain cell, so now I have 3 lmao!! 🙏🏻
✨ Twine Variables/Character Creation - a tutorial ✨
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.
I really hope this was understandable and helpful! Feel free to ask if something was unclear or you need help with anything ✨🤎
hi bestie pls help im in a crisis how do y’all test ur games on ur phones?? like how do u transfer it from laptop to phone im struggling
Hi bestie! ✨
To test the UI and design as I'm working on it, I simply scale the browser to mobile screen size or use the Developer Tools in Google Chrome like so:
Developer Tools allows you to see what the UI will look like for different devices and screen sizes. + So many more things. Developer Tools is an incredibly handy tool for web-designers 👌🏻
Edit: If you want a more in-depth tutorial on ways you can use Developer Tools, you can find it here ✨
But to properly test the game, I have a hidden project on itch.io that I keep as a draft only, where I can upload the game and send myself the secret URL to open it in my mobile browser.
You'll find the secret URL (which you can share with anyone you want to give access to the game) in your desktop menu on itch.io:
It's honestly really cumbersome to have to keep uploading the file to itch.io for each change you make, so I mainly stick to the first option of testing it on my laptop using Developer Tools. Mainly the reason you would want to test on mobile anyway is to make sure the UI works well, and you can do this perfectly fine on your laptop.
There may be other ways of doing it though, but this is how I do it. I hope this was helpful! ✨🤎
First of all, just wanna say thank you for all the tutorials, they’ve been a massive help!
I just wanted to ask if you know how to create a character codex where a character will appear on it when you meet said character. Also how do you create the notification to let the reader know they’ve unlocked this?
Hope that makes sense! Take care ❤️
Hi! ✨
I'm so happy to hear it! Sure thing :)
✨How to display Character Codex with if statements in Twine + How to use Chapel's Notify Macro ✨
✨ In this video I show you how you can show Character Codex for each character as you meet them individually in the game, as well as how to make the codex appear only once you've met all the characters in the game + explaining how IF statements work.
✨ I also go through how to install and use Chapel's Notify Macro to show the player a pop-up alert/notification
✨ and you can see a sneak peek of a potential new template I might release, in the video, both throughout and at the end 👀
If you think I talk too slow (understandable) or go too in-depth through the motions, there are some nifty extensions that allow you to watch videos sped up, I use it all the time 😂👌🏻
How did you make the stat bars be opposite of each other ?
Like, instead of
Sarcastic: 50%
It's Sarcastic vs Sincere
Also, sorry this is so long, but at least for me, when you pick Psychology as a study, it doesn't increase it on the journal page!
Aight *cracks knuckles* - round two of tutorials
✨ How to create oppositional stat bars - a tutorial: ✨
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 ✨🤎
And thanks for letting me know about the variable asdfghjkl - I’ve been changing up the names of the variables so many times, I forgot to change all the code. Should hopefully work in the next update.
the settings option, where you change the font size and the theme! Howwww
I'M NOT SURE HOW MUCH DETAIL YOU WANT BUT I'LL TRY
How to change themes in Twine — a ✨ tutorial ✨:
Edit: Realised you also asked for font-size and font-family? Added that to the bottom ✌🏼
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 ✨
Bestie how did you get the drop down list button in the setting to change Colour with the different themes??? Is this magic???
You've come to the right place, bestie! ✨ No magic necessary ✌🏼
✨ How to style form elements in different themes - a tutorial ✨
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.
Hellooo I'm new to twine and transfering over from choicescript and the coding is all so different 😩 I was wondering if you could help me with capitalising variables. I know in choicescript they use $!{variable} to get the first letter of the variable capitalised but I'm at a loss in twine...
Hi there! ✨ Agh, I know it's difficult, but you'll get there in the end! It's just a steep learning curve to begin with 🤎
I assume you mean how to print a variable capitalised if the data in the variable is lowercase, like if you have the variable $hello set to "hello" and you wanted it to print as Hello?
✨ Capitalising String Variables in Twine ✨
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.
-
Hope this helps! And best of luck transferring over to Twine. You can do it! I believe in you ✨🤎
