Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
<<audio "song" play>>Sound, like sweeping changes to [[background]], requires some advanced editing in Twine.
(Tired of the music on this page? <<link "Click here to stop it">><<audio "song" stop>><</link>>.)
* Save your audio file to the same folder as your Twine .html files. //Wherever possible, use .mp3 files, as these are standard across most browsers.//
* Create a special passage named "<a target="_blank" href="https://www.motoslave.net/sugarcube/2/docs/#special-passage-storyinit">StoryInit</a>".
<img src=storyinit.png>
* Cache the audio using the {{{<<cacheaudio>>}}} macro in the StoryInit passage. Use the code {{{<<cacheaudio "soundID" "filename.mp3">>}}} to load the sound as soon as the game loads.
<img src=cacheaudio.png>
The second term is the sound file's ID (which will be important in the next step), and the last is the actual filename of the sound you are calling.
* Now, go to the passage where you want to use sound, and use the "<a target="_blank" href="https://www.motoslave.net/sugarcube/2/docs/#macros-macro-audio">audio</a>" macro to play the sound: {{{<<audio "soundID" play>>}}}
<img src=audio.png>
//Make sure you get the file name correct -- it's easiest just to select it in its directory, and copy-paste into your Twine passage.//
''Testing audio'': to test that your audio works, you'll need to "Publish to File" (the same as you do when you <<link "save your Story">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>), then load the saved html file in your Internet browser.
All good? Try some other functions, like <<link"images">><<audio "song" stop>><<goto [[images]]>><</link>>, <<link"styling">><<audio "song" stop>><<goto [[background]]>><</link>>, or just return to <<link"start">><<audio "song" stop>><<goto [[Start]]>><</link>>.Changing background colors, font types, and other general changes to the look of your story/game may require some CSS styling. If you only want to change a line or two, in-line styling as described [[here|colors]] is fine. But if you want consistent changes throughout the story/game, you might want to start up a [[CSS stylesheet|http://twinery.org/wiki/stylesheet]].
Here are the basics:
* Click on the name of your story in the lower left-hand corner to open the menu, and click "Edit Story Stylesheet".
<img src=menu.png>
* Let's start with changing the background of the entire site.
<img src=cssbg.png>
* You'll see in the above image that we've also already added the code for the background change, under the "body {" selector:
{{{background-color:blue;}}}
* You can use whatever color you like -- here are some resources [[by color name|http://www.w3schools.com/cssref/css_colornames.asp]] or by [[hexadecimal color picker|http://www.colorpicker.com/]].
* This changes the background of ALL your passages.
<img src=bluebg.png>
Want to [[change the background of only SOME passages|background2]]?
Or return to [[start|Start]].
To add images you've found online, first make sure they are available for you to use (i.e., saved under a [[Creative Commons license|http://creativecommons.org]], under public domain, or you've obtained permission from the owner). Then make sure you <a href="IP_Record.docx">log all the information you'll need to credit the source</a>.
//Tip: Google Images can search just for images that are okay to use. Click "Tools", then "Usage Rights" and "Labeled for reuse".//
<img src=gimg.png>
Find the URL for the image you want to use. Usually, you can find this by right-clicking the image and selecting "Copy Image URL":
<img src=copyimgurl.png>
Or keep clicking on the image until the URL in your address bar ends with an image tag (.jpg, .png, .gif), then copy the entire URL:
<img src=imgurl.png>
Then, to insert your image, you just enter in the following code: {{{[img[URL]]}}}
<img src=webimg.png>
That's just one square bracket, the text "img", another square bracket, the URL of the image file pasted into place, then two closing square brackets.
Now [[test play|testBuild]] your story, and see where the images show up!
Want to add [[images you've saved to your computer|ImgSaved]], [[sound]], [[external links|ExtLinks]], or change [[background]] or [[colors]]?
You can also review the basics starting [[here|Start]].[[Start Page|Start]]
[[The Basics|firstStep]]
<<link "Saving">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>
[[Testing|testBuild]]
[[Internal Links|IntLinks]]
[[External Links|ExtLinks]]
[[Colors|colors]]
[[CSS Basics|background]]
[[Images|images]]
[[Sound|sound]]
[[Sharing & Publishing|sharing]]
[[Other Tutorials|tutorials]]
To download this tutorial's source file:
* Right-click (Mac: Cmd-click) anywhere on this page and select "Save As..."
* Save the .html file, then open it in Twine.Creating links to external websites is pretty easy. In fact, it's almost the same as [[adding links to other passages|IntLinks]]:
<img src=extlink.png>
The code is exactly the same, except instead of slotting in a passage title, you copy and past the [[website URL|http://docs.oracle.com/javase/tutorial/networking/urls/definition.html]]. Easy, right?
Now maybe you want to try something more complicated, like adding [[images]] or [[sound]], or changing [[background]] or [[colors]]. Don't forget to [[save and test your story|testBuild]]!If you want to change elements of only SOME passages, you'll need to use //Tagged Passages// and the //Story Stylesheet//.
For this tutorial, we'll use the background property as an example, but you can do this with any element of these tagged passages, including fonts, colors, images, and more.
* Tag the passages where you want the changed elements to occur by clicking "+tag" and typing in the tag. //Make sure the tag is the same on each passage it is used!//
<img src=tag1.png>
<img src=tag2.png>
* For changes to occur in only tagged passages, open the Story Stylesheet, and create properties for them by appending the property title with ".tag". In this example, the tag is "yellow" - in order to change //body// elements of these passages, the CSS code is "body.yellow":
<img src=yellow.png>
<img src=yellowshow.png>
You can do this with any CSS element, and mix and match tags throughout the passages.
Now, how about other features, like [[sound]], [[images]], and other [[tutorials]]? Or, you could just return to [[start|Start]].Now you'll want to link your created passages together. Here's where you're going to start coding!
Double-click on a passage to edit it, or create a new passage. When you give your new passages titles, make sure to keep them short and simple.
To link from one passage to another, you use a simple bit of coding: two square brackets.
<img src=intlinks.png>
This passage shows two ways to create internal Twine links:
<ol>
<li>Simply place a set of square brackets around the title of the destination passage.</li>
<li>Or if you want the <em>linked</em> text to be different from the title of the destination passage, use this notation: {{{[[link text|passageTitle]]}}}. That's two square brackets, the text you want your reader to click, a vertical line (on most keyboards, this is located as part of the forward-slash key), the title of the passage you're linking to, then two square brackets.</li>
</ol>
When it is published in a browser, that passage will look like this:
<img src=intlinkspub.png>
//Note: If you link to a passage title that doesn't exist yet, Twine will create the passage for you automatically. This is a quick way to create the passages your story needs.//
This brings up an important point: coding is picky! You have to get the sequence JUST RIGHT for it to work -- that means capitalizations, spaces, spelling, symbols...//everything//.
[[So now let's test that it worked!|testBuild]]The first step is to access <a target="_blank" href="http://twinery.org/">Twine</a>. You can either download it to your computer, or use it in your Internet browser. ''Note: if you are using Twine in your Internet browser, you should frequently <<link "save">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> your game; it can easily be wiped out if you clear your Internet history.''
The Twine home screen looks like this:
<img src=twinehome.png>
To start a new story, click the <img class="button" alt="+Story" src=newstory.png> button. Name your story, and click "Add".
<img src=namestory.png>
Your story will open in the Twine interface. This is Twine's basic working area.
<img src=canvas.png>
First, let's set the Story Format to match this tutorial. Click the title of your story in the lower left-hand corner, and select "Change Story Format".
<img src=menu.png>
Select the latest version of Sugarcube, then close the dialog box.
<img src=sugarcube.png>
[[Now we can start creating a story!|passages]]Let's make a Twine story. The basics are pretty easy!
In fact, this tutorial was completely written in Twine, and you can download the source file to see how it was done! Just right-click (Mac: Cmd-click) anywhere on this page and select "Save As..." Save the .html file, then open it in Twine.
[[Start from the bare basics|firstStep]]
[[Learn how to create links to other passages|IntLinks]]
[[Learn how to create links to external websites|ExtLinks]]
[[Learn how to change the colors|colors]]
[[Learn how to add images|images]]
[[Learn how to add sound|sound]]
[[See the list of other useful tutorials and resources|tutorials]]
/%See how this text is in gray, and it doesn't show up in the story when you test/build it? That's because it's a "comment" - it appears when you're coding the story, but not in the final version itself. You can use these comments to write notes to yourself.%/
You can easily change the colors of the text in each passage by using the following CSS coding:
{{{@@color:red;Red text!@@}}}
Which will look like this:
@@color:red;Red text!@@
You can use whatever color you like -- here are some resources [[by color name|http://www.w3schools.com/cssref/css_colornames.asp]] or by [[hexadecimal color picker|http://www.colorpicker.com/]].
You can also change the spacing of the letters, the type and size of the font, and other [[CSS inline elements|http://www.w3schools.com/cssref/default.asp]]:
{{{@@color:red;letter-spacing:3px;font-size:1.5em;Red text!@@}}}
@@color:red;letter-spacing:3px;font-size:1.5em;Red text!@@
To change the background color of a line, use the following code:
{{{@@background-color:red;Red background!@@}}}
@@background-color:red;Red background!@@
These are inline changes -- if you want to make general changes to your story/game, it would be better to use a [[CSS stylesheet|http://twinery.org/wiki/stylesheet]].
The basics of CSS stylesheets are described [[here|background]], or you can go back to the [[Start|Start]] for other functions.The text and coding you're putting into the Twine storymap is not what your readers will actually see once you publish your story -- this is the case with any website, game, or app.
So, as a digital developer, you'll want to regularly check that your //published// piece works and looks the way you designed it to. Twine has an easy way to do this.
* First, make sure you <<link "save your work">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>.
* Now to test the story, simply click the <img class="button" alt="Play" src=play.png> button in the lower right-hand corner.
If you are using the browser version, this will simply add a new tab with your game in it. If you are using the desktop version, this will open a default Twine browser window.
* Once it's opened in your browser, you can play it and see if it's looking and working like you want it to.
<img src=testplay.png>
* Once you're happy with your story, you can [[publish and share it|sharing]].
So those are the basics -- you can build a story using nothing more than these tools.
You can also change the look of your [[text|colors]] and [[background]], and add things like [[images|images]], [[sounds|sound]], and [[external links|ExtLinks]].//Note: ''Only'' use this option if you will be [[publishing|sharing]] your Twine Story to your own server (e.g., you have your own website). If you don't have your own server and will be publishing through a Twine server such as [[Philomela|http://www.philome.la/]], ''all'' of your resources (images, sounds, etc.) will need to be <<link "hosted online">>
<<script>>
Dialog.setup("resourceHosting", "info");
Dialog.wiki(Story.get("resourceHosting").processText());
Dialog.open();
<</script>>
<</link>>, and you'll need to use the [[steps for adding online images|ImgOnline]].//
* To add images you've saved to your computer, first make sure they're <<link "saved">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> to the same folder as your Twine story's .html file.
//If they're not in the same folder as the .html file, then they won't show up when you publish your story.//
* Then, to insert your image, you just enter in the following code:
{{{<img src=blerg.jpg>}}}
That's just one square bracket, the text "img", another square bracket, the name of the image file, then two closing square brackets.
* Now [[test play|testBuild]] your story, and see where the images show up!
Want to add [[images you've found online|ImgOnline]], [[sound]], [[external links|ExtLinks]], or change [[background]] or [[colors]]?
You can also review the basics starting [[here|Start]].<div class="title">Lyle's Twine Basics</div>If you thought adding images was going to be more complicated than adding links, you were so wrong. It's almost easier!
There are two categories of images you can include in your Twine story: [[images saved on your computer|ImgSaved]] or [[images you've found online|ImgOnline]] //(don't forget to write all necessary information down about other people's images you find online -- you'll want to include a credits passage to give them their fair dues!)//.
<div class="title">''Twine 2/Sugarcube 2''
Dr. Lyle Skains
Bangor University</div>Here are some other excellent tutorials and resources you can use to build your Twine stories:
* [[The Twine Wiki|http://twinery.org/wiki/]] -- everything you need to [[get started|http://twinery.org/wiki/start]], including terminology, [[syntax|http://twinery.org/wiki/syntax]], tutorials, forums, and documentation.
* [[The Twine Cookbook|https://twinery.org/cookbook/]] -- a resource of examples of different things you can do in Twine.
* [[Sugarcube 2 Documentation|https://www.motoslave.net/sugarcube/2/docs/]] -- all the things you can do in Twine's Sugarcube 2 Story Format.
* [[Adam Hammond's Twine Guide|http://www.adamhammond.com/twineguide/]] -- a great starting tutorial, including ''videos''.
* [[Twine Q&A|http://twinery.org/questions/]] -- a forum where people ask and answer questions about worknig in Twine.
* [[CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs|https://twinery.org/forum/discussion/1528/css-is-your-friend-the-basics-of-changing-twines-default-appearance-for-newbs]]
* [[Some good CSS pointers (sample CSS stylesheet)|http://pastebin.com/Lb7KrHrZ]]
* [[CSS Properties Reference|http://www.w3schools.com/cssref/default.asp]]
* [[CSS Selectors Reference|http://www.w3schools.com/cssref/css_selectors.asp]]
* [[Color Picker (Hexadecimal)|http://www.colorpicker.com/]]
* [[The Interactive Fiction Database|http://ifdb.tads.org/]] -- find Twine stories/games to play, and post your own!
* [[Philomela|http://www.philome.la/]] -- publish your Twine story/game for free.
* [[Neocities|https://neocities.org/]] -- publish your Twine story/game for free.
* [[Adventure Cow|http://adventurecow.com/]] -- publish your Twine story/game for free.
* [[itch.io|http://itch.io]] -- an indie game publishing site that features a lot of Twine games.
Looking for more? I keep a running list of more [[advanced Twine tricks here|https://www.evernote.com/pub/roseslug/twine]].
Return to [[start|Start]].<div class="info">Twine saves your work two ways: //Autosave to cache// and //Publish to file//
//Autosave to cache// just means Twine is automatically saving everything you do to a temporary cache file. If you're working in the online version, it's saving to your browser's history cache. If you're working in the desktop version, it's saving to a cache on your hard drive.
''These autosaves are easily wiped out!!!'' So you'll want to make sure you are frequently publishing to file:
Click on the name of your story in the lower left-hand corner to open the menu, and click "Publish to File".
<img src=menu.png>
This will prompt you to save the .html file to your computer. You can name it anything you want, though it's easy enough to keep it as the story name. Save it somewhere you know you can find it.
//Note: once you start adding images and other file types to your story, you'll want to save them in the same location as your .html file.//</div>The "Untitled Passage" box you see here is a //passage//. Double-click on it, and you'll be able to edit it:
<img src=passage.png>
//A helpful tip: if you delete the default text in the body of the passage, it will reveal a lot of useful tips for formatting and linking your text.//
<img src=passagetips.png>
Each passage will need a title and text in the passage.
<img src=titletext.png>
You can enter as much text as you like -- each Twine passage is like a page in a story or website.
Play around with creating a few passages in Twine by clicking the <img class="button" alt="+Passage" src=addpassage.png> button.
[[Once you have a few passages, you'll need to link them together...|IntLinks]]
/%See how I've put in an external html link here to Twine? That's the basic html coding for links - two square brackets, followed by the text that will be the linking word, a vertical line, linked location, and two closing square brackets:
[[linking text|http://URLtoweb.com]]
%/What's the point of creating a game if no one can play it, right? So let's publish our games so we can share them with friends.
* When your game is ready to publish, <<link "Publish it to File">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> just as you do when saving your game.
* If you have your own web hosting service, you can use that to post the html files. If not, move on to the next step.
* Select a free Twine hosting service: [[Philomela|http://www.philome.la/]], [[Neocities|https://neocities.org/]], [[Adventure Cow|http://adventurecow.com/]], and [[itch.io|http://itch.io]] are the most common (Philomela is probably the easiest, though you need a Twitter account).
//Note that if your Twine game incorporates images, audio, or other files outside of the exported html file, you'll need to [[host these online somewhere|resourceHosting]].//
* Upload your html file, and retrieve the web address.If you are publishing your Twine game through a service like [[Philomela|http://www.philome.la/]], you can only upload your Twine html file - not all the assets, like images and sound, that go along with it.
So if you're using external assets (images, sound), you'll need to host them somewhere else online, using a hosting service such as:
''All File Types''
* [[Dropbox|https://www.dropbox.com/]]
* [[Google Drive|https://drive.google.com]]
* [[4shared|https://www.4shared.com/]]
''For Images''
* [[Google Photos|https://www.google.com/photos/about/]]
* [[Imgur|http://imgur.com/]]
* [[Flickr|https://www.flickr.com/]]
* [[Free Image Hosting|http://www.freeimagehosting.net/]]
* [[Tinypic|http://tinypic.com/]]
* [[PostImage|http://postimage.org/]]
* [[ImageShack|http://imageshack.us/]]
* [[PhotoBucket|http://photobucket.com/]]
* [[500 Pixels|http://www.500px.com/]]
* [[Droplr|https://droplr.com/]]
* [[ImgBox|https://imgbox.com/]]
Upload your file to one of these services, and locate its web URL.
For images, you can locate the web URL by right-clicking on the image and selecting "Copy Image Address". The file address //must// end in an appropriate file extension for the type of resource it is. Typically, these are .jpg, .png, .gif
<img src=imgaddress.png>
Use this link in place of the filename when adding your image to a Twine passage.
<img src=imgaddress2.png>
For sound files, you'll need to use a file-sharing service like Dropbox or Google Drive.
''For Dropbox''
* Upload the file to Dropbox, then [[share it so you get a sharing link|https://www.dropbox.com/help/files-folders/view-only-access]]. Copy this link.
* The end of the sharing link should be "dl=0". Change the 0 to a 1.
* Use this link in place of the filename when adding your sound to the "cacheaudio" micro in your StoryInit file.
<img src=soundlink]]
For Google Drive, follow [[these instructions|https://www.labnol.org/internet/direct-links-for-google-drive/28356/]] to get the URL to put into the "cacheaudio" macro. //Note: Dropbox works much better.//
<<cacheaudio "song" "RetroMusiciStock_000011160348Wav44100.mp3">>