#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&#039;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> <p text-align="center"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a>&nbsp;This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.</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/2022/10/twine_homepage2.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/2022/10/skip2.jpg" width="50%" height="50%" class="center" alt="Skip Twine tutorial"> To create a new Story click the green +New button, you will be prompted to give the Story a name. <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/new_story2.jpg" width="75%" height="75%" class="center" alt="+ New button in the menu on the left"> Once you have filled in the name field click Create <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/add2.jpg" width="50%" height="50%" class="center" alt="Fill in the name field and click Create to create a new Twine Story"> Twine games are made up of passages. You will be taken to the map for your new story. If you click on the untitled passage you will have the option to edit it or rename it. Click on the top row menu items to view more options. After you are done exploring click Rename to title the passage, I suggest calling the first passage "start." Click OK. <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/rename_passage.jpg" width="50%" height="50%" class="center" alt="Rename your passage window"> When you click Edit you will see that your page has two main areas, the title and the content area of the passage. You will notice a rename button in the editor so you can rename the passage from this screen as well, remember the title is for you so title your passage something short but meaningful. <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/passage2.jpg" width="75%" height="75%" 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/2022/10/doors2.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/2022/10/storymap2.jpg" width="50%" height="50%" 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. Click on the leftroom and click Edit in the menu or double-click the passage to edit the leftroom 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/2022/10/leftdoor2.jpg" width="75%" height="75%" 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/2022/10/storymap3.jpg" width="50%" height="50%" 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 Story menu item in the top menu bar then click # Stylesheet in the menu bar below. This will load a screen that is just an empty CSS file. <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/editstyles2.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/2022/10/stylesheet2.jpg" class="center" alt="This story's CSS stylesheet shows how to change 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's history while you're working on your project, you could lose your work! To reduce the risk, it's good practice publish your Twines to a file. This is easy and 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 story map you can publish your Twine by clicking ''Build'' then ''Publish to file''. See the image below. <img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2022/10/publish.jpg" width="75%" heigth="75%" class="center"/> Please note: If you are using the online version of Twine an HTML file will automatically be downloaded if you have installed Twine you will be prompted to save your 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]]