<center><img src="http://selfloud.net/wp-content/uploads/2017/09/twine2.png"></center>
Twine is an easy to learn platform for building choice-driven games, which can include narratives, scholarly critiques, and even tutorials like this simple example. Twine was built by Chris Klimas and is now an open-source project which you can download for free at <a href="http://www.twinery.org">Twinery.org</a>.
This tutorial is for Twine 2.x using Harlowe 2.x.
(Here's a quick explanation of [[Twine 1.4.x]] if you want to know the difference.)
<center>''Ready to [[make some games->set-up]]?''</center>
Twine 1.4.x is "classic" Twine, which exists only as a downloadable program. It's very well-supported, and there are a number of online resources for working with it, some of which will still work in Twine 2.x -- however, many of the older resources you'll find online are things that are now well-integrated in Twine 2.x.
If you'd like to check out the features in Twine 1.4, check out <a href="http://selfloud.net/twineWorkshop/twineTutorial.html">this tutorial.</a>
Or you can [[go back to learning Twine 2->Welcome]]!Let's jump into Twine 2. The first choice you need to make is whether to use the <a href="http://twinery.org/2">browser-based editor</a> or the installed version. If you have an unreliable internet connection or plan on working on any large project, I highly recommend <a href="http://twinery.org">downloading and installing Twine 2 for offline use</a>: it's available for Windows, Mac, and PC. It's easy to move files back and forth between the versions, so you can also switch platforms as you go.
Once you load up the editor, you'll see the main screen, which is where you can pick a project to work on:
<img src="http://selfloud.net/wp-content/uploads/2017/09/Screenshot-.png">
On this main screen, you'll see any games you've worked on with this computer before, and you can import existing games from .html files. If you're working in the browser you'll see games you've worked on in this browser before, but don't trust this storage -- you'll want to continually save your work to your own computer, as this relies on what is called "local storage" and will disappear. There's no need to make an account, as everything is actually stored on your own computer.
To get started, pick the green button on the right and click ''+Story.''
This will load the [[editing screen]].The editing screen is a big grid surface where you can view all the parts of your game at once. In Twine 2, this is how it looks:
<img src="http://selfloud.net/wp-content/uploads/2017/09/Screenshot-.png">
A few things to notice:
* The ''home button'' at the bottom left-hand corner will take you back to the main stories page to choose another project to load
* The ''game title'' you chose will appear at the bottom left-hand corner of the screen. This also serves as a main options menu: click on the triangle to open a set of options. We'll be looking at those in more detail throughout: two to know about now are ''rename story'', which lets you change the tile, and ''publish to file'', which lets you save a copy to your computer.
* The ''blue space'' is the main editing area. You'll see your first ''untitled passage'' in the center. Passages are Twine's central mechanism: it's where you'll write text and add images and interactions. By default, this initial passage is the first passage in your story. You can change which passage is first by opening the passage and selecting the ''rocket ship'' icon.
To add more passages, use the ''+Passage'' button on the bottom-right hand of our screen. Passages will form the structure of your game: let's take a look at [[some examples]].
Double-clicking on a passage brings up the editing screen, which will let you directly change the contents of the passage. Lots of stuff can go in here: text, links, images, HTML, audio, video, and even code for handling all types of interactivity. We'll start with the basics:
<img src="http://selfloud.net/harlowepassage.png">
The top of the passage is the ''title''. You can change that to whatever you want, but I recommend using something simple and memorable. All of your passages will need unique names. You'll use those names to create links between different sections of the game.
The next line of the passage is for ''tags''. Tags are used to mark certain types of content and set up certain features: don't worry about tagging your passages yet.
The final section of the passage editor is the heart of your passage. This is what displays when the user comes to this section of the game.
Once we're ready to start editing, we need to [[choose a story format]] to determine what rules our passages will follow and how they will display.Links are the heart of Twine: they're what put the "hyper" into "hypertext." You can add a link by using the title of any passage in brackets:
<blockquote>
``[[A Passage Title]]``
</blockquote>
Of course, we don't always want to use the name of a passage in the link. If you want to use other text, include that text in the link structure:
<blockquote>
``[[Your link text->A Passage Title]]``
</blockquote>
The "->" tells us which way the link works -- the words before the arrow will send us to the named passage after the arrow. We can even link to external documents by using the full http:// link in standard HTML tags:
<blockquote>
``<a href="http://google.com">Google</a>``
</blockquote>
External links will open for our user in a new tab, and are highlighted with an arrow by default so the user knows what to expect if they click on it.
With links and passages, we have everything we need to finish a Twine game. We're ready to [[level up our Twine knowledge]].In the main view, you can map out the work and organize passages however you want. This is a great way to get an overview of the connections and networks. You can see a lot of examples of this in action on Tumblr in Porpentine's <a href="http://twinegarden.tumblr.com/">Twine Garden</a>.
You can create branching networks...
<img src="http://selfloud.net/wp-content/uploads/2017/09/Screenshot-.png">
...arrange passages organically...
<img src="http://selfloud.net/wp-content/uploads/2015/09/threedragons.png">
or follow a very structured model.
<img src="http://selfloud.net/wp-content/uploads/2015/09/download.jpeg">
Let's get started by double-clicking on the outline of the passage to [[edit it]].
Story formats control how Twine 2 works and displays. There are five options currently:
* ''Harlowe 2.x'': The default for Twine 2. Harlowe has the advantage of being well-documented, with a <a href="https://twine2.neocities.org/">full manual</a>. It has an elegant, simple sidebar and a white background by default, but it doesn't support all of the same macros. It's a strong and well supported format.
* ''Harlowe 1.2.4'': A deprecated format that has been replaced by Harlowe 2: don't use this.
* ''Snowman'': A more advanced story format suitable for users who are already very comfortable with HTML, CSS, and JavaScript. Not a good choice for beginners.
* ''SugarCube 2.x'': SugarCube includes support for some flexible elements and a simplified structure for links and content insertion, using some syntax that will be familiar to users of Twine 1.x. It also has detailed <a href="http://www.motoslave.net/sugarcube/2/">documentation</a>.
You can choose your format by clicking on the title menu and selecting "Change Story Format." This will display an options window:
<img src="http://selfloud.net/harloweformat.png">
Check the format to select it-- we'll be using Harlowe 2.x
After you've confirmed you have set your format to Harlowe 2 for this tutorial, you're ready to start [[linking content]]. Be warned: if you work in a different story format, some things will break!There are a number of different ways we can enhance our Twine game, depending on the atmosphere you want to create and how much coding you want to learn. Here are a few simple options for getting started.
Do you want to...?
* [[Add an image]]?
* [[Customize your style]]?
* [[Try out scripting]]?
Or are you ready to [[finish your game]]!Adding an image is different depending on whether you are working live on the web or locally. If you are working with the web editor, your images will need to be hosted somewhere. When testing, you may link to images live on other websites, but when you launch and share your game you'll need to change those links to reference your own images.
To insert a live image, use the full http:// link of the image file with an "img" tag from HTML:
<blockquote>``
<img src="http://yoururl.com/imagefilename.jpg">
``</blockquote>
Any web-ready image will work: Adobe formats like Photoshop and Illustrator won't display. The image will show by default at its full resolution, although we can customize that with [[CSS|Customize your style]] later.
A better long-term solution for including images is to make an images folder in the same place where you are working on the game locally: that's wherever you save the .html file. Then, you can references images in your "images/imagename.jpg", and upload everything on a server later when you [[finish your game]]
<center>''[[Go Back->level up our Twine knowledge]]''</center>Everything in Twine is built for HTML, so controlling the appearance of things is just a matter of working with CSS, or Cascading Style Sheets.
If you've never worked with CSS, you can try out <a href="http://www.codecademy.com/courses/css-coding-with-style/0/1">Codecademy's introduction</a> to get a feel of the CSS syntax, or you can explore the <a href="http://www.w3schools.com/cssref/">CSS syntax reference</a> to see what it can do.
Most style changes will go in your game's stylesheet. To access it, click on the name of your game in the bottom-left corner of the screen, then choose ''Edit Story Stylesheet''.
To get started, do you want to:
* [[Change colors]]?
* [[Format text]]?
* [[Add a background]]?
Or do you want to [[go back|level up our Twine knowledge]]?
While lots of basic functionality can be accomplished in Twine without adding scripting, adding in code will give you more control of your game and the user experience.
Using links lets us react to user choices and build a branching game. However, Twine also enables us to add in additional functionality to keep track of variables, make decisions, evaluate expressions, and otherwise create interactivity.
For instance, you might be making a game where you can't speak to a king until you've been formally introduced. In that case, you might keep track of whether the player has gotten introduced or not using a variable. Here, we declare that variable and set it to false to start:
``
(set: $metking to false)
``
Later, we can use that variable to display different text in a passage with a conditional statement:
``
(if: $metking is false)[The king ignores you.](else:)[The king recognizes you, and gestures for you to [[approach]]...]
``
For more examples of using variables and conditionals, check out Melissa Ford's chapters in (text-style: "italic")[Writing Interactive Fiction With Twine.]
If you're interested in playing with more code, you can check out [[macros]]. Or, you can go [[back->level up our Twine knowledge]] and try other approaches to customize your game.To finish your game, you'll need to save it as an .html file. Go to the title of your game and select ''Publish to file'', and pay attention to where the .html file ends up. I recommend backing up to Dropbox or another cloud service.
You can host the game on any website, or used the free twine game host <a href="http://philome.la/">Philome.la</a> to share your .html file as long as you have a Twitter account.
To go back and make changes later, you can import the .html file directly into the editor. You can even download this tutorial and import it into Twine 2 to see how everything works!
That's it! Now, you can go build your own game.Changing colors in Twine is easier if you're already used to HTML color codes, which are just <a href="http://www.w3schools.com/tags/ref_colorpicker.asp">hexadecimal values</a> for referencing colors. If you're using Photoshop or another editor to make images for your Twine game, you can use the eyedropper tool to pick a color and grab the hex code to match it in your game.
Once you've got your color, you just need to use the right properties to pick the part of Twine you want to change. For instance, if you want to change the colors of your main passage links, try:
<blockquote>``
tw-link {
color: purple;
}
tw-link:hover {
color: green;
}
``</blockquote>
If you want to change the color of external links, you'll refer to the "a" property in your CSS:
<blockquote>``
a {
color: #9966FF;
}
a:hover {
color: #6699FF;
}
``</blockquote>
Do you want to:
* [[Change more styles->Customize your style]]?
* [[Go back for more options->level up our Twine knowledge]]?
Unlike some of the larger formatting changes, most text formatting can be accomplished right in your passages. One useful tool is the font macro, which allows you to use any common web font in the middle of a passage:
<blockquote>
(font: "courier new")[``(font:"courier new")[changes text in brackets]``]
</blockquote>
You can also change your text styling, like you would in a word processor but with more moving choices, using options like italic, bold, blink, stike (which strikes through the text), rumble, blur, mirror, and more. Here's a few examples:
<blockquote>
(text-style:"smear")[``(text-style:"smear")[words in brackets will smear]``]
(text-style:"rumble")[``(text-style:"rumble")[words in brackets will rumble]``]
</blockquote>
You can also easily create lists: just put a ``*`` at the start of any line you want to display as an unordered list, or a ``#`` for a numbered list. Using multiples (`` ** ``) will further indent the list, as shown below
* First thing
** Second thing
*** Third thing
Do you want to:
* [[Change more styles->Customize your style]]?
* [[Go back for more options->level up our Twine knowledge]]?If you want to change the overall background color, use the "tw-story" selector:
<blockquote>``
tw-story {
color: white
}
``</blockquote>
to change the background color of the page. If you prefer a gradient or image, try:
<blockquote>``
tw-story {
background-image: linear-gradient(135deg, orange, orange 60%, cyan);
}
``</blockquote>
If you want to hide the back button in the sidebar, use:
<blockquote>``
tw-sidebar {
display: none;
}
``</blockquote>
(You can also change the background color, but it will just change the small box)
Do you want to:
* [[Change more styles->Customize your style]]?
* [[Go back for more options->level up our Twine knowledge]]?''Macros'' are interactive elements you can add to your game. Each story format handles macros differently, so make sure that you are working with Harlowe 2 macros when following this turoial.
One useful Harlowe 2 Macros is ``(history:)``, a macro that tracks all the passages that players have seen. You could use it to track how many moves the player has made in a story with limited time by using the length of the history:
<blockquote>
You've walked through (print: (history:)'s length) passages so far in this tutorial.
Code: ``(print: (history:)'s length)``
</blockquote>
[[Back->level up our Twine knowledge]]Double-click this passage to edit it.