Twine Development

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

!Twine Development <div class="fiftypercent">[img[$path+"TwineScreen.png"]]</div> <<script>> //UI.alert("You smell of elderberries!"); <</script>> This is guide to creating interactive narratives with [[Twine|http://twinery.org/]]. Twine is at it's heart a wiki. A visual collection of passages of text, a little like a brainstorm. At first glance, Twine looks really easy, but don't be fooled. Twine ''isn't'' a one-stop-user-friendly tool, it is a hybrid monster, and you will need to learn HTML, CSS, and maybe even a little Javascript as well as Twine's own markup language(of which there are a few) to do anything ambitious. !! So What Is Twine Good At? Twine is a tool with which you can "evolve" a story, rather than working on a linear document. Twine is a tool with which you can "organise" a story, or the narrative, assembling it out of pieces. Twine real USP is that it has special tags that you can use to set variables, or timers, which means your stories can keep a track of things, like inventories, or state, which means, it makes it much easier to create interactive games. !! How To Learn Twine (Or Anything) Many coders, especially the older ones, are totally self taught. This guide will take you through the basics of what I think are the important things to know, but if you want to learn Twine you should also watch tutorial videos, learn other important and relevant technologies, have the documentation on hand to refer to and even get used to asking questions in forums when you get stuck. !Before You Begin Make sure you have chosen SugarCube 2 as your story format. [img[$path + "StoryFormat.png"]] Next: [[Introduction]]

!!Passages A Twine story is made up of linked passages. You create them by clicking the ''+ Passage'' button, you edit them by double clicking them (or clicking the pencil), and then ''view'' your story by clicking the ''play'' button. [img[$path + "PlayPassageButtons.png" ]] !! Wiki Words A key concept of wikis is the ''WikiWord'', which in the *olden days* would be a word with a capital letter in the middle. WikiWords links pages (or passages) together. In Twine, we use double square brackets, like this {{{ [[My Link]]}}}. When you add a WikiWord, Twine automatically creates a passage for you to fill in. Twine uses other codes and characters too. This is called ''markup''. We will learn HTML which is a markup language and Twine's markup language too. After doing this you will have half a dozen or so passages linked together. [[Activity: Create Some Pages And Link Them Together]]

! Get your pictures You may be using pictures you have taken, pictures you have found on the web [[Copyright Advice]] and downloaded to your computer. The main types of pictures you will be working with are: * JPG - good for photos, they also compress well * GIF - good for graphics but also looping animations * PNG - good but can also have a transparent background ! Name your pictures sensibly If you are using camera images, or often images from the web they are probably awfully named, perhaps something like this. ''IMG_20190310_144654_Bokeh-ANIMATION.gif'' It might be better to rename this file, something like this... ''lego_shop.gif'' ...again, you may have to remember your image names later, but also you may want to create different versions of the image, perhaps like this... lego_shop_banner.gif lego_shop_small.gif lego_shop_night.gif lego_shop_400x300.gif It doesn't matter how you name your files, and if you have a LOT of files you might not want to rename them at all, but it often pays to have a ''consistent naming convention'' whatever it it. [[Activity: Go Get Some Images And Put Them In Your media Folder]] Next: [[Formatting Your Media]]

!Learning HTML (and CSS) !! Making a HTML page HTML is quite simple really. To make a HTML page you create a html tag and end it. Like this. {{{<html></html>}}} That is an empty page. Each page normally has two parts, the bit you can see (called the BODY) and read and the bit you can't (called the HEAD) with meta data such as the title in. A simple textual page might look like this: {{{ <html> <head> <title> My Lovely Page</title> </head> <body> Welcome to my lovely page. </body> </html> }}} !!Adding Headers Adding headings to your page means the ''h'' tags. There are 7 levels of headings {{{h1, h2, h3 etc}}} Note: how the second chapters isn't h2, the numbering to to do with the nesting of the headers... {{{ <html> <head> <title> My Lovely Page</title> </head> <body> <h1> Chapter One</h1> Welcome to my lovely story. <h1> Chapter Two</h1> It goes on a bit </body> </html> }}} This tool let's you edit HTML and see the results as you type and so is a good way to learn how HTML works. [[Play with the HTML above here |http://scratchpad.io/mushy-spot-8015]] OR [[Create your own HTML page |http://scratchpad.io]] Next: [[Changing The Look and Feel With CSS]]

