Twine (twinery.org)

TWINE EXAMPLES

https://crowscrowscrows.itch.io/the-temple-of-no
https://nicom.itch.io/the-horse-is-dead
http://www.depressionquest.com/
http://scoutshonour.com/cowgirl/

TWINE DECONSTRUCTION – ‘WALLPAPER’

Following the death of his mother, technology innovator PJ Sanders returns to the UK from the United States to his home which has been in his family for generations. Sanders is back to close up the house and sell off the property, but not before he employs an experimental device primed to help him uncover the mysterious history behind a room in the house – a room that has remained locked since his childhood. An unfinished Twine adaptation of WALLPAPER, an immersive narrative game and Virtual Reality experience funded by Arts Council England, Sheffield Hallam University and the Arts and Humanities Research Council.

WALLPAPER Twine example
WALLPAPER Twine example archive (for importing into Twine)

WALLPAPER Twine scripts and resources

COLOURS
Background (dark blue): #030329
Links (light blue): #8ac3ff
Hover over links (red): #cf171f
Text (white): #FFFFFF
FONTS (TAKEN FROM GOOGLE FONTS)
@import url(https://fonts.googleapis.com/css?family=Lora);
REFERENCING IMAGES, AUDIO AND VIDEO
<img src="The URL of your image" style="width: 100%;" media="(max-width: 1280px)" />
<video src="The URL of your video" width="640" height="480"></video>
<audio src="The URL of your sound effect" autoplay>
STYLESHEET DEFAULTS
@import url(https://fonts.googleapis.com/css?family=Lora);

body, tw-story
{
 font-family: 'Lora', serif;
 background: url(http://dreamingmethods.com/wallpaper/twine/images/wallpaper-background.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 background-color: #030329;
}

tw-passage
{
 color: #ffffff;
}

tw-link
{
 color: #8ac3ff;
}

tw-link:hover 
{
 color: #cf171f;
}
RESOURCE LOCATIONS
http://dreamingmethods.com/wallpaper/twine/images/
http://dreamingmethods.com/wallpaper/twine/audio/

 

IMAGES
<img src="http://dreamingmethods.com/wallpaper/twine/images/arrival.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/inside-greenhouse.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" /
<img src="http://dreamingmethods.com/wallpaper/twine/images/sundial.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/case.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/towards-the-house.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/front-door.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/door-open.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/back-towards-car.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/stepped-inside.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/answerphone.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/livingroom.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/kitchen.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/greenhouse.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />
<img src="http://dreamingmethods.com/wallpaper/twine/images/wallpaper-background.jpg" style="width: 100%; border: 2px silver solid;" media="(max-width: 1280px)" />

AUDIO
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/arrival.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/answerphone.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/footsteps.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/open-boot.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/footsteps-carpet.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/piano.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/cloth.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/footsteps-tiles.mp3" autoplay>
<audio src="http://dreamingmethods.com/wallpaper/twine/audio/unlock-door.mp3" autoplay>
VARIABLES

Opening page:
(set: $carrying_briefcase to false) 

Front door of the house:
(if: $carrying_briefcase is false)[PJ has forgotten his briefcase.]
(if: $carrying_briefcase is true)[PJ got the case. Front door can be unlocked.]

Opening the car boot and collecting the briefcase:
(set: $carrying_briefcase to true)

TWINE – USEFUL STYLES FOR NARRATIVES

RESIZE ALL IMAGES SO THEY ALWAYS FIT THE DEVICE WIDTH 
(Paste into style sheet area)

img {
  max-width: 100%;
}

GRAB A FONT FROM GOOGLE AND USE IT
(Paste into style sheet area)
@import url(https://fonts.googleapis.com/css?family=Oswald);

body, tw-story {
font-family: 'Oswald', serif; }

https://fonts.google.com/

MAKE TEXT BLURRED (ALSO SET BACKGROUND TO WHITE)

<span class="blurry-text"><h2>Very blurry text.</h2></span>

(Paste below into style sheet area)

.blurry-text {
   color: transparent;
   text-shadow: 0 0 10px rgba(0,0,0,0.6);
}

body, tw-story
{
  background-color: white;
}

BLUR SOME TEXT WHEN CLICKED

<span id="blurthis">When clicked this text will go blurred, assuming we have the blurry-text 
style set up as shown above in our style sheet.</span>

<script>
$("#blurthis").click(function(){
    $(this).addClass("blurry-text");
});
</script>

TWINE – USEFUL ‘MACROS’ FOR NARRATIVES

DISPLAY RANDOM TEXT

He woke up feeling (either: "hugely annoyed after last night.", "very hungover.", "somewhat weird after last night.")

DISPLAY A RANDOM NUMBER

(random: 1, 100)

FLIP A COIN HEADS OR TAILS WITH A VARIABLE 

He flipped a coin. 
(set: $coin to (either: "Heads.", "Tails.")) $coin 

NOW DO SOMETHING DEPENDING WHETHER HEADS OR TAILS

(if: $coin is "Heads.")[Heads. Let's get out of bed.]
(if: $coin is "Tails.")[Tails. Let's stay in bed.]

DISPLAY A PASSAGE INSIDE ANOTHER PASSAGE 

(display: "Name of passage") 

MAKE SOME TEXT APPEAR WITH A 'PULSE' EFFECT ON CLICKING A LINK  

(link: "Show pulsing text!")[ (transition: "pulse")[Pulsing text that just appears!] ]

MAKE THE PULSING EFFECT LONGER 

(link: "Show a longer pulsing text.")[ (transition: "pulse") +(transition-time: 5s)[Woo I'm slowly going dizzy.] ] 

TRY USE PULSE, DISSOLVE AND SHUDDER EG 

(link: "Fade some text in nicely")[ (transition: "dissolve")[Woo. Nice. I like it.] ]

CHANGE THE STYLE OF ALL OCCURRENCES OF THE WORD "GOLD"

(enchant: "gold", (text-colour: yellow) + (text-style:'bold')) 

REPLACE SOMETHING TEXT WITH SOME OTHER TEXT

My deepest secret.
(click-replace: "secret")[longing for you.]

AUTOMATICALLY GO TO ANOTHER PASSAGE AFTER 5 SECONDS 

(live: 5s)[(goto: "Name of passage")]

MAKE A LINK TO ANOTHER PASSAGE WITHOUT HAVING TO USE ITS NAME 

[[Go to the cellar->Cellar]]

SHOW SOME TEXT THAT'S HIDDEN BY CLICKING ON A TEXT 

[Show me!]<Showme|
(click: ?Showme)[
You clicked Show me! So I'm showing you this text which was previously hidden.
]

STORE AND USE IMAGES USING BASE64 WITHIN THE TWINE STORY 

(set: $image to (passage:"Image")'s source)
(print: "<img src='" + $image + "'>")

https://www.base64-image.de/

COUNT DOWN FROM 10 - VISIBLY - THEN DISPLAY TEXT

{ (set: $stopCycle to 4) (live: 1s)[ 
(if: $stopCycle is 0)[Rocket launched!(stop:)] (
else: 
)[(set: $stopCycle to it - 1) 
Launching rocket in $stopCycle] ] 
}

DISPLAY NEW TEXT WHEN MOUSE 'ROLLS OVER' SENTENCE

|noClick>[(color:"white")[Run your mouse over this to reveal a paragraph below this one.]]
(mouseOver-append: ?noclick) [
Here is the new paragraph, revealed only when the mouse is run over the top of the above sentence.
]

TWINE – JQUERY SCRIPTS FOR NARRATIVES

FADE TEXT OUT ON CLICK (3000 = 3 seconds)

<div id="fade">This text will fade out when I press it.</div>
 
<script>
$("#fade").click(function() {
   $(this).fadeOut(3000);
});
</script>

FADE TEXT OUT ON HOVER

<span class="fade">This text will fade out when I move my mouse over it.</span>
<span class="fade">This text will also fade out when I move my mouse over it.</span>

<script> 
$(".fade").hover(function() { 
   $(this).fadeOut(3000); 
}); 
</script>

TOGGLE TEXT VISIBILITY  

<div id="show_toggle">Press this text to show/hide a secret paragraph below.</div>
<div id="toggle" style="display:none">This is a hidden paragraph that will slowly reveal itself when the above sentence is pressed. If it's pressed again, it will 'toggle' visibility and hide away again.</div>

<script>
$("#show_toggle").click(function() { 
   $("#toggle").slideToggle(3000); 
}); 
</script>

TOGGLE TWO WORDS ON PRESS

I have a big allergy to <span class="switchtext">dust</span>.
<script>
$(".switchtext").click(function() {
var $self = $(this);
if ($self.text().trim() == "dust")
$self.text("pollen");
else
$self.text("dust");
});
</script>

TWINE – BUILT IN ELEMENTS FOR REFERENCE

BUILT-IN TWINE HTML ELEMENTS

tw-link
tw-expression
tw-sidebar
tw-passage
tw-passagedata
tw-story

RECOMMENDED TWINE RESOURCES AND EXAMPLES

http://philome.la/ (publish your story for free)
https://itch.io/search?q=twine (Twine stories on Itch.io gaming resource)
https://www.glorioustrainwrecks.com/node/5163 (free stylesheets for Twine)
http://astriddalmady.com/resources/ (writing tools and resources)
https://assetstore.unity.com/packages/tools/cradle-93606 (Cradle; convert Twine to Unity)

Recommended software, downloads and resource sites

DREAMING METHODS

http://diary.dreamingmethods.com
http://www.dreamingmethods.com

NEW MEDIA WRITING – EXAMPLES

http://www.newmediawritingprize.co.uk
https://elmcip.net/knowledgebase
http://eliterature.org/
http://collection.eliterature.org/3/
http://www.inanimatealice.com
http://www.webyarns.com
http://www.crissxross.net
http://www.luckysoap.com
http://www.vispo.com
http://prynovella.com
http://www.taleoftales.com

SOFTWARE (FREE)

http://unity3d.com
http://fungusgames.com
https://www.gimp.org
http://www.audacityteam.org
https://notepad-plus-plus.org
https://www.visualstudio.com/vs/visual-studio-express
https://filezilla-project.org
https://www.openoffice.org/download/
https://www.blender.org
http://codesigning.ksoftware.net

SOFTWARE (PAID)

http://unity3d.com (Plus or Pro)
http://www.ambiera.com/coppercube
http://www.adobe.com/uk/creativecloud.html
http://www.actualinstaller.com

AUDIO RESOURCES

http://www.freesound.org (free)
http://www.audiojungle.net
http://www.freesfx.co.uk (free)
http://bbcsfx.acropolis.org.uk/ (free – BBC SFX library)

VIDEO RESOURCES

https://videos.pexels.com (free)
http://www.videohive.net
http://www.istockphoto.com
http://www.pond5.com
http://www.videocopilot.net

IMAGE AND PHOTO RESOURCES

http://www.dreamstime.com
http://www.morguefile.com (free)
http://www.shutterstock.com
http://www.istockphoto.com

3D MODEL RESOURCES

https://www.cgtrader.com/free-3d-models (free)
http://www.turbosquid.com/Search/3D-Models/free (free)
http://www.turbosquid.com
https://3docean.net

SCRIPTS AND TUTORIALS

http://labs.dreamingmethods.com
http://labs.dreamingmethods.com/code
http://labs.dreamingmethods.com/boilerplate
http://www.w3schools.com
http://www.htmldog.com
https://www.lynda.com (paid)

VIRTUAL AND AUGMENTED REALITY

http://www.unity3d.com (free version allows VR/AR development)
https://www.zappar.com
https://developers.google.com/vr/concepts/vrview (360 photos/videos)
https://aframe.io
https://developer.oculus.com

BROWSER EXTENSIONS – CHROME (FREE)

Colour Picker
What Font
Web Developer

UNITY EXTENSIONS – PLAYMAKER

Playmaker Unity Extension (paid)
Playmaker Ecosystem (free)

FURTHER HELP & SUPPORT

For support writing and developing your own digital fiction project beyond this workshop email andy@onetoonedevelopment.org – please allow a few days for a reply. 🙂