#Let's Play - Twine
<iframe src="https://syllabus.trubox.ca/wp-admin/admin-ajax.php?action=h5p_embed&id=3" width="958" height="564" frameborder="0" allowfullscreen="allowfullscreen" title="Let's Play IV - Twine"></iframe><script src="https://syllabus.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
[[Getting Started: Passages and links|start]]
[[Making Your Game Look Awesome|css]]
[[Adding Images and Music or sounds|adding]]
[[Saving Your Work|saving]]
<h3 text-align="center">References</h3>
<p style="margin-left:.5in;text-indent:-.5in">Coccoli, M., Iacono, S., & Vercelli, G. (2015). Applying gamification techniques to enhance effectiveness of video-lessons. <em>Journal of e-Learning and Knowledge Society, 11</em>(3).</p>
<p style="margin-left:.5in;text-indent:-.5in">Eng, D. (2020, June 28). <em>What is gamification?</em> University XP. Retrieved October 26, 2021, from https://www.universityxp.com/blog/2020/4/30/what-is-gamification.</p>
<p style="margin-left:.5in;text-indent:-.5in">Figueroa-Flores, J. F. (2016). Gamification and game-based learning: Two strategies for the 21st century learner. <em>World, 3</em>(2).</p>
#Getting Started With Twine
The very first step is to find Twine online! Go to <a href="https://twinery.org/">https://twinery.org/</a> This is where your Twine adventure begins, you have the option to download Twine to your computer but for today we are going to use it online. Once you are at Twinery.org click the blue text "Use it online" located in the Post-it note.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/twine_homepage.jpg" alt="Twine Home Page" width="75%" height="75%" class="center">
You are welcome to skip the tips as we will go through this together!
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/skip.jpg" class="center" alt="Skip Twine tutorial">
To create a new Story click the green +Story button, on the next screen you will be prompted to give the Story a name.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/new_story.jpg" width="75%" height="75%" class="center" alt="New Story button on right and it is green">
Once you have filled in the name field click +Add
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/add.jpg" class="center" alt="Fill in the name field and click Add to create a new Twine Story">
Twine games are made up of passages. You will be taken to the editor view for your new story. If you hover over the passage you will have the option to trash it, edit it or play it. There is also an icon you can click to view more options. Click the pencil to edit your passage. Your page has two main areas, the title and the content area of the passage. The title is for you so title your passage something short but meaningful.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/passage.jpg" class="center" alt="This is the new passage screen">
To make your game all you need to know is how to make links between the passages. This is pretty easy, while you are editing a passage place double square brakets around text.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/doors.jpg" class="center" alt="Add double square brackets around text to create a new passage">
The text before the | is what the reader sees and the text after the | is the name of the passage you are linking to! Twine will create links to passages called leftdoor and rightdoor, which are easier to work with than the longer names.
Now you have a Story map!
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/storymap.jpg" class="center" alt="This story map has three linked passages.">
Now let's add a passage to the leftdoor so we can describe the Left Room. Hover over the leftroom and click the pencil icon to edit the passage. To link back to the entry or the rightdoor place double square brackets around text!
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/leftdoor.jpg" class="center" alt="The passage of text in the leftdoor.">
Now your story map looks more connected!
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/storymap2.jpg" class="center" alt="Two connections added to the story map">
At this point it is important to note that Twine does not automatically hyperlink URLs so you need to use the HTML `<`a`>` element with the href attribute.
`<`a href`=`"https://www.w3schools.com/html/html_links.asp">https://www.w3schools.com/html/html_links.asp<`/`a>
This code will hyperlink a URL
<a href="https://www.w3schools.com/html/html_links.asp">https://www.w3schools.com/html/html_links.asp</a>
You can also use the HTML `<`a`>` element with the href attribute to hyperlink to text.
`<`a href`=`"https://www.w3schools.com/html/html_links.asp">Learn more about HTML links<`/`a>
This code hyperlinks the text Learn more about HTML links
<a href="https://www.w3schools.com/html/html_links.asp">Learn more about HTML links</a>
---
What would you like to do next?
You can learn:
* [[how to make your game look great|css]]
* [[go back to the presentation|presentation]]
* [[learn how to add images and sounds|adding]]
* [[download your HTML file to save your work|saving]]
#Make Your Game Look Great!
So how do you alter the appearance of your story, how do you make it look nice? The answer is with CSS coding! Twine publishes to html files which means you can simply play them in the web and it also means anything you can do on the web you can do in Twine! I think it's important to know that every webpage you ever open on the web is styled with CSS. This means if you Google how to do something with CSS there will be way more recourses then you will ever need. We're not going to go into depth learning CSS here as that would be a course on it's own but we are going to provide you with some basic code so you change the looks of your game!
To edit your Twine story’s CSS, click on the name your story (located on the lower left side of your screen) from its main “story map” screen, then click on “Edit Story Stylesheet.” This will load a screen that is just an empty CSS file.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/editstyles.jpg" class="center" alt="Twine Story menu">
To change the background color of you game enter the following CSS code
tw-story `{`
background-color: white;
color: #424949;
font-family: Ariel,Impact,Helvetica,sans-serif;
font-size: 115%;
`}`
To change the color of linked text and to change the color that displays when you hover over linked text enter the following code
tw-link `{`
color: #1434A4;
`}`
tw-link:hover `{`
color: #6F8FAF;
text-decoration: none;
border-bottom: 4px solid #6F8FAF;
`}`
I want my images to be centered on the page, if you do to then enter the following code. We will go over how to add the "class" center when we go over how to add images to your game!
.center `{`
display: block;
margin-left: auto;
margin-right: auto;
`}`
Your story's stylesheet should look something like the one we made for this game below.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/stylesheet.jpg" class="center" alt="This story's CSS stylesheet shows how to cahnge the background color, hyperlinked tex and how to center images">
GOOGLE FONTS
You can change the primary font for your story in CSS. Google fonts has a visual guide to fonts to help you choose what to use.
<a href="https://fonts.google.com/">https://fonts.google.com/</a>
HEX CODES COLOUR PICKER
You can use this site to find and customize your Twine colour pallet using CSS or in Twine.
<a href="https://htmlcolorcodes.com/">https://htmlcolorcodes.com/</a>
---
What would you like to do next?
You can learn:
* [[about passages and links|start]]
* [[go back to the presentation|presentation]]
* [[learn how to add images and sounds|adding]]
* [[download your HTML file to save your work|saving]]
#Adding Images Music and Sounds
Adding images to your Twine game is as easy as adding HTML tags to your passage. You will need a hyperlink to an image, this is a bit more work if you are making your own images as you need a place on the internet to host them. We recommend using WordPress for this. You can simply upload your image your sites Media Library, click on it and copy the images URL that display in the attachment details!
Let's say our game has an entryway with two doors and you found an image on Unsplash you will download the image and upload it to your media library in WordPress then add the following image HTML tag to your passage. (If you copy and paste the text the image will display from my media gallery and that is OK)
`<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg">
Now let's say you want to center the image we will add the CSS center class we made.
`<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class`=`"center">
When we view the page we notice the image is huge! We will add the width ahd height attributes to the image tag! You can play with the percentages to see what works best for your game.
`<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class`=`"center" width`=`"50%" height`=`"50%">
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class="center" width="50%" height="50%">
<p align="center">Photo by <a href="https://unsplash.com/@balensiefenphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">James Balensiefen</a> on <a href="https://unsplash.com/s/photos/two-doors?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
UnSplash is nice as we can give credit to the photographer by simply copying the credit line they provide.
##Let's add some sounds!
If you are not making your own sounds then we recommend finding your sounds on Freesound. <a href="https://freesound.org/">Freesound is a collaborative database of Creative commons Licensed sounds!</a>
The following code will play the sound of a door opening! Once again we have to upload the audio file to our WordPress site and copy the URL into the audio HTML tag.
`<`audio src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/321086__benjaminnelan__open-door-1.wav" autoplay>`<`/audio>
---
What would you like to do next?
You can learn:
* [[about passages and links|start]]
* [[go back to the presentation|presentation]]
* [[learn how to make your game look great|css]]
* [[download your HTML file to save your work|saving]]
<audio src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/321086__benjaminnelan__open-door-1.wav" autoplay></audio>
#Saving Your Twine
Saving your Twine to your desktop is important especially if you are using Twine online!
The online version will save your work in your browser so it is very important to remember that if you or someone else clears your browser while you're working on your project, you could lose your work! To reduce the risk, it's good practice to archive your Twines or publish your Twines to file. Both are easy and both will import back into Twine.
If you have downloaded and installed Twine on your local computer your Twines will save to your documents folder. Please note that these files are for internal use only, do not save the Story HTML files you create using the Publish to File option within this folder or you could overwrite and lose the related Story Project file!
From your Home screen you can Archive your Twines and Import the Archive files. You can also publish your Twines from your Home screen. See the image below.
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/homepage.jpg" width="75%" heigth="75%" class="center"/>
You are also able to publish your story by clicking on the name your story (located on the lower left side of your screen) from its main “story map” screen, then click on “Publish to File.”
<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/editstyles.jpg" class="center"/>
Please note: If you are using the online verion of Twine an Archive or HTML file will automatically be downloaded if you have installed Twine you will be prompted to save your Archive or HTML file!
---
What would you like to do next?
You can learn:
* [[about passages and links|start]]
* [[go back to the presentation|presentation]]
* [[learn how to make your game look great|css]]
* [[learn how to add images and sounds|adding]]