A workshop on creating Interactive Stories using Twine.

1. Interactive Storytelling
A Twine Workshop

2. Presented by: Charles Palmer
Harrisburg University of Science and Technology
• Associate Professor
• Executive Director
• Program Lead
Author
“Gamification for Performance” 2016
Various articles and presentation on using game
technologies in education and alternate reality.

3. Today’s discussion
Outline
1. Overview of interactive storytelling
2. Exploration of examples and concepts
3. Building interactive stories
4. Train on the using Twine in the classroom
5. Produce and share a short interactive story
6. Wrap-up and final thoughts

4. Interactive storytelling …1Overview

5. Interactive storytelling …1
a form of digital entertainment in which the
storyline is not predetermined
Overview

6. Comparison
Linear stories
• Pre-scripted
• Typically delivered on one platform/medium
• Audience has no control
• Storyteller has all control
• Most common way to consume stories
• Most films and books follow this style
Interactive stories
• Made up of linear story loops
• Multiple ending narratives
• Often includes multiple delivery platforms
• Branching paths provide user choice
• User is player within the narrative
• Users create the narrative through
participation
Modified from Paulina Tervo’s,” Interactive Storytelling” slide deck. Downloaded from SlideShare.net 15 May 2016

7. Not a new concept
What examples of “interactive
storytelling” can you think of?

8. Group work
◇ Arrange yourselves into groups of three
◇ Review the assigned ARG
◇ Answer the following questions:
￭ Who is the audience
￭ What is the purpose of the ARG/Sim
￭ Describe the player activities
http://playgen.com/play/floodsim/1 2 http://www.andrew.cmu.edu/course/53-610/
4 http://timesocietygame.com/3 www.conducttr.com/training/be-
inspired/faktion/
15 min

9. Building Interactive stories …2
Define Design Develop Deploy
Exploration

10. Define Design Develop Deploy
In this phase we identify some of our goals and constraints for the
learning exercise.
• Goals: what needs to be achieved
• Criteria: what technology, timeframe, and limits are in place
• Scope: what would a success project accomplish
Define phase:

11. Next, we’ll focus on the learner experience
• Experience: Who is the player, what experience are we
constructing
• Story: Where, when, and why will the player undertake these
activities
• Interactions: What activities will the player have to complete in
order to master the learning goal
• Platform: What technologies are needed to facilitate these
activities
Design phase:
Define Design Develop Deploy

12. Define Design Develop Deploy
Now we build the experience
• Plan: Outline a schedule of story beats and activities
• Create media assets: Write, collect, record, format and organize
the various elements need to tell the story and promote learner
activities
• Implement technologies: Build the frame work to support the
learner activities
Develop phase:

13. Define Design Develop Deploy
Now we prepare and deliver the experience with the audience.
• Finalize: Verify all media assets
• Testing: Complete testing and archiving of the user experience
• Launch: Initiate the game
• Monitor: Game masters monitor, interact, and manage the real-
time user experience
• Close: End the game, update the archives, debrief the team and
remove/demote and live game links
Deploy phase:

14. A brief recap of the development process
Building interactive stories
Define Design Develop Deploy

15. Let’s see it in action …3 A walkthrough of the development processBuilding

16. Define …
Build an experience which let’s 5th graders interpret
numerical expressions.
Goals:
Criteria:
Scope:

17. Define …
Build an experience which let’s 5th graders interpret
numerical expressions.
Goals: Practice MATH.CONTENT.5.OAA.2
Criteria: Re-playable, individual, fun
Scope: 5 mins, web browser

18. Design…
Build an experience which let’s 5th graders interpret
numerical expressions.
Experience:
Story:
Interactions:
Platform:

19. Design…
Build an experience which let’s 5th graders interpret
numerical expressions.
Experience: Choose your own adventure style
Story: Kids must use math puzzles to retrieve baseballs
from a neighbors yard.
Interactions: Select answers from given choices
Platform: Twine

20. Design story components …
Build an experience which let’s 5th graders interpret
numerical expressions.
Setting: a neighbor’s backyard area
Plot: retrieve baseballs from neighbor’s yard
Goal: practice the order of operation for mathematical
equations
Characters:
Friend(s): Brett, Madison, Sam
Villain(s): Mr. Harper
Others: none

