Twine tutorial

These macros allow users to variously change a passage's content by mouse clicking on highlighted features. 1. The "( click: )" macro adds text after clicking on a keyword or phrase a. There is a small dish of water. (click: "dish")[Your finger gets wet.] b. [Fie and fuggaboo!]<shout| (click: ?shout)[Blast and damnation!] This works for images too! At the bottom of the old filing cabinet is a strange picture. (click: "picture")[<img src="mickey.jpg" width="300" height="500" alt="mickey">] 2. The ( click-replace:) macro replaces text after clicking on a keyword. a. Twelve times twelve is an unknown number (click-replace: "an unknown number")[144] b. My deepest secret. (click-replace: "secret")[longing for you] 3. The ( click-append: ) macro appends phrases into a line of text a. I have nothing to fear. (click-append: "fear")[ but my own hand] b. The locked door was frustrating. (click-append: "was")[ beyond] Note that all of these macros apply universlly to the passage you're working in. For example if you assign a click-replace macro to the word "small" (click-replace: "small")[deep] it will alter all instances of the word in that passage when one instance of the word/phrase is clicked.

This tutorial will demonstrate some of the useful ways that Twine content can be manipulated and enhanced... Table of contents: 1. [[Click Macros]] 2. [[Mouseover Macros]] 3. [[Mouseout Macros]] 4. [[Using Images in Twine]] 5. [[Using Video in Twine]] 6. [[Using Audio in Twine]] 7. [[Using Popups in Twine]] [[Tips for world designers]] [[Tips for character/dialogue designers]] [[Colours styles and fonts]] [[Textual Formatting]] [[Creative text styles]]

This functions the same way as the click macro, but doesn't require a mouse click to alter the content. Users generate the desired effect by moving their mouse pointer over the selected text. 1. The "( mouseover: )" macro adds text after clicking on a keyword or phrase a. There is a small dish of water. (mouseover: "dish")[Your finger gets wet.] b. [Fie and fuggaboo!]<shout| (mouseover: ?shout)[Blast and damnation!] This works for images too! At the bottom of the old filing cabinet is a strange picture. (mouseover: "picture")[<img src="mickey.jpg" width="300" height="500" alt="mickey">] 2. The ( click-replace:) macro replaces text after clicking on a keyword. a. Twelve times twelve is an unknown number (mouseover-replace: "an unknown number")[144] b. My deepest secret. (mouseover-replace: "secret")[longing for you] 3. The ( mouseover-append: ) macro appends phrases into a line of text a. I have nothing to fear. (mouseover-append: "fear")[ but my own hand] b. The locked door was frustrating. (mouseover-append: "was")[ beyond] Note that all of these macros apply universlly to the passage you're working in. For example if you assign a click-replace macro to the word "small" (mouseover-replace: "small")[deep] it will alter all instances of the word in that passage when one instance of the word/phrase is clicked.

5. The ( mouseout: ) macro A variation of ( click:) that, instead of showing the hook when the target is clicked, shows it when the mouse moves over it, and then leaves. The target is also styled differently, to denote this hovering functionality. Rather than making the target a link, it makes the target reveal the hook when the mouse stops hovering over it. This is very similar to clicking, but is subtly different, and conveys a sense of "pointing" at the element to interact with it rather than "touching" it. 1. The "( mouseout: )" macro adds text after clicking on a keyword or phrase a. There is a small dish of water. (mouseout: "dish")[Your finger gets wet.] b. [Fie and fuggaboo!]<shout| (mouseout: ?shout)[Blast and damnation!] This works for images too! At the bottom of the old filing cabinet is a strange picture. (mouseout: "picture")[<img src="mickey.jpg" width="300" height="500" alt="mickey">] 2. The ( click-replace:) macro replaces text after clicking on a keyword. a. Twelve times twelve is an unknown number (mouseout-replace: "an unknown number")[144] b. My deepest secret. (mouseout-replace: "secret")[longing for you] 3. The ( mouseover-append: ) macro appends phrases into a line of text a. I have nothing to fear. (mouseout-append: "fear")[ but my own hand] b. The locked door was frustrating. (mouseout-append: "was")[ beyond] Note that all of these macros apply universlly to the passage you're working in. For example if you assign a click-replace macro to the word "small" (mouseout-replace: "small")[deep] it will alter all instances of the word in that passage when one instance of the word/phrase is clicked.

If you want to include images in your story, you can either link to externally hosted images or package your images with your twine export file. Including all of the neccessary images with your exported Twine file is a better strategy, as you're not dependent on remote (and sometimes unreliable) hosts. Example of a locally hosted image: Include images in the same folder as your published/exported html file (in which case, your img src will just be the filename of your image): <img src="mickey.jpg" width="150" height="180" alt="mickey"> Example of a remotely hosted image: <img src="https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg" width="150" height="180" alt="kermit" > The width and height part of the code control the size of your image on the page. If you leave them off, then it will display the image in the dimensions it was saved in. Example of a remotely hosted .gif file: <img src="https://media2.giphy.com/media/XIqCQx02E1U9W/200.gif#1" alt="kermit"> The same image, but locally hosted: <img src="kermit.gif" alt="kermit">

Like images, videos can be remotely or locally hosted. The advantage with hosting locally is that you don't have to worry about ads, or additional autoplayed content after your video finishes. Example of a locally hosted video: <video src="rogue.mp4" controls width="640" height="480"> </video> Example of a remotely hosted video: <iframe width="560" height="315" src="https://www.youtube.com/embed/vP_1T4ilm8M?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Adding an audio file or sound effect uses the same format as adding an image or video file. While you can link to the URL of externally hosted, web-based sounds, it's advisable to package (locally host) your audio files with your finished and exported Twine file (include audio files in the same folder as your published/exported html file). **NOTE: Locate your embedded audio source code AFTER any other content on the page. Anything below the audio src link will not display on the page! An example of a locally hosted audio file is playing now! In addition to music, you can use audio to provide [[environmental sound effects]]. <audio src="beethoven.mp3" autoplay>

