Meta

Apologies! Your web browser lacks required capabilities. Please consider upgrading it or switching to a more modern web browser.

Initializing. Please wait…

<img src="http://i.imgur.com/LPEYoUG.jpg" title="source: imgur.com" /> Hello!!! Thanks for playing this game. It's a simple game really, called The Meta Game. Why is it called that? Easy! It's called The Meta Game because this is a Twine game that teaches people how to use basic commands in Twine 2 to tell stories. In the tutorials that follow, you should find simple instructions that allow you to make Twine games for your class assignments, and hopefully your own creative uses. Do you have Twine? If not, then you can open a new tab in your browser and search "Twine 2" to find it, or you can follow the link provided, copy and paste the url into a new tab, then return to the game. You should be able to find the link <a href="http://twinery.org">here</a>! For this tutorial, no need to download it. You can click the link that says 'use it online'! Let's begin. What would you like to do? 1. I would like to learn a little about [[Twine's History]]. 2. I would like to know why people [[use Twine]]. 3. I would like to know about the experiene of [[making]] a Twine game. 4. I would like to learn how to make [[links]] in Twine to move my narrative forward. 5. I would like to learn how to incorporate [[images]] into my Twine game.

<img src="http://i.imgur.com/HnlPD5u.jpg" title="source: imgur.com" Align="Right"/> According to Twine's info page, "Twine is an open-source tool for telling interactive, nonlinear stories" developed by Chris Klimas in 2009. But what is 'open-source,' why is Twine 'interactive,' and how is Twine 'nonlinear'? Well, it's open-source because it is developed publicly, and it is available freely. It is intereactive because Twine allows people to 'choose their own path' so to speak during the unfurling of the narrrative. And Twine is 'nonlinear' because of this interactive nature: there are many ways that a Twine narrative might unfurl. Twine narratives jump back and forth, side to side, and can even end abruplty (I'm looking at you, 'The Uncle Who Works for Nintendo'). What would you like to do? 1. I would like to go back to the [[Start]]. 2. I would like to know why people [[use Twine]]. 3. I would like to know about the experiene of [[making]] a Twine game. 4. I would like to learn how to create [[links]] in Twine. 5. I want to incorpoarate [[images]] into Twine.

<img src="http://i.imgur.com/5qHTgL7.png" title="source: imgur.com" /> Why do people use Twine? There are several reasons. First, it's free! You don't have to pay a liscensing fee in order to use it, and you can monetize the stories/games you create in Twine without fear of litigation from the code's creators. Second, it's easy to learn yet difficult to master! Creating games in Twine isn't difficult. You will probably create your first game in minutes. However, due to the open-source nature of Twine, there are many, MANY resources available that allow one to enhance or augment the user experience of the game. For instance, this game teaches people how to add text and images into Twine games. Third, and perhaps most importantly, is that Twine is a creative outlet! Many people use Twine to make games that wouldn't exist without the platform. Zoe Quinn, for example, created the game Depression Quest through Twine. Porpentine, another Twine game creator, made Chyrstal Warrior Kesha. These games-and the people who make them-attest to the creativity inherrent in Twine. You too can use this to your advantage! What would you like to do next? 1. I would like to go back to the [[Start]]. 2. I would like to know about [[Twine's History]]. 3. I would like to know about the experiene of [[making]] a Twine game. 4. I would like to learn how to create [[links]] in Twine. 5. I want to incorpoarate [[images]] into Twine.

<img src="http://i.imgur.com/VO52jlh.jpg" title="source: imgur.com" ALign="Left" Style="Padding:10px"/> Creating links is one of the simplest-but most important-functions that one must know in order to create Twine games. It's important to know how to create links for a few reasons. First, it is easily the most ubiquitous function of Twine games. Every page will have at least one link, and most will have many. In fact, the words that you click on to move the tutorial forward are all links!!! That's the second reason to know how to create links! Links help to create new passages. When you create a link, that link must go somewhere. In Twine 2, once you have successfully created a link, the next passage will be created for you. Third, links allow creators to organize their thoughts. You won't create a link unless you want the player potentially to go to that passsage. If you want a player to go to a passage, then you also have more to share with them. Links are a great way to organize one's thoughts becasue it allows the narrative to be split into digestible chunks. To create a link, simply start by double-typing a beginning bracket (a beginning bracket looks like this '[' and can be found above one's 'Return' key on their keyboard), then typing the name you'd like to give the link, and then finish it by typing two end brackets (end brackets look like this ']' and can be found right next to beginning brackets on keyboards). SO, double beginning bracket, Name-of-Link, double end bracket. Creating links is easy. In fact, I am using a link right now to take you back to the [[Start]] page if you'd like to go there!!! All it took was typing two beginning brackets ('[') then the word 'Start,' and the two end brackets (']'). Simple as that! What would you like to do next? 1. I would like to go back to the [[Start]]. 2. I would like to know more about [[Twine's History]]. 3. I would like to know about the experiene of [[making]] a Twine game. 4. I would like to know why people [[use Twine]]. 5. I want to incorpoarate [[images]] into Twine.

<img src="http://i.imgur.com/lpmSlsh.jpg" title="source: imgur.com" ALIGN="Right"/> So, you want to learn how to incorporate images into your Twine game? Great! Many of the best Twine games use images to accentuate their narratives. Incorporating images in Twine 2 is a two-step process. The first step is finding a way to ensure a [[static address]] for the image so it can be called by the Twine code. The second step is to know how to write the Twine code so that the game will show the image every time it is appropriate. We'll take each step in turn. 1. Creating a [[static address]] for the image. 2. Writing the [[code]] properly. 3. [[Positioning]] images. 4. Go back to [[Start]].

The method described here is meant to illustrate how html can be used to set an image in Twine. The first step to incorprating images into a Twine game is to select an image and then find a home for it. For the html method, Twine 2 will call the image from the internet. <img src="http://i.imgur.com/lEZwhVi.jpg" title="source: imgur.com" Align="Right"/> Many people think that finding an image online and using that particular IP address will do the job. That isn't the case for this method. Take two issues into account to understand why. First, it's possible that the image is protected, so make sure to use images that you have created, or have grounds for claiming fair use. Second, though, someone might take down an image that you've chosen, or change the URL to it. In the second case, the link will then be 'dead,' and the image will no longer show itself in the game. So, what is one to do? No problem! Find a social media site that handles images well, like Twitter, Instagram, etc. For this tutorial Imgur is used. The reason to use Imgur is that one can easily find the html link to the image just to the right of it. Once the image is uploaded to Imgur, the html link can be copied and then pasted into the Twine code. 1. Move on to the proper writing of the [[code]]. 2. Go back to the beginning of the [[images]] tutorial. 3. Go back to the [[Start]].

<img src="http://i.imgur.com/IJCbmE7.jpg" title="source: imgur.com" /> Now that you have your image in a secure location, it is time to tell Twine that you want to include it in your game. How you do that is simple. You take the html code that you can copy from IMGUR, and paste it into your game! It wasn't always so simple. Before, you would type the code provided below into your game, without the spaces that you will see in between the 'less than' (<) and 'greater than (>) signs, and replace the word 'image' with the html code that you can retrieve from your preferred social media site. It looks like this: < img src = image > The code that's above is left in this tutorial just in case simply copying and pasting doesn't work. It will, but it's good to know how to write the code, on the off-chance that Twine changes. 1. I would like to learn a little about [[Twine's History]]. 2. I would like to know why people [[use Twine]]. 3. I would like to learn how to make [[links]] in Twine to move my narrative forward. 4. I would like to learn how to incorporate [[images]] into my Twine game. 5. I would like to go back to the [[Start]].

