Twine
is the most beautiful medium
I have ever encountered
for making [[stories.]]
(set: $displayCont to false)This is [[Twine.->map]]
- Universal.
- Easy to play.
- Simple to create.
(set: $displayCont to false)Example Twine
<span style="font: 40px arial, sans-serif;"><a target="_blank" style="color: cadetblue;" href='Queers.html'>Queers in Love at the End of the World</a> by Anna Anthropy
</span>(click: ?next)[(go-to: "slide 5")]
(set: $displayCont to true)[[Illumination->Monks]]
[[Interactivity->Interactive]]
[[Ease]]
(set: $displayCont to true)
(click: ?next)[(go-to: "Storytelling Principles")]<div style="position: fixed; left: 150px; top: 50px;">|illum>[Illumination](click-replace: ?illum)[<span class="glow" >Illumination</span>]</div>
- Color.
- Animation.
- Sound.
(click: ?next)[(go-to: "Illum Examples")]
(set: $displayCont to true)|inter>[Interactivity]
{(click-replace: ?inter)[|inter1>[Responsive]]
(click-replace: ?inter1)[|inter2>[Engaging]]
(click-replace: ?inter2)[<span style="font-weight: bold;">Interactivity</span>]}
- Encourage |engag>[Engagement.](click: ?engag)[
- Keep |interest>[Interest.](click: ?interest)[
- Disfluency. ] ]
(click: ?next)[(go-to: "ash")]|Ease>[Ease](click-replace: ?Ease)[//Ease//]
- Simple to learn.
- Infinite expansion.
- Utterly portable.
(click: ?next)[(go-to: "My Uses")]|illum>[Illumination](click-replace: ?illum)[<span class="glow" >Illumination</span>]
<span style="font-size: 50px;">Evoke feeling to meet the theme.
<a target="_blank" style="color: cadetblue;" href='TinyUtopia.html'>Tiny Utopia</a> by Astrid Dalmady
[[Sleepless->Sleepless]] by Natalia Theodoridou</span>
(click: ?next)[(go-to: "slide 5")]<div style="position: fixed; left: 150px; top: 50px;">|illum>[Illumination](click-replace: ?illum)[<span class="glow" >Illumination</span>]</div>
<span style="font-size: 40px;">Comics are the ideal form of human information exchange.</span>
<img style="width: 60%;" src="Understanding-Comics-4-GUTTERS.jpg"></img>
<span style="font-size: 20px;">Understanding Comics by Scott McCloud</span>
(click: ?next)[(go-to: "Illuminate")](if: $displayCont)[<div style="font-size: 70%; position: fixed; right: 5px; bottom: 5px;">|next>[Continue]</div>]{
<div class="image-container" style="background-image: url(./1200_3.jpg);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "comics")]
}|inter>[Interactivity]
{(click-replace: ?inter)[|inter1>[Responsive]]
(click-replace: ?inter1)[|inter2>[Engaging]]
(click-replace: ?inter2)[<span style="font-weight: bold;">Interactivity</span>]}
<span style="font-size: 50px;">Keep user engaged with interaction.
<a target="_blank" style="color: cadetblue;" href='Ash/index.html'>ASH</a> by Lee Grey</span>
(click: ?next)[(go-to: "slide 5")]|Ease>[Ease](click-replace: ?Ease)[//Ease//]
Things I've used it for:
- Games.
- Challenges in a LARP.
- ARG.
(click: ?next)[(go-to: "slide 5")][[Storytelling Principles For Games->Fin]]
- Meaningful choices.
- Real characters.
- Hemingway shortness.
(set: $displayCont to false)
(css: "font-size: 120%;")[[[On Twine->Hello]]]
(css: "font-size: 70%;")[The design of text-based games.]
(css: "font-size: 70%;")[By Abigail Corfman]
(set: $displayCont to false)
(css: "font-size: 120%;")[Hello!]{
(set: $displayCont to true)
(click: ?next)[(go-to: "Dreamlight Valley")]
}{
<div class="image-container" style="background-image: url(./dreamlight.jpg);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "My Games")]
}{
<div class="image-container" style="background-image: url(./MyGames.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Hearth & Holmes")]
}{
<div class="image-container" style="background-image: url(./LibraryCapsule.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Twine")]
}{
<div class="image-container" style="background-image: url(./TwineMap.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Complex Map")]
}{
<div class="image-container" style="background-image: url(./OSMap.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "slide 4")]
}{
<div class="sleep-image" style="background-image: url(./SleeplessScreenshot1.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Sleepless 2")]
}{
<div class="sleep-image" style="background-image: url(./SleeplessScreenshot2.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Sleepless 3")]
}{
<div class="sleep-image" style="background-image: url(./SleeplessScreenshot3.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Sleepless 4")]
}{
<div class="sleep-image" style="background-image: url(./SleeplessScreenshot4.png);"></div>
(set: $displayCont to true)
(click: ?next)[(go-to: "Illum Examples")]
}Fin