You can use short sound effects to add texture to a passage and enhance the user's experience of your story beyond simple text descriptions. You can also associate sound effects with [[click]] macros and [[mouseover]] macros <audio src="birds.mp3" autoplay>

There is a small dish of water here. (click: "dish")[<audio src="water.mp3" autoplay>]

There is a small dish of water here. (mouseover: "dish")[<audio src="water.mp3" autoplay>] There is a breakable vase here. (mouseover-replace: "breakable vase")[broken vase <audio src="glass.mp3" autoplay>]

Tips for Level/World Designers: 1. Treat the visual layout of twine like a map to proofread your story: you can easily see where players are allowed to go by looking at this overall map. 2. Since you can’t have 2 passages in Twine with the same name, if you want to have players to appear to return to a passage that they have already been in, just clone the room as a different passage and insert a space before the name of the new passage. 3. Remember that the passage name need not always show up as the text to click. Using a “|” or “->”, you can define some text that is in place of the passage’s name. The following example takes you to a passage titled "Cellar" but the highlighted text is "staircase": There is a creaky and unstable [[staircase->Cellar]] leading down into the darkness 4. Become familiar with the way to eliminate the use of the browser backbuton and the default undo/redo Twine buttons • Eliminating “back button” in browser (so players can’t cheat and retrace their steps): Copy and paste this code into your “Story Stylesheet:” /* No sidebar */ `#sidebar {display:none;}` • Eliminating the undo and redo buttons in Twine so that players can’t backtrack: Copy and paste this code into your “Story Stylesheet:” .redo {display:none;} .undo {display:none;}

It's dark. You'd better go back [[upstairs |Tips for world designers]].

• In Twine, treat your characters and dialogue as rooms and branching passages, respectively. • Map your conversations carefully, and use conversations as points where your story branches and bottlenecks. You can also use conversations as opportunities to take players to other rooms that aren’t on the main map. • Since characters don’t have “memories” here, you may need to create multiple passages that appear to be the same character or room.

####CHANGING FONT STYLE IN A PASSAGE <span style='font-family: arial'> Some basic font choices include arial, times, san-serif, serif. This is arial.</span> Explore other web safe font styles <a href="http://www.w3schools.com/CSSref/css_websafe_fonts.asp" target="_blank">here</a> and many additional google fonts options <a href="http://www.w3schools.com/howto/howto_google_fonts.asp" target="_blank">here</a> ####CHANGING TEXT COLOR IN A PASSAGE <span style="color: red;"> affected words</span> ####CHANGING LINK COLORS IN A PASSAGE [[<span style="color: green;">affected link</span>->New Link]] ####INSERTING A HORIZONTAL DIVIDER: --- ####CREATING BULLETED LISTS * Bulleted item * Bulleted item 2 ** Indented bulleted item ####CREATING NUMBERED LISTS 0. Numbered item 0. Numbered item 2 0.0. Indented numbered item ####HEADER SIZES: Use # at the beginning of a line. The resizing will be in play until the next line break. Thus #####help ###help #help --- ####ALIGNMENT: To achieve the results below place these codes ABOVE the line to be affected. All following lines will be impacted until another code is used. ==> right-aligned =><= centered <==> justified <== left-aligned (undoes the above) ===><= margins 3/4 left, 1/4 right =><===== margins 1/6 left, 5/6 right, etc. <== --- ####EMPHASIS ''Bold text'' (This is two single quotation marks, not a double quote.) //Italic text// ^^Superscript^^ regular text ^^superscript^^

(transition: "pulse")[This is a pulse transition.] (transition: "dissolve")[This is a dissolve transition.] (transition: "shudder")[This is a shudder transition.] (text-style: "emboss")[This text is embossed.] (text-style: "superscript")[This text is superscript.] (text-style: "subscript")[This text is subscript.] (text-style: "bold")[This text is bold.] (text-style: "italic")[This text is italicized.] (text-style: "underline")[This text is underlined.] (text-style: "strike")[This text is strikethrough.] (text-style: "blink")[This text is blinking.] (text-style: "mark")[This text is marked.] (text-style: "outline")[This text is outlined.] (text-style: "shadow")[This text is shadowed.] (text-style: "emboss")[This text is embossed.] (text-style: "condense")[This text is condensed.] (text-style: "blur")[This text is blurry.] (text-style: "blurrier")[This text is blurrier.] (text-style: "smear")[This text is smeared.] (text-style: "mirror")[This text is mirrored.] (text-style: "upside-down")[This text is upside-down.] (text-style: "fade-in-out")[This text is fading in and out.] (text-style: "rumble")[This text is rumbling.] (text-style: "shudder")[This text is shuddering.] (text-rotate:25)[this text is rotated.] =><= (text-rotate:85)[(text-style: "blur")[(text-style: "rumble")[Text styles can be combined]]]

[[<span style="color: green;">Click to go back</span>->Textual Formatting]]

(alert:"Popups can be used to alert your players to something.") (set: $agreed to (confirm: "They can also be used to allow the player to accept or reject an opportunity, or to make a choice.")) (set: $name to (prompt: "And, finally, they can be used to collect data from players that can be used throughout the game. Please enter your name.")) Thanks $name! Return to the [[main menu->Twine Tutorial]]

Return to the [[main menu->Twine Tutorial]]

{ (print: "<script>$('html').removeClass(\)</script>") (if: (passage:)'s tags's length > 0)[ (print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>") ] }