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.
[[My List of Twine Tips]]
!! 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.
<div class="fiftypercent">[img[$path + "PlayPassageButtons.png" ]]</div>
!! 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 maybe 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, but you can also do this with web-based editors such as Pixlr.
<iframe width="560" height="315" src="https://www.youtube.com/embed/EjRANya5VJA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
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
* http://twinery.org/questions/tag/sugarcube2
!!Learning SugarCube
https://www.reddit.com/r/twinegames/
<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
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: [[Timed Text]] 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: Isolating An Image]]
[[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
//setup.Path = "https://tomsmith.webfactional.com/static/TwineDevelopment/media/"; // Running in a browser
// Set permissions to 755
}
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|http://everythingability.com]]</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
! Publishing Your Game
This is essentially about hosting your project folder on a server, which will contain a .html file and your "media" folder.
At this point you will be glad you learned about the ''StoryInit'' trick because you won't have to go and change EVERY url to EVERY image or sound used.
You can buy cheap hosting space to put your Twine project or your organisation will often let you upload your files using an SFTP client like [[CyberDuck|https://cyberduck.io/]] or [[WinScp|https://winscp.net/eng/docs/free_sftp_client_for_windows]]
There are sites devoted to hosting your game such as:
* [[itch.io|https://itch.io/]]
* [[TextAdventures|http://textadventures.co.uk/]]
!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.
<<set _thisPath to $path + "TwineDevelopment.zip">>
_thisPath
Tom tom@everythingability.com
p.s [[Why I Really Do and Don't Like Twine]]
Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.!This text displays sequentially
<<timed 4s t8n>>
You glance around your shoulders and see nothing.
<</timed>>
<<timed 8s t8n>>
Until your eyes become accustomed, and then...
<</timed>>
<<timed 10s t8n>>
! TOO MUCH!
<</timed>>
See: https://www.motoslave.net/sugarcube/2/docs/#macros-macro-timed
Next: [[Changing The Look and Feel With CSS]] !Isolating An Image
<style>body{background:yellow;}</style>\
<div class="fiftypercent">
[img[$path + "isolated_cow.png"]]
</div>
!!Isolating Images
If you are now used to resizing images with Pixlr, (or its newer product Pixlr-X https://pixlr.com/x/ ), you will be able to easily create large (but not to big) full-sized images for your passages. But often you want to show an image that doesn't have a background. These images are called ''isolated images''. The image format ''PNG'' allows for areas of the image to be transparent rather than white.
When an image is already isolated, it can often make it easier to work with your design.
https://www.google.co.uk/search?hl=en&biw=1065&bih=792&tbm=isch&sa=1&ei=QBXIXK39FZiCjLsP8oGR-A0&q=isolated+image+cow+black+and+white&oq=isolated+image+cow+black+and+white&gs_l=img.3...1752.5923..6446...0.0..0.440.1430.14j2j4-1......1....1..gws-wiz-img.......35i39.JZVJYfYozhQ
Consider whether you want to use isolated images or regular images with backgrounds (i.e rectangular photos).
!!Masks
For years I thought that I could cut an image from another using just the lassoo tool, but recently, having learnt how to use masks, it has massively improved my ability to montage and manipulate images.
<div class="fiftypercent" >
<iframe width="560" height="315" src="https://www.youtube.com/embed/CUnaAzl_Te4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
! The First Thing To Do Is To Organise Your Media Folder
Because there are sort of two ways of viewing a Twine site a. in the Twine editor and b. in a browser, and each handles images and sounds differently, I ''really recommend'' that you work in a way that means when you move from one to the other there is minimum disruption.
To achieve this, I recommend that you create a project folder and in there create a "media" folder. And ''then'' in Twine you create a ''StoryInit'' passage and set a variable called ''$path'' by adding some code. This code is //clever enough// to know whether or not it running in the Twine editor or a browser and either uses the path to your media folder on your personal computer, or later, when your work is hosted on a website, uses the url to your website.
A url to a file on your computer begins with file:///, a URL to your work on a webserver begins with http://
''The reason I strongly recommend this is that when your work is finished you can then simply put it on a web site and it will work, you won't have to go around dozens, or hundreds of pages, fixing up the paths to your files''
Twine should handle this. But it doesn't.
! Publish Your Twine Site
When you publish your Twine site, it creates a ''Your Site Name.html'' file. You can view this by using File > Open File or by dragging it onto a browser window.
! Work WITH The Tool
Twine's strength is not its ease-of-use (see above). In order to ''design'' your Twine site you pretty much need to be skilled with Cascading Style Sheets (CSS). So you have a choice, either go learn how to work with CSS or learn just enough to knock the rough edges off the CSS provided with Twine.
I would recommend taking a minimalist approach to hacking, guided by a "can I live with this for now" aesthetic.
For me, Twine's big strengths are the speed at which you can throw a complexly structured narrative together, and its game-like abilities to add scores, or change values, or start timers etc. These are all the things you need to create a game, a puzzle, or a wizard / self-evaluation tool etc. Implementing these features would be painfully hard using traditional HTML/Javascript/CSS programming.
! Treat Twine As A Geek Learning Opportunity
Twine attempts to build on other web technologies but it can get very confusing if you are new to all of them, which you may well be.
Any Twine page can have:
# Markup. Depending on how you have set up your Twine story format you could have a.Harlowe b.Snowman c.SugarCube. I recommend SugarCube for its gameification abilities. This markup can be used to create headers, add images and links.
# Twine Code is used to set variables, or
# HTML. You might choose this to add an EMBED of a Youtube video or instead of SugarCube markup to add an image.
# CSS. Can be added in a central file for your entire site, or just embedded in a page/passage of your site.
# Javascript code can again be run globally or locally, it can interact with your Twine variables too.
The fact that you can use all these different approaches at once makes for a confusing time, but perhaps you could see it as an opportunity to learn ''just enough'' HTML or CSS or Javascript to get by.
! Use The Documentation and Forums
Just because something is confusing, and perhaps badly designed, doesn't mean you can't master it. If you can't figure out how to do something, ask Google.
''NOTE: Pass attention to what story format/version of Twine the discussion is regarding''
! The PassageHeader and PassageFooter Are Your Friend.
Designing each and every page, you will quickly find is hard work. If your headers and footers contain thoughtful or beautiful or useful elements, it will make ALL your pages look great.