Add images to Twine by typing "img[PICTURE NAME]" in another set of brackets, like this:\n\n[img[addimage.png]]\n\nNote that the image must be saved in the same folder that you are creating the game in.\n\nBack to [[Basics]]
To use a script, write or add the code into a Script passage, which can be added at Story » New » Script. Name this passange anything you like, but be sure to leave the "script" tag. Either write or copy and paste the code into this box. This passage should only contain JavaScript.\n\nIn this example, I will be adding the Cycling Link function from <html><a href="http://www.glorioustrainwrecks.com/node/5020">\n Glorious Trainwrecks.</a></html> This will allow me to make links that don't go to other passages but instead change the words within the passage, like <<cyclinglink "this" "and this" "and even this">>.\n\n[img[cyclinglink.png]]\n\nAfter adding the script, you can then use the function on any page of your Twine by following the rules created in the script. In this case, Glorious Trainwrecks has given examples to follow.\n\n[img[cyclinglinkexample.png]]\n\nBecause there are lots of people using Twine, there is lots of free code available online, and you don't have to know how to write code to add some of these extra functions to your Twine.\n\nBack to [[Advanced]]
Random passage two
<<silently>>\n<<set $visit_variable_passage = "false">>\n<<set $dollars = 0>>\n<<endsilently>>\nGet started with Twine here.\n\nWhat do you want to know more about?\n\n[[Basics]]\n[[Advanced]]\n[[Format and Design]]\n[[More Resources]]\n\n\nAssignment info for <html><a href="http://courses.jamesjbrownjr.net/node/3454"> English 177 </a> </html> and <html> <a href="http://courses.jamesjbrownjr.net/node/3448"> English 236 </a> </html>
Twine Resources\n<html>\n<a href="http://auntiepixelante.com/twine">\n Anna Anthropy's Twine Guide\n</a>\n<br>\n<a href="http://twinery.org/wiki">\n Twine Wiki\n</a>\n<br>\n<a href="http://twinery.org/forum">\n Twine Forum\n</a>\n<br>\n<a href="http://gamesaslit.textories.com/syllabus/twine-cheat-sheet/">\n Twine Cheat Sheet\n</a>\n<br>\n<a href="http://www.glorioustrainwrecks.com/taxonomy/term/6011">\n Advanced guide by Glorious Trainwrecks\n</a>\n<br>\n<a href="http://www.gamasutra.com/blogs/DanCox/20130203/185939/Learning_Twine_Part_1.php">\n Three-part guide by Dan Cox\n</a>\n</html>\n\n\nBack to [[Start]]
To <strong>bold</strong>, //italicize//, or use other text styles, use these codes from <html> <a href="http://twinery.org/wiki/syntax">Twine Wiki</a></html>.\n\n[img[textcodes.png]]\n\nBack to [[Basics]]
I want to:\n\n[[Change format]]\n[[Edit StorySettings]]\n[[Edit CSS stylesheets]]\n\n
Unlike Sugarcane and Responsive, Jonah expands as more passages are opened and displays them all together. Players can scroll upward on the page to see the choices they've made. This format allows you to [[Add choices]] instead of only links. \n\n[img[jonah.png]] \n\n\nJonah-specific features: \n[[Add choices]]\n\n\nBack to [[Change format]]\nBack to [[Format and Design]]
Give your story a title and author by editing the StoryTitle and StoryAuthor boxes. Like the "Start" passage, these titles cannot be edited. Instead, write your title and name into the text box and leave the title the same.\n\n[img[titleandauthor.png]]\n\nBack to [[Basics]]
To test your Twine, click on "Build » Test Play" or press Command+T. You can also select "Build » Test Play from Here" to see the passage you are currently working on. \n\nBack to [[Basics]]
Sugarcane is the format Twine defaults to. Sugarcase displays your story with white text on a black background, but this can be changed if you [[Edit CSS stylesheets]]. In Sugarcane, players can only see one passage at a time. \n\n[img[sugarcane.png]]\n\nBack to [[Change format]]\nBack to [[Format and Design]]
/* Your story will use the CSS in this passage to style the page.\nGive this passage more tags, and it will only affect passages with those tags.\nExample selectors: */\n\n@import url(http://fonts.googleapis.com/css?family=Russo+One);\n\nbody {\n /* This affects the entire page */\n background-color:#EDEDED;\n font-family: "Russo One", sans-serif; \n \n}\n#sidebar { \n font-family:"Russo One", sans-serif;\n color:#00CCFF\n}\n\n.passage {\n /* This only affects passages */\n color:#000000;\n size: 16pt;\n}\n.passage a {\n /* This affects passage links */\n color:#828282;\n \n}\n.passage a:hover {\n /* This affects links while the cursor is over them */\n color:#00CCFF;\n text-decoration:none;\n\n \n}
Variables provide a lot of flexibility with your game design. They can be used to track where the reader has been, change passages depending on a set of variables, and create an inventory. \n\nFirst, variables must be defined in the Start passage:\n[img[startvariables.png]]\n\nThe use of the "$" lets Twine know that you are using a variable. Note that there can't be any spaces in variables.\n\nWhen you want a variable to change, use the same code, but ths time, write it in the passage where the change will occur. To reset the values:\n[img[changevariables.png]]\n<<silently>>\n<<set $visit_variable_passage = "true">>\n<<set $dollars = 100>>\n<<endsilently>>\n\nIf you want to display your variables, you can use the print function like this:\n[img[dollarsvariable.png]]\n\nWhich turns out like this:\nYou have <<print $dollars>> dollars.\n\nThen, if you [[add conditionals|Add conditionals]], you can use variables to affect the outcome of the story.\n
To link to a passage, add the title of the page in double brackets. \n\n[img[link.png]]\n\nTwine lets you know that links are working by displaying them in blue, like the ones above. Broken links appear in red. \n\nWhen linked, the story map will show an arrow between the passages. When passages are linked both ways, there are arrows going each way.\n\n[img[arrows.png]]\n\nYou can also have the link display text other than the story title like this: \n[[link|Hidden link title]]\n\n[img[hiddenlink.png]]\n\n\n\nBack to [[Basics]]
Intro to Twine
I want to:\n\n[[Add choices]]\n[[Add variables]]\n[[Add conditionals]]\n[[Add and use tags]]\n[[Randomization]]\n[[Add scripts]]\n[[Hide code]]
Adding links to other websites takes a tiny bit of html. Use the code below to make a link like this: \n\n<html>\n<a href="http://www.twinery.org">\n Twine website\n</a>\n</html>\n\n[img[twinelink.png]]\n\nBack to [[Basics]]
I want to:\n\n[[Download Twine]]\n[[Start a Twine]]\n[[Add passages]]\n[[Add images]]\n[[Link passages]]\n[[Add external link]]\n[[Format text]]\n[[Add title and author]]\n[[Test play story]]\n[[Publish story]]
Twine comes with three formats: [[Sugarcane]], [[Jonah]], and [[Responsive]]. These affect the look and behavior of your Twine. Some features are only available in some formats, so you'll need to consider the goals of your Twine before choosing a format.\n\nBack to [[Format and Design]]
--let the player undo moves? (on / off)\n--in sugarcane, this enables the browser's back button.\n--in jonah, this lets the player click links in previous\n--passages.\n\nundo: on\n\n--let the player use bookmarks? (on / off)\n--this enables the bookmark links in jonah and sugarcane\n--(if the player can't undo, bookmarks are always disabled.)\nbookmark: on\n\n--obfuscate the story's html source to prevent possible\n--spoilers? (swap / off)\n\nobfuscate: off\n\n--string of letter pairs to use for swap-style obfuscation\n\nobfuscatekey: cbwzadmivxhgsfuryjnqklotpe\n\n--include the jquery script library? (on / off)\n\njquery: off\n\n--include the modernizr script library? (on / off)\n\nmodernizr: off\n
Back to [[Link passages]]\nBack to [[Basics]]
Random passage three
To add a passage, click on the New Page icon in the top left corner or press Command+N for a shortcut. The new passage will appear in the top left corner. \n\n[img[newpage1.png]]\n\nBack to [[Basics]]
Tags add information to passages that aren't visible to players. Tags can be anything that help you keep your story organized, and they are case sensitive. There are also Twine-specific tags.\n\n"stylesheet" - A CSS stylesheet\n"script" - A Javascript that will run before the story starts\n"bookmark" - A passage that will appear in Sugarcane's rewind menu\n"transition" - Signifies that the stylesheet defines a CSS transition. Only use this along with "stylesheet".\n"Twine.private" - A passage that will not be included in the finished HTML file\n\nFrom <html><a href="http://twinery.org/wiki/%5Btag%5D%5d?redirect=1">Twine Wiki</a></html>\nBack to [[Advanced]]
version.extensions.cyclinglinkMacro={major:3,minor:3,revision:0};\nmacros.cyclinglink={handler:function(a,b,c){var rl="cyclingLink";\nfunction toggleText(w){w.classList.remove("cyclingLinkInit");\nw.classList.toggle(rl+"Enabled");w.classList.toggle(rl+"Disabled");\nw.style.display=((w.style.display=="none")?"inline":"none")}switch(c[c.length-1]){case"end":var end=true;\nc.pop();break;case"out":var out=true;c.pop();break}var v="";if(c.length&&c[0][0]=="$"){v=c[0].slice(1);\nc.shift()}var h=state.history[0].variables;if(out&&h[v]===""){return\n}var l=Wikifier.createInternalLink(a,null);l.className="internalLink cyclingLink";\nl.setAttribute("data-cycle",0);for(var i=0;i<c.length;i++){var on=(i==Math.max(c.indexOf(h[v]),0));\nvar d=insertElement(null,"span",null,"cyclingLinkInit cyclingLink"+((on)?"En":"Dis")+"abled");\nif(on){h[v]=c[i];l.setAttribute("data-cycle",i)}else{d.style.display="none"\n}insertText(d,c[i]);if(on&&end&&i==c.length-1){l.parentNode.replaceChild(d,l)\n}else{l.appendChild(d)}}l.onclick=function(){var t=this.childNodes;\nvar u=this.getAttribute("data-cycle")-0;var m=t.length;toggleText(t[u]);\nu=(u+1);if(!(out&&u==m)){u%=m;if(v){h[v]=c[u]}}else{h[v]=""}if((end||out)&&u==m-(end?1:0)){if(end){var n=this.removeChild(t[u]);\nn.className=rl+"End";n.style.display="inline";this.parentNode.replaceChild(n,this)\n}else{this.parentNode.removeChild(this);return}return}toggleText(t[u]);\nthis.setAttribute("data-cycle",u)}}};
Download Twine from <html> <a href="http://twinery.org"> Twinery.org </a> </html>\n\nBack to [[Basics]]\n\n
Although any code you write won't show up in your Twine, it does still create white space like this:\n\n[img[unsilently.png]]\n[img[unsilently2.png]]\n\nIf you enclose your code with the "silently" function, you won't leave any white space in your Twine.\n\n[img[silently.png]]\n[img[silently2.png]]\n\nBack to [[Advanced]]
<<if $visit_variable_passage = "true">>You already know how to use variables, so keep going!<<else>>Maybe you should learn about variables first.<<endif>>
To change to look of your Twine, create a stylesheet passage and use CSS code. Add a stylesheet by selecting "Story » New » Stylesheet." \n\n[img[stylesheet2.png]]\n\nThis stylesheet appears with four sections built in that will affect the style of the body, passage, link, and mouse hover. Add code into these sections depending on what you want to change. \n\nFor a list of Twine CSS selectors, check out <html><a href="http://twinery.org/wiki/stylesheet">Twine wiki</a></html>.\nFor some free prebuilt stylesheets that you can modify, check out <html><a href="http://www.glorioustrainwrecks.com/node/5163">Glorious Trainwrecks</a></html>.\n\nBack to [[Format and Design]]
[img[random.png]]\n\n<<silently>><<set $randompassage = either("One", "Two", "Three")>><<endsilently>>\nClick [[here|$randompassage]] to test out the random passage.\n\n
Random passage one
*This feature only works in the format [[Jonah]]. In [[Sugarcane]], this creates a normal link. To simulate choices in Sugarcane, you can turn off the "undo" setting in the StorySettings passage, which will not allow your player to go back.\n\nWhile [[Link passages]] is one way to connect your story, you can also give the player choices so that a passage provides one or more options to choose between. After the choice is made, the other options are removed. \n\nTo insert a choice, use two less than signs, write "choice" and then the title of the passage in quotations marks, and close this off with two greater than signs like this:\n\n[img[choices.png]]\n\nIf a player returns to this page, the other options are greyed out. Note that choices and links look the same, so your player might not know when they are making choices and when they are following links. \n\n\nBack to [[Advanced]]
When you open Twine, select File » New Story. The screen will now display three boxes. The box labeled "Start" is your first passage and where your story will begin. Double click to edit the text. \n\nNote: Other titles are your choice, but this first one must remain "Start." All titles are case sensitive. \n\n[img[startscreen.png]]\n\n\nSave "File » Save Story" or Command + S. Save often!\n\nBack to [[Basics]]
After setting up [[variables|Add variables]], you can use them in conditional statements to produce different outcomes in your Twine. An if/else statement can be used to display a different passage based on previous decision. \n\nFor example, this if/else statement will display the first message: "You already know how to use variables..." if you have been to the passage [[variables|Add variables]]. If you haven't, the passage will display the second message: "Maybe you should learn..."\n[img[ifelse.png]]\n\nCheck out the difference on [[this|variables test]] page.\n
Responsive is a variation on Sugarcane, designed to work on mobile browsers. Players can only see one passage at a time.\n\n[img[responsive.png]]\n\nBack to [[Change format]]\nBack to [[Format and Design]]
Brandee
To publish your story, select "Build » Build Story." Then title and save the html file. To share this with others, you can upload to Dropbox. If you want to upload it to the internet, <html><a href="http://philome.la">philome.la</a></html> hosts Twines for free. \n\nBack to [[Basics]]
Other than selecting a story format, this passage is another way to control how your Twine behaves. Insert this page at Story » Special Passages » Story Settings. \n\n[img[storysettings.png]]\n\nIn this passage, there are four settings that you can turn on or off: undo, obfuscate, jQuery, and Modernizr. Undo allows your player to use the back button to return to a previous passage, but if you turn it off, players will be locked into their choices and have to restart the story to try a different path. This is one way to make a Sugarcane format resemble Jonah's ability to create choices. \n\nBack to [[Format and Design]]