<img src="http://i.imgur.com/fUKe7e5.jpg" title="source: imgur.com" /> Making a Twine game is relatively easy. When you first encounter the Twine interface, though, you might find it a little odd. You start with an unnamed passage and nothing more. Most people (and you should, too) name this passage [[Start]] in order to create a sense of sequence for one's game. You name it such by double clicking on the upper portion of the passage, and typing the word "Start" there. Later, when you want to allow people to go back to the beginning, you will create a link with the name you gave the start page, precisely as you typed it originally. As you continue to develop your story/game/text, you will create new passages through the development of [[links]]. Just like in the image above, you will see that the code creates new passages (i.e., new windows like the one you began with, though with a different name) once you have created the links. One of the great things about Twine is that you can move these passages around while you are writing the code. All you have to do is click on them and move them where you want. Quite often this will allow you to organize your thoughts according to your own desires, without hurting the layout of the end product, since the code and the game will look different from one another. What's more, when you choose to link one passage to another, in the code format you will see a line that connects them together. If you look at the image above, when you see a line from one passage to the next, that tells you they are linked together. Twine does this for you, just like it does when you create new passages. The lines let you know which passages are linked to which. What would you like to do? 1. I would like to go back to the [[Start]]. 2. I would like to learn a little about [[Twine's History]]. 3. I would like to know why people [[use Twine]]. 4. I would like to learn how to make [[links]] in Twine to move my narrative forward. 5.I would like to learn how to incorporate [[images]] into my Twine game.

When using images in a Twine game, you might want to manipulate it in a few different ways. First, you might want to place the image to the left or the right of the window. Second, you may want the text accompanying the image to fit more neatly than it does naturally. Lastly, though, you may not want the image to link to your Imgur site. This portion of the tutorial can help with all three. <img src="http://i.imgur.com/JJke3Hv.jpg" title="source: imgur.com" Align="Left" /> 1. [[Align]] images to the left or right. 2. [[Move text]] along images. 3. [[Remove]] links to Imgur. 4. Go back to [[images]]. 5. Go back to [[Start]].

Aligning images to the left or the right is easy, but you will have to add a little something to the html code that links the image to the game AND make sure to add it in the right place! What you add is really rather simple, and is shown below, so that you can simply copy and paste it. Make sure to copy ONLY what is after the colon describing which position you would like to move the image. <img src="http://i.imgur.com/xSbtBIb.jpg" title="source: imgur.com" Align="Right"/> Align an image to the right: Align="Right" Align an image to the left: Align="Left" But where to put this code? Not to worry. Th eproper place to put this code is in the html of the link to the image that you get from your social media site. For instance, the code for the image on this page looks like this, though the angle brackets that frame it have been replaced by a double X ('XX') so as to show the code: XXimg src="http://i.imgur.com/xSbtBIb.jpg" title="source: imgur.com" Align="Right"/XX As you can see, the XXAlign="Right"XX code has been placed after the address, but before the usual "/>" that you will see in your own html code. That's all you have to do! 1. [[Move text]] along images. 2. [[Remove]] links to Imgur. 3. Go back to [[images]]. 4. Go back to [[Start]].

<img src="http://i.imgur.com/ERWnADd.jpg" title="source: imgur.com" Align="Left"/> No, there is nothing wrong with your eyes! this part of the tutorial is meant to exhibit why you may want to manipulate the spacing between image and text in your Twine game! You may notice that this text that is wrapping around the image is rather close to it, too close in fact. Quite often people would rather have a little room between an image and its corresponding text to make reading easier. Twine does not allow people simply to move an image or text whereever they want. Like inserting images into a game, you must use code. By "padding" the image, or giving it a bit of room through the code, you can make reading the text easier for your gamers. <img src="http://i.imgur.com/ERWnADd.jpg" title="source: imgur.com" Align="Left" STYLE="Padding:10px"/> This image has that code embedded, so that the second version of text and image is easier to read. All it took was adding a little piece of code JUST AFTER the [[Align]] code that we saw just moments before. Just like the alignment code, we copy and paste a little piece of inline CSS code into the image code, and then we get our spacing! That code looks like this, and can be copied and pasted as well: STYLE="Padding:10px" If 10 isn't enough space, then try 20 rather than 10! But the practicalities will be the same regardless: make sure to add this copiable code after the alignment code from the previous part of the tutorial! 1. [[Align]] images to the left or right. 2. [[Remove]] links to Imgur. 3. Go back to [[images]]. 4. Go back to [[Start]].

If you've been following the image tutorial and using Imgur for your static image site, then you may have noticed that the image links back to Imgur. If you do not want this to happen, then there is something you can do. Just delete the part of the html code that you copy and paste into the game! <img src="http://i.imgur.com/JJke3Hv.jpg" title="source: imgur.com" Align="Left" STYLE="Padding:10px"/> But which part to delete? There are two pieces of the html code that you need to delete, the very first and very last parts. The first part of the code that should be deleted is easy enough to identify: delete anything that comes before "<img src"! The last part that needs to be deleted comes at the very end of the code. It looks like the below, but without the double X's that come before and after it: XX</a>XX 1. [[Align]] images to the left or right. 2. [[Move text]] along images. 3. Go back to [[images]]. 4. Go back to [[Start]].