!Learning Sugarcube (Advanced) <<run document.body.style.backgroundImage = null >> So far you have learned how to use Twine, create and link passages, prepare media, hack in some HTML and even add simple scripts to your passages. [[SugarCube cheat sheet|https://www.motoslave.net/sugarcube/2/docs/#markup-list]] ! Making The World's Simplest Quiz For this next exercise we will create [[The World's Simplest Quiz]] in which we will use of the more advanced features of Twine.

Double-click this passage to edit it.

! Creating your folder structure It pays to be get your media (images, sounds, small movies) "in order" before you start. You don't know this yet, but don't worry, unless you've done web development before, you can't know this yet. !! Create your project folder This can have any name you like, BUT beware.... it will probably be part of your URL later on, when this project is put on the web, so my advice would be to choose something short, lowercase, and sensible. For example: "Ove Arbo Høeg’s Archive of Plant Names" ...would, when converted into a valid URL format would become... "Ove%20Arbo%20H%C3%B8eg%E2%80%99s%20Archive%20of%20Plant%20Names" ...which is difficult to remember. A better, simpler, folder name might be... "hoegs-plant-names", or even "plantnames" !! Create your "media" folder inside your project folder. It actually can be anything you like. Lots of people use "assets" and have sub-folders called "images" and "css" and "movies" etc. But for the purposes of a small project, one folder is good enough. Mine looks like this. [img[$path + "FolderStructure.png"]] Next: [[Getting Your Media Sorted]]

!Formatting Your Media When you use an image from your camera, or even if you use one for the web, it isn't in the right format. Often the image is ''TOO LARGE'' in that, the picture is very detailed and has lots of pixels per inch (dots per inch = dpi) or it is simply too big for how you want to use it. Or sometimes, you only want to use part of an image and so you need to edit it. ''It pays to have your image at the size and dpi you want to use, because then your site will load quicker and take up less space in general'' At this point ''you can't know'' what exact sizes you want yet, but you need to be familiar with editing images. Most computers have a simple image/graphics editor that can do this for you. On a Mac, the simple ''Preview.app'' will let you crop and resize and resample(change the dpi) images. Just as a //rule of thumb//, it is often a good idea for images on the web to be ''72 dpi'' and images for print to be ''300 dpi''. When you screen grab an image it is often ''144 dpi'' depending on what computer you are using. Whatever image you are using, and depending on how you are using the image, the dpi will dictate the size the image is drawn at. One commonly used workaround is to use HTML, which lets you specify an image's width. So an image that is 800px wide can shown small like this... {{{ <img src="/media/blood-moon.jpg" width="100"/> }}} Photo via <a href="https://www.goodfreephotos.com/">Good Free Photos</a> Next: [[Image Editing Tools]]

! Image Editing Tools Adobe products are the "industry standard" in that most design companies would use them. Although Adobe products are exceptional, I also recommend using free (or cheap) alternatives. <div class="fiftypercent"> [img[$path+"PixlrEditor.png"]] [[Pixlr Editor|https://pixlr.com/editor/]] </div> * [[Pixlr|http://pixlr.com]] is like a free web-based cut down version of photoshop (with some other cool features more like Instagram). The new [[Pixl X|https://pixlr.com/x/]] tool even helps you by resizing and resampling (making the dpi smaller) when you open your image. * [[Gravit.io|https://www.designer.io/]] is like a free web-based version of illustrator. TOTALLY AMAZING! * [[Krita|https://krita.org/en/]] is a free desktop competitor to photoshop beloved of animators and graphic artists. It is AMAZING! * [[Inkscape|https://inkscape.org/]] is a desktop app, similar to Illustrator that can do things that Illustrator can't. (A bit geeky) *[[Gimp|https://www.gimp.org/]] is a slightly quirky (geeky), but powerful, photo editor that does almost all that photoshop can do. *[[Autodesk Sketchbook|https://sketchbook.com/]] is a free drawing tool, like an art pad. Beautiful if you have a drawing tablet like a Wacom (I'd recommend getting one). *[[MediBangPaint|https://medibangpaint.com/en/]] is free and works on tablets, phones, computers... *[[FireAlpaca|http://firealpaca.com/]] is similar to photoshop, but simpler and free. All of these tools, if you are willing to watch YouTube tutorials to teach yourself, have the ability to do what you might do with Photoshop and Illustrator. So whilst it is good to learn Adobe tools from an employability perspective, and yes they are very powerful, all that really matters is the ability to teach yourself and your ideas and with the tools above you could easily create something equal to what you might with Photoshop or Illustrator. I would argue that anyone who uses *just* adobe products is a bit limited in their toolset choice. Each tool brings different features. [[Activity: Edit, Improve, Resize Your Images]]

! Sound Creation and Editing If you have recorded or downloaded a collection of sounds, you may want to combine them, add effects like reverb, or echo, slice them into smaller pieces or whatever. There are a number of ways to do this. !! Online Apps * [[TwistedWave|https://twistedwave.com/online]] * [[Ocean Audio|http://www.ocenaudio.com/en/startpage]] !! Desktop Apps * [[Audacity|https://www.audacityteam.org/]] - Free * [[Reaper|https://www.reaper.fm/]] - Free * Apple's Garageband - Free with a Mac !! Online Digital Audio Workstations (DAWs) * [[soundation|https://chrome.soundation.com/ ]] * [[audiotool|https://www.audiotool.com/app]] * [[soundtrap|https://www.soundtrap.com/studio/] Next: [[Setting a Background Image]]

! Adding Audio To Your Story There are a number of ways you can add audio to your project. ''Activity:'' You will need at least one //longer// sound to use as a background soundtrack, and a number of smaller //sound effects//, for example a dog barking, or doorbell etc. !!Record It Yourself Your phone will have a recording app good enough for most recording. Having recorded your sound, you will probably need to convert it to .mp3 or .wav files OR you may want to edit your sound, trimming off the bits you don't need. A great free tool for this is [[Audacity|https://www.audacityteam.org/]] !! Generating Your Own Music This too [[JukeDeck|https://www.jukedeck.com/make/tracks/all]] is amazing. You give it certain parameters, and AI generates a free soundtrack for your project (if you credit the site). <<set _audioPath to $path + "Monolithic Echoes.mp3">> <<cacheaudio "jukedeck" _audioPath>> <<audio jukedeck play>> Music from Jukedeck - create your own at http://jukedeck.com !! Use Free Sound Samples * [[Freesound|https://freesound.org/]] - Requires sign up * [[BBC Sound Effects|http://bbcsfx.acropolis.org.uk/]] * [[SoundBible|http://soundbible.com/]] See also: [[List of free sound sources|https://felgo.com/game-resources/16-sites-featuring-free-game-sounds]] Next: [[Sound Editing]]

[[List of Image Sources|https://www.theedublogger.com/the-ultimate-directory-of-free-image-sources/]] See also: [[Copyright Advice]]

!Learning Resources Although we will step through all of this in the course, you will find it easier if you spend some time learning some of topics beforehand, or even after this course. !!Understanding The Genre? This article is getting on a bit at seven years old, and rambles about parsers, but read it. [[Creation Under Capitalism and the Twine Revolution|http://nightmaremode.thegamerstrust.com/2012/11/25/creation-under-capitalism/]] <div class="quotation"><p>Our world where the average person is separated from their natural creativity and artistic agency isn’t an accident. It’s been carefully, deliberately engineered that way, not just by Apple, but by our entire capitalist society. Raised to believe that a select few create and the rest are just fans</p></div> It would be worth learning about the history of [[HyperCard|http://en.wikipedia.org/wiki/HyperCard]] and [[HyperText|https://en.wikipedia.org/wiki/Hypertext]] and discovering what ''Intertwingularity'' is. If you haven't experienced an interactive narrative, I recommend you spend some time exploring these games, all made with Twine, and see what they have in common. Which do you like? Which could be better? <div class="fiftypercent"> [img[ $path + "MadeWithTwine.png"]] [[Made With Twine|https://itch.io/games/made-with-twine]] </div> !!Learning HTML <iframe width="560" height="315" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> !!Learning CSS <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/GE_06UFb-O0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> !!Learning Javascript <iframe width="560" height="315" src="https://www.youtube.com/embed/Ukg_U3CnJWI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> !!Learning Twine https://opensource.com/article/18/2/twine-gaming !!Learning SugarCube <iframe width="560" height="315" src="https://www.youtube.com/embed/_pJHIao5lz4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> [[Sugarcube Documentation|http://www.motoslave.net/sugarcube/2/docs/]]

!Create Some Pages And Link Them Together(10mins) Think about if you need a link back to the "Home" page. Think about pages that might link to multiple pages. In a separate window, get the [[SugarCube Markup Documentation|https://www.motoslave.net/sugarcube/2/docs/#markup]] and add headers, or lists to your pages. You'll notice if you get your markup slightly wrong, missing off a square bracket, your page will break. Don't worry about images yet, we'll get to those later. Next: [[Hacking In Some HTML]] You can skip the HTML section if you like and go straight to: Next: [[Changing The Look and Feel With CSS]]

Remember to save them into the your "media" folder and rename them if you want to. [[Image Sources]] Next: [[Formatting Your Media]]

!Activity: Edit, Improve, Resize Your Images Using Pixlr, open one of your larger images and resize it to be about 500 pixels wide. This is roughly half the width of a page. At this point you might start to think about what graphical elements your story will need. * Will you need a background picture for the entire story? * Or will you need lots of background pictures, for each passage? * Will you need "objects", to show on a page? * Will you need a "banner graphic?" * Will you want graphical buttons? * How will these images work with your chosen colour scheme? You can tint images in Pixlr if you need to. * Will you need composite images, for example ** Empty table ** Table with a cloth on ** Table with a cloth on with knives, forks, plates etc [[Activity: Adding Your Image To A Passage]]

<<script>> if (window.hasOwnProperty("storyFormat")) { //On windows it will be more like this... C:/Games/Twine_Sample_Code/ setup.Path = "file:///Users/tomsmith/Desktop/TwineDevelopment/media/"; } else { setup.Path = "https://www-users.york.ac.uk/~tas509/TwineDevelopment/media/"; // Running in a browser } UIBar.stow(); //Hide the sidebar, like what is it for? Config.debug = false; //turn off debug mode, like what is it for? Config.ui.stowBarInitially = true;//do this, like what is it for? <</script>> <<set $path to setup.Path>>

!Activity: Adding Your Image To A Passage At this point we need to pause. Adding a picture to a passage isn't as simple as it should be. This is because, whilst you are working on your page it doesn't really ''exist'' anywhere, it's floating in the digital ether. What we need to do now is publish our story so that it ''exists''. !! Publishing Your Story From the Twine menu at the bottom left, publish your story, making sure to save it into your project folder so that it is in the same folder as your ''media'' folder, where you have put your pictures. <div class="fiftypercent"> [img[$path + "PublishMenu.png"]] </div> You can now open your ''.html'' file with a browser and it should just work. But before you can start adding images to your story you need to set up this story to *know* where your images will be. !! Create a passage called "StoryInit" This passage is a *magic* passage and will be executed every time you play your story. This is common concept in coding, that you have some code that only runs at the beginning. Open your ''StoryInit'' passage and add this code... {{{ <<script>> if (window.hasOwnProperty("storyFormat")) { //On windows it will be more like this... C:/Games/Twine_Sample_Code/ setup.Path = "file:///Users/tomsmith/Desktop/TwineDevelopment/media/"; } else { setup.Path = "https://www-users.york.ac.uk/~tas509/TwineDevelopment/media/"; // Running in a browser } UIBar.stow(); //Hide the sidebar, like what is it for? Config.debug = false; //turn off debug mode, like what is it for? Config.ui.stowBarInitially = true;//do this, like what is it for? <</script>> <<set $path to setup.Path>> }}} ... except, change the path to be the same as the path to your media folder. This code creates a variable called ''$$path'' which we can use later. !! Why Do We Need This? In reality, you don't but it will make development a lot easier. # We do this so that we can see our images when using the Twine editor ''and'' a web browser. If you don't do this then you can't. # We do this so that you can have ''one place'' where you store the root path to all your media. When we finally publish our story on a web site, we will simply set the path to "" and the web server will figure out that it needs to look in the same folder for the media and it will all magically work. # Because Twine is a bit rubbish. It's very flexible but sometimes it's too flexible. Now that you've created your StoryInit, go to a passage where you want to add your image and add the code... {{{ [img[$path + "FolderStructure.png"]] }}} ... but use the name of one of your images that is in the "media" folder. (Do you see why it can be handy to have nice, short, memorable names?) This code uses the ''$$path'' variable to locate where the image is. ''Now add more images to your passages'' Next: [[Adding Audio To Your Story]]

!Changing The Look and Feel With CSS When designing a web site, typically, your text is marked up as HTML and a separate file is used to keep the Cascading Style Sheet (CSS) which tells the HTML how to display itself. <div class="fiftypercent">[img[$path + "EditStylesheetMenu.png"]]</div> Using the [[CSS Reference|https://www.w3schools.com/cssref/]] see if you can change the background-color and color used in your story. This [[list of HTML color names|https://www.w3schools.com/colors/colors_names.asp]] might be helpful. This tool [[Palette Generator|https://www.canva.com/colors/color-palette-generator/]] creates a colour palette for you based on an uploaded image. This excellent tool, [[MyColorSpace|https://mycolor.space/]], let's you choose a colour, and then, it gives you a number of complementary colour scheme you can copy and paste into your stylesheets. ''Open your story's stylesheet and paste in the code below''. {{{ #ui-bar{ /* To hide the left hand bar completely, uncomment the line below*/ display: none; } body { background-color: white; color: black; font-family: "Helvetica Neue", sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 26.4px; } .passage { /* This only affects passages */ } .passage a { /* This affects passage links */ background-color: transparent; } .passage a:hover { /* This affects links while the cursor is over them */ } #story{ margin-left: 1.5em; } img { max-width:100%; } .fiftypercent{ text-align: center; margin: auto; max-width:50%; } .quotation, .quotation p{ font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif!important; font-size: 30px; font-style: oblique; /*margin: 0 auto;*/ quotes: "\201C""\201D""\2018""\2019"; padding: 10px 20px; font-weight: 300; line-height: 1.4; color: #36B286; } .quotation:before { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif!important; content: open-quote; display: inline; height: 0; line-height: 0; left: -10px; position: relative; top: 30px; color: #36B286; font-size: 3em; } .quotation::after { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif!important; content: close-quote; display: inline; height: 0; line-height: 0; left: 10px; position: relative; top: 35px; color: #36B286; font-size: 3em; } .error{ color:#fff; } code{ font-size: 14px; line-height: 12px; } }}} Next, we will want to add some images, but before we do, we need to make sure the images are fit for use, and we have a folder structure set up right. Next: [[Creating your folders]]

!Hacking In Some HTML This page is FYI. You have hopefully created at least a few pages and have been using SugarCube markup to change how your text is displayed, with headers and ''strong'' or //emphasis// markup. In general it is good practice to try and stick with one markup language at a time, but you ''can'' mix and match SugarCube markup and HTML. For example to create a ''bold'' word using HTML you would wrap it in {{{<b>}}} and {{{</b>}}} tags. BUT. Just a word of warning. HTML and SugarCube use similar but different rules. For example: * Both ignore multiple spaces. * SugarCube respects the new line characters you use, HTML doesn't. This might not seem like a big deal, and to be fair, you will ultimately end up using both, but for now, attempt to stick with SugarCube's syntax. If you don't want to learn more HTML, you can skip the next section. Next: [[Learning More HTML]]

!Setting a Background Image <<set _thisBg = "url(" + $path + "clouds_bg.jpg" + ")" >> <<run document.body.style.backgroundImage = _thisBg >> To set a background image t_ our passage we need to use SugarCube code. Again, we need to set a variable called {{{__thisBg}}} . {{{ <<set _thisBg = "url(" + $$path + "clouds_bg.jpg" + ")" >> <<run document.body.style.backgroundImage = _thisBg >> }}} If we use an underscore rather than a dollar sign, it means the variable only works on this page. The second line sets a CSS background setting magically. (Note: because we have set a CSS value, we will need to clear it on the next page, otherwise it'll be there the whole time from now on, which may be what we want.) Next: [[Learning Sugarcube]]

<<button Home Home>><</button>><<button "Learning Resources" "Learning Resources">><</button>><<button Activities Activities>><</button>><<button "Quiz" "The World's Simplest Quiz">><</button>><<button About About>><</button>> ----

What is your name? <<textbox "$player_name" "" "Welcome">>

<<set $score to 1>> ! Welcome, <<print $player_name>> Let's do this. So far you have got one question correct. ''Your score is <<print $score>>'' Well done, you know your own name. ! Question 2 ''What is the maximum number of times a single page of a newspaper can be folded in half by hand?'' Is it [[Once]] or is it [[Four Times|OneWrong]] or maybe [[Seven Times|OneWrong]] ?

!Correct You fold the paper only once, because after that you will be folding it into quarters, eighths, etc. <<set $score to 2>> ''Your score is <<print $score>>'' [[Question Two]]

! Wrong Only once, because after that you will be folding it into quarters, eighths, etc. [[Question Two]]

''Freetown is the capital of which country?'' [[Liberia|WrongTwo]] [[Cameroon|WrongTwo]] [[Sierra Leone|CorrectTwo]]

!Wrong The correct answer was ''Sierra Leone'' [[Question Three]]

! Question Three ''Whose catchphrase was "Just like that"'' [[Bruce Forsythe|Question Three Wrong]] [[Woody Allen|Question Three Wrong]] [[Tommy Cooper|Question Three Correct]]

!Yay <<set $score to $score + 1>> ''Your score is <<print $score>>'' [[Question Three]]

!Wrong The correct answer was ''Tommy Cooper'' ''Your score was <<print $score>>/4''

!Yay, well done, <<print $player_name>>, <<set $score to $score + 1>> ''Your score is <<print $score>>'' [[And Finally]]

---- <div style="font-size:0.6em">Tom Smith</div>

!And Finally... !!The next game-oriented features of Twine we should explore might be: * Starting timers * Using Arrays for inventories * include macros * many more... !! We should look at: * [Interactive Storytelling: Non-linear|https://gamedevelopment.tutsplus.com/articles/interactive-storytelling-part-3--cms-31299] ° [[5 Core Elements of Interactive Storytelling|https://www.gamasutra.com/blogs/ThomasGrip/20130819/198596/5_Core_Elements_Of_Interactive_Storytelling.php]] !! We Should Also Think About * How to structure our game design so that it is doable * How to structure our game design to fit Twine's concepts * How to structure our work so we can collaborate

!Why I Really Do and Don't Like Twine On the positive side, there's always something exciting about a tool with which you can make something quickly. In Twine this speed is created by what I have always (like for close to 30 years) referred to as CreationGoingForward. !!Creation Going Forward So many tools that let you make objects, force you to create the destination object before you can create a link to it. With ''CreationGoingForward'', you can earmark an object's creation merely by defining it. This used to be done in the old days by using a WikiWord, but square brackets is fine. Note: When you use square brackets rather that WikiWord, you throw away the challenge to the author to come up with a //good// WikiWord. A WikiWord becomes a "memorable shorthand" for the page, which then encourages you to re-use a link later on. I guess if you are making an information resource rather than a game this has more value. Many brainstorm tools have a CreationGoingForward methodology too, and it's great for that early stage of getting what might be messy content into some form you can work with. !! Too Many Technologies When you are beginning with Twine, it's ''all just text'' with a few tags for links here and there. That can be liberating, being freed from how your text will look. But you soon need some formatting. Firstly, WHY ISN'T THERE HANDY TOOLS TO AT LEAST SEE A CHEAT SHEET OF FORMATTING TAGS BUILT INTO THE EDITOR? Secondly, You learn a few formatting tags, then discover if you want to do anything beyond change the headers, you need to learn CSS. What? And in order to learn CSS you pretty much now need to know HTML. And THEN you discover that there's a scripting language built into Twine, but you can also drop in JavaScript, mixed with TwineScript mixed with HTML and Twine Markup. And worse of all, this is pretty much the way it seems you are expected to work. So, in order to use a simple, exciting tool, you need to be a battle-hardy web developer who can sift which bit of text is using which tech. I am just imagining teaching this. It is a nightmare. !! All Just Text So a passage can have a title, some tags and text... With a little work, AND whilst maintaining some integrity to Twine's tech concepts, you might be able to define an object type that had more fields, such as "age" or "image" or "links" which would then be handled in the editor. !! No Scrunching The visual overview is a wonderful thing, until you actually use it. I've create 20+ passages and already it is unmanageable. It would be nice to be able to put passages inside other passages, a scrunching of sorts, so that areas could be grouped. All the link lines in and out would still work. !! The Publishing Thing So you can or can't see your images depending on whether or not you are working locally or your project is hosted (unless you figure out how to do a live switch/check like I did) so that it doesn't matter. Sheesh! Really? Given the Twine output is just a file why not, when starting a project create a folder, with an index.html file and a "media" folder, and let me use the Twine Desktop (perhaps) to manage that media. It's like Twine designers start with a concept, then immediately throw it in the bin. ! Technological Purity I think it was from the SmallTalk days, when the idea of "if a tool is any good you should be able to build that tool in itself" emerged. There are so many helpful things Twine could manage for you, in a Twine-like way, so that whatever Twinery you learnt, you could figure out how to adapt it. I think Twine started like then, then immediately threw in the towel, an went for expediency. Yes, it's a lovely tool, but it looks like an easy to use tool, and it isn't. You need to be a web developer really... and as I get deeper into the scripting, I just feel icky... sort of back at the point of writing macros, in markup language that generates strings that get executed in tags. It didn't work for wikis or zope and and doesn't work now... Or am I just an old fart and the kids are happy to go on this sort of a journey to achieve a complex interactive narrative game whilst I whine "You'd be better off writing Twine from scratch yourself, than learning to use Twine". Having said that, I still quite like it. And hate it.

!Activities This page shows how, using TwineScript, pages with tags can be automatically listed. <<set $list to Story.lookup("tags", "activity")>>\ <<for $i to 0; $i lt $list.length; ++$i>> <<print "[" + "[" + $list[$i].title + "]" + "]">> <</for>>\ <<unset $list, $i>>

This project is intended to be used to teach the basics of Twine both from a content point of view, i.e it tells you what you need to learn. But it is also as an exemplar project, for example, in this project I use a ''Passage Header'' and a ''Story Init'' and list all the passages tagged with the tag "activity", so that you can look at the code and see how it works. I am nowhere near expert with Twine but I have selected the features, and ways of working that I think are most effective. I hope it helps. Tom p.s [[Why I Really Do and Don't Like Twine]]