21. Develop…
Build an experience which let’s 5th graders interpret
numerical expressions.
Plan: Outline branching story
Create media assets:
Implement technology:

22. Outline branching story
Introduction Reveal goal
Identify
challenge
Try solution
Get help
Success Resolution
Failure

23. Develop…
Build an experience which let’s 5th graders interpret
numerical expressions.
Plan: Outline branching story
Create media assets: Write story and identify images
Implement technology: Build Twine story

24. Let see the finished story

25. Deploy…
Build an experience which let’s 5th graders interpret
numerical expressions.
Final production: Refine story, clues, passages, and
resolution
Testing: - - -
Launch: - - -
Close: - - -

26. Hey, since we’re here, let’s
make something.4Train

27. Place your screenshot here
Our development tool…
Twine is an open-source tool
for telling interactive, nonlinear
stories.
http://bit.ly/cellcitygame

28. How it works
We’re going to start by building a short linear story.
Passage Passage Passage

29. Branching choices
We can also provide options for the player
Passage Passage Passage
Passage

30. Twine instructions
Links
Create links between passages
using [[text]] or [[text|name]].
Macros
Macros are short commands used
by twine to effect your story. The
macros are pieces of code
implemented when the macro is
called; i.e., the (set:) macro is used
to assign values.
Styling
Text formatting can be done within
each passage using styles. Visit
https://twine2.neocities.org/ for a
complete list of commands.
Variables
Store values in variables which can
be modified, displayed, and acted
upon. Use the set command to do
this; (set: $bugs to 5)
Conditionals
Use variable values to determine
what happens next. Here is an
example (if: $legs is 8)[You're a
spider!]
Randomization
Use random and either to create
unique experiences.
Assign a random value by using
(random: 1,6) or randomly select a
value from a group (either: "slimy",
"goopy", "slippery")
http://bit.ly/twine_manual

31. Some advanced tricks
Popups
Try this (alert:"Hello World") to
have a message presented to the
user. Look up confirm: and prompt:
for added functionality.
click
This command can be used to
create your own macros. Try this;
There is a small dish. (click:
"dish")[Your finger gets wet.]
http://bit.ly/twine_manual
Removing navigation
Edit the .redo and .undo classes in
the Story Stylesheet to remove the
navigation buttons.
.redo, .undo { display: none; }
Setting the background
Use the body selector in the Story Stylesheet to set the background of all
passages.
body {
background:
url("http://previewcf.turbosquid.com/Preview/2014/08/01__22_25_34/410_tile_Sky.jpg
e9d882c2-4435-4898-99f2-31979d851eb1Large.jpg")
}
A twine tutorial
Check out VegetarianZombie’s
incredible tutorial series on
YouTube. http://bit.ly/twine_tutorial

32. Deploy your story
http://philome.la/ is a free hosting service for your Twine stories.
(This tool requires an active twitter account)
http://bit.ly/twine_manual

33. Group work
5
Find a partner who teaches the same subject, grade year, or
has a similar administrative role as you.
Together, you will be a short interactive story for your students.
Start by choose a learning goal/objective.
Next use the “Interactive Story Worksheet” to plan out your
experience.
Finally, build the activity in Twine.
Produce
Deploy and share your URL with the group.

34. Thanks for playing
6
• For more information on Twine visit -
http://bit.ly/twine_tutorial
• To learn more about building interactive
stories, check out my recently released
book “Alternate Reality Games:
Gamification for Performance”
Charles Palmer
Harrisburg University of Science & Technology
@charlespalmer
www.linkedin.com/in/charleslpalmer/
http://www.slideshare.net/charlespalmerhu
Wrap-up

35. Thanks!• For more information on Twine visit - http://bit.ly/twine_tutorial
• To learn more about building interactive stories, check out my
recently released book “Alternate Reality Games: Gamification
for Performance”
Charles Palmer
Harrisburg University of Science & Technology
@charlespalmer
www.linkedin.com/in/charleslpalmer/
http://www.slideshare.net/charlespalmerhu

36. Credits
Special thanks to all the people who made and released
these awesome resources for free:
◇ Presentation template by SlidesCarnival
◇ Photographs by Unsplash