Twine101

Apologies! Your web browser lacks required capabilities. Please consider upgrading it or switching to a more modern web browser.

Initializing. Please wait…

Hi! This game-story will teach you how to make game-stories in Twine. It's intended for [[Twine2 and Sugarcube|Advanced]]. If you haven't already downloaded and installed it, you can do so [[here|http://twinery.org/]]. Now that's done, let's get going properly. What would you like to learn about first? <<set $iknowhowtosetvariables to false>> [[Absolute basics|Basics]] [[I know a few things already, show me some of the fancier stuff|Advanced]] //(If you already know what you want to do and would like to go straight to it, use the [[Shortcuts]] Menu in the sidebar.)//

First of all, I want to... [[...add my name to my game so everyone knows I made it!|Name]] [[...learn how to make branches|Branches]]

In case you haven't already, check what version of Twine you're using. <img src="images/storyformat.jpg" alt="Changing story format image" /> This guide is intended for Twine2 Sugarcube, so if you're using Twine 1 or Harlowe, some of the techniques may not work for you. <img src="images/storyformatmenu.jpg" alt="selecting Sugarcube image" /> Once you're all set, it's time to decide what kind of awesomeness you'd like to add to your Twine game. [[Images|Images]] [[Audio|Audio]] [[Variables|Variables]] [[Finishing Touches|Finishingtouches]]

To add your name to the Twine sidebar, create a new passage called StoryAuthor. <img src="images/passage.jpg" alt = "Passage image" \> Enter your name in the new passage. Give it a quick [[test|Test]]... And away you go! [[I've tested, it's all fine.|Great]]

Branches are the points where your game-story becomes non-linear. In other words, they offer your player choices by allowing them to click on links. Here's what a link looks like in Twine: <img src="images/link.jpg" alt="Link Image" /> The text to the left of the | bar (same key as the backslash, which on my keyboard is between SHIFT and Z, but can also be between BACKSPACE and ENTER) is what the player sees. The text to the right of the bar is the name of the passage she goes to when she clicks on it. Remember: it has to be double brackets! The brackets and destination text should turn blue if you've got it right. Got it? [[Yes|Storyboard]] [[No|Stay]]

If you exit your passage, it’ll take you back to the story board. You’ll see Twine has already cleverly made the next paragraph with the next corresponding name. If for any reason you wish to change this, you MUST remember to change it inside the square brackets on the previous passage AS WELL AS on the passage title. If you create a passage with TWO links to TWO passages, now you've got a branching story! Now the player has a choice! Time to [[test|Test]] things out.

In that case, have [[another read through|Branches]] to make sure you understand. Or use this [[helpful webpage|http://www.adamhammond.com/twineguide/]]. Or ask for help!

To play your game-story, click on "Play" and you’ll see your story as a reader-player would (pretty much how you're seeing this now.) <<if visited ("Advanced")>> If you're using more advanced functions, you might have some [[extra work to do|Extratest]]. <</if>> Everything working? [[Yes|Great]] [[No|Fixing]]

Bits that have gone wrong will be highlighted in red so you can fix them. Usually this will be down to spelling errors or incorrect code. If you're not sure how to solve your problem, ask for help, or use [[the wiki|http://twinery.org/wiki/]]. [[Back|Test]]

Lynda Clark

[[Credits|Credits]] [[Shortcuts|Shortcuts]]

This instructional story-game was based on the following invaluable Twine resources: [[Anna Anthropy's Online Guide|http://www.auntiepixelante.com/twine/]] [[Adam Hammond's Twine Guide|http://www.adamhammond.com/twineguide/]] and [[the Twine wiki|http://twinery.org/wiki/]] [[Play|Start]] It uses music from [[Bensound.com|http://www.bensound.com/]] And it was made during my work placement at the fantastic [[National Videogame Arcade|http://gamecity.org/]] in Nottingham, UK - if you ever get chance to go and visit, you must!

Adding images with Sugarcube can be a bit tricky, but it's worth it in the long run, because it means you have TOTAL CONTROL over your images FOREVER! (Unlike if you just added images using urls, which could be changed or moved by whoever owns them thus breaking your gamestory!) First of all, you'll need to create your [[folder structure|Folderstructure]] [[Done!|Pictures]]

Audio is probably the most complex part of this guide, but that's why we're using Sugarcube - it handles most of the really difficult stuff itself. First of all, you'll need to create a [[suitable folder structure|Folderstructure]]. [[I've done that already!|Sounds]]

<<if not visited("Variables" and "Audio" and "Images")>> Are you sure you're ready for finishing touches? Maybe you should try some of [[the other stuff|Advanced]] first. <<elseif visited ("Advanced" and "Basics")>> Now you've got your basic gamestory in place, you can tinker around with [[fonts and colours|Settings]] and [[effects|Effects]]. <<elseif visited ("Test" or "Advanced")>> I'll take your word for it that you know what you're doing. Be careful when changing [[settings|Settings]] though! Most of these aspects be adjusted in the [[CSS Stylesheet|Stylesheet]]. <</if>> If you're absolutely sure you're ready for this jelly, you can skip to what you want to do via the [[Shortcuts Menu|Shortcuts]].

Variables are the 'gamey' bit of your game story. They can be used for all kinds of things, like [[recording your player's name|Textentry]], [[creating an inventory|Inventory]] or giving them [[stats and attributes|Stats]] according to their choices. Just remember you always need to use the dollar sign '$' to create a variable. [[Back to Advanced|Advanced]]

[[Basics]] [[Adding your name to your game|Name]] [[Creating Branches|Branches]] [[Advanced]] [[Images]] [[Audio]] [[Variables]] [[Settings]] [[Effects]]

Probably the easiest thing to do is create a folder inside your Twine 'Stories' folder with the same name as your game. <img src="images/folderstructure1.jpg" alt="Folder structure image main" /> Inside that, create folders with names appropriate for what you're going to keep inside them. <img src="images/folderstructure2.jpg" alt="Folder structure image interior" /> Got it! [[Back to images|Pictures]] [[Back to audio|Sounds]]

Your images will need to be jpgs, but beyond that, they can be anything you like - [[photos of you|Photo1]], or [[things you've seen|Photos2]], or [[drawings you've done yourself|Drawing]]. Just make sure you have permission to use the images. Save the jpgs you want to use into your 'images' folder. Now you'll need to type some code that looks like this: <img src="images/imgcode.jpg" alt="code for images" /> You'll need to change the 'nameofyourimage' part so it matches the name of the image you want to display. The 'alt' tag means that if the image doesn't display correctly for any reason, the reader-player will still have some idea of what you're trying to show. It's not essential, but it's good coding practice, and a good habit to get into. [[Testing time!|Test]]

Your sounds will need to be mp3s. Save them into the appropriate folder, and then create a passage called StoryInit. This will handle the majority of your audio-related code. <img src="images/storyinit.jpg" alt="story init passage" /> Now you need to enter the code to handle the audio into the StoryInit passage like this: <img src="images/audiocodestoryinit.jpg" alt="Initialising audio code for story init" /> changing the file names and filepaths to match your own. [[Got it!|Onward]]

To fully test things like images and audio, you'll need to use Twine's 'publish to file' function. <img src="images/publish.jpg" alt="publish to file menu option" /> Save the html file into your [[carefully constructed file structure|Folderstructure]], it can go in the main folder. <img src="images/htmlfile.jpg" alt="html file structure" /> Right click the html file and open it in your web browser to make sure everything is running as it should. Now, if you want someone to be able to play your gamestory, you can just send them this folder complete with images, audio & html and the game will run exactly as you as intended! [[Yay!|Great]] [[Not yay.|Fixing]]

<<cacheaudio "epic" "audio/bensound-epic.mp3">>

To allow your player to enter their name, use this code: <img src="images/nameentry.jpg" alt="code for name entry" /> It'll result in a box like this: <<textbox "$name" "">> Go on, enter your name above, then hit [[continue|Named]].

You can record stats to track what your player does, either by giving choices certain values they aren't aware of, or by allowing them to build their stats. For example: <img src="images/statscode.jpg" alt="How to enter stats" /> This means you can add and take away stats however you like, and then [[gate choices|Gating]] according to what stats your players have. [[I want to try that!|Test]] [[Back to Variables|Variables]]

To give your player an item, first you'll need to use the code: <img src="images/settingvariable.jpg" alt="adding a new variable" /> This will create the variable 'clownshoes' and determine that the player doesn't yet have any clownshoes. It doesn't have to be clownshoes, it could be anything you like. Use the dollar sign ($) and the relevant code, and any kind of inventory item can be created. Just make sure to keep track of them all! Now you can [[give the player some clownshoes|Giving]], or [[determine their choices according to what items they have|Gating]].

To give your player their shiny new item, just change the code from false to true like so: <img src="images/gettingvariable.jpg" alt="how to add inventory items" /> You can change this back and forth as they find and lose items through the course of your game-story. <<set $iknowhowtosetvariables to true>> [[So... what else?|Gating]]

You can check what items or statistics your players have and use this to determine what text they see, and what routes they can take. For example: <img src="images/clowncodeexample.jpg" alt="example code for checking inventory items" /> You can use this in lots of different ways to make the player hunt for special items to solve puzzles or navigate through your gamestory. [[Test it out!|Test]] <<if $iknowhowtosetvariables is false>> For example, I know you didn't read that bit about setting variables, so maybe you should [[do that now|Giving]] <<elseif $iknowhowtosetvariables is false>> For example, I know you've already ready about how to set variables, so it's fine for you to try [[something else|Variables]] <</if>>

See, now I can use your name whenever I want $name. Could get annoying, couldn't it $name? Best not overuse it then, eh, $name? And if you've entered something silly, that isn't you name, well, I'm going to call you $name anyway, so you've only done it to yourself. (To display the text the player has entered in your story as I've done above, just use the code <img src="images/name.jpg" alt= "code for name" /> in each place you want their text to appear. You can do this for multiple variables, calling them whatever you want.) [[Try it out!|Test]] [[I'm done with that now|Variables]]

Even all this has barely scratched the surface of what Twine can do. You can play around with the text in various ways to give certain words more impact. You can do things just by typind directly into [[Twine|Formattext]], or by [[editing the stylesheet|Texteffects]].

You'll find the stylesheet here: <img src="images/stylesheetmenu.jpg" alt="where to find the stylesheet" /> It starts out blank. [[Back|Finishingtouches]]

You can play around with most aspects in the Stylesheet using typical HTML commands. For example, this will alter colours, fonts and sizes. <img src="images/changingbody.jpg" alt="how to change default body text" /> Try typing in different colours, font names and values to see what happens. [[Now test!|Test]] Or maybe you want to only change [[one small aspect|Moresettings]] rather than the whole thing? <<if not visited ("Stylesheet")>>//[[More on the stylesheet|Stylesheet]]// <</if>>

[[I just want to change the hover text colour|Hover]] [[I just want to change the colour of one passage|Passage]] [[I just want to change the sidebar|Sidebar]]

This code will change the colour of the hovertext. Try some different colours. <img src="images/hovertext.jpg" alt="Code for changing hover text colour" /> [[Test]] [[More things!|Moresettings]]

This page hulked out! How did I do it? Well, first of all, I added a tag. <img src="images/tag.jpg" alt="hulked out tag" /> Then, I made some custom code with the matching tag name in the style sheet. <img src="images/hulk.jpg" alt="hulked out passage" /> Sugarcube does the rest! [[Test it out|Test]] [[Or try more things|Finishingtouches]]

Maybe your gamestory has lots of supercool images so you don't want the sidebar crowding it? Well, you can [[hide the sidebar|Hide]] if you want to. Alternatively, maybe you want to [[add things to it|Add]], like I have with my credits section.

To get rid of the sidebar, you'll need this code: <img src="images/sidebarhide.jpg" alt="hiding the sidebar" /> Bear in mind, if you've already made changes to the 'body' code, this may conflict with it. [[Test]] [[Back|Moresettings]]

To add things to the sidebar, make a passage called StoryCaption. Any text or links you enter in here will be added to the sidebar. [[Test]] [[Back|Moresettings]]

Here's the code for a few of the effects shown on the previous page. <img src="images/effects1.jpg" alt="stylesheet code for text effects"> Activate them in the passages by using @ signs and semi-colons like this: <img src="images/effects2.jpg" alt="passage code for text effects"> You can find more on the [[wiki|https://twinery.org/forum/discussion/5625/any-dynamic-text-effect-macros-for-sugarcube-2-x]] Don't forget to [[test!|Test]] Brilliant. I want to look at [[other things now!|Advanced]]

I'd like to _underline_ the fact that you can _underline_ in Twine, or //italicise//, but I don't want you to think me too ''bold''. Underline by adding <img src= "images/underlining.jpg" alt="How to underline" /> Italicise with <img src= "images/italics.jpg" alt="How to italicise" /> Make text bold with ''double apostrophes'' <img src= "images/bold.jpg" alt="How to do bold text" /> (Not speech marks) Got it! [[Show me more!|Texteffects]] Fine, [[let me do something else now|Advanced]].

For example, some text casts a @@.shadow;shadow for emphasis@@, while other text is @@.emboss;extremely impressed@@ with itself. Some text @@.blur;cries@@ and @@.blurrier;cries@@ until eventually it pulls itself together and @@.smear;wipes its eyes@@. Some text takes a @@.mirror;good hard look at itself@@ and gets @@.upside-down;all flipped around@@ by what it sees. Some text @@.rumble;finds it hard to stay still@@ and some is just @@.shudder;plain scared@@ but all of it is created in [[the same way.|Effectscode]]

<img src="images/selfie.jpg" alt="terrible selfie" /> I wasn't ready, okay? I //wasn't ready//! [[Back|Pictures]]

<img src="images/flowers.jpg" alt="yellow flowers" /> A purty flower. [[Back|Pictures]]

<img src="images/myart.jpg" alt="my terrible artwork" /> The dazzling fruits of my imagination. [[Back|Pictures]]

<<audio epic play>> Finally you need to add the audio in to your passage wherever you want it to start playing with this simple piece of code: <img src="images/audiocodepassage.jpg" alt="code to use in passage to activate audio" /> again changing the name to whatever you used in the StoryInit passage. And that's it! There's lots more commands you can use to control the audio - you'll find them [[here|http://www.motoslave.net/sugarcube/1/docs/macros.html#macros-cacheaudio]] - experiment! All right, I'm ready to [[test|Test]] now. I want to learn [[something else|Advanced]]