Interactive StorytellingA Twine Workshop

Presented by: Charles PalmerHarrisburg University of Science and Technology• Associate Professor• Executive Director• Program Lead

Author“Gamification for Performance” 2016Various articles and presentation on using game technologies in education and alternate reality.

Today’s discussionOutline1. Overview of interactive storytelling2. Exploration of examples and concepts3. Building interactive stories4. Train on the using Twine in the

classroom5. Produce and share a short interactive

story6. Wrap-up and final thoughts

Interactive storytelling …1Overview

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

Overview

ComparisonLinear 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

Not a new conceptWhat examples of “interactive storytelling” can you think of?

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

Building Interactive stories …2Define Design Develop Deploy

Exploration

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:

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

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:

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:

A brief recap of the development process

Building interactive stories

Define Design Develop Deploy

Let’s see it in action …3A walkthrough of the development process

Building

Define …Build an experience which let’s 5th graders interpret numerical expressions.

Goals:

Criteria:

Scope:

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

Design…Build an experience which let’s 5th graders interpret numerical expressions.

Experience:

Story:

Interactions:

Platform:

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

Design story components …Build an experience which let’s 5th graders interpret numerical expressions.

Setting: a neighbor’s backyard areaPlot: retrieve baseballs from neighbor’s yardGoal: practice the order of operation for mathematical equations Characters:

Friend(s): Brett, Madison, SamVillain(s): Mr. HarperOthers: none

Develop…Build an experience which let’s 5th graders interpret numerical expressions.

Plan: Outline branching story

Create media assets:

Implement technology:

Outline branching story

Introduction Reveal goal Identify challenge Try solution

Get help

Success Resolution

Failure

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

Let see the finished story

Deploy…Build an experience which let’s 5th graders interpret numerical expressions.

Final production: Refine story, clues, passages, and resolution

Testing: - - -

Launch: - - -

Close: - - -

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

Train

Place your screenshot here

Our development tool…Twine is an open-source tool for telling interactive, nonlinear stories.

http://bit.ly/cellcitygame

How it worksWe’re going to start by building a short linear story.

Passage Passage Passage

Branching choicesWe can also provide options for the player

Passage Passage Passage

Passage

Twine instructionsLinksCreate links between passages using [[text]] or [[text|name]].

MacrosMacros 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.

StylingText formatting can be done within each passage using styles. Visit https://twine2.neocities.org/ for a complete list of commands.

VariablesStore values in variables which can be modified, displayed, and acted upon. Use the set command to do this; (set: $bugs to 5)

ConditionalsUse variable values to determine what happens next. Here is an example (if: $legs is 8)[You're a spider!]

RandomizationUse 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

Some advanced tricksPopupsTry this (alert:"Hello World") to have a message presented to the user. Look up confirm: and prompt: for added functionality.

clickThis 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 navigationEdit the .redo and .undo classes in the Story Stylesheet to remove the navigation buttons..redo, .undo { display: none; }

Setting the backgroundUse 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.jpge9d882c2-4435-4898-99f2-31979d851eb1Large.jpg")}

A twine tutorialCheck out VegetarianZombie’s incredible tutorial series on YouTube. http://bit.ly/twine_tutorial

Deploy your storyhttp://philome.la/ is a free hosting service for your Twine stories. (This tool requires an active twitter account)

http://bit.ly/twine_manual

Group work

5Find 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.

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 PalmerHarrisburg University of Science & Technology@charlespalmerwww.linkedin.com/in/charleslpalmer/http://www.slideshare.net/charlespalmerhu

Wrap-up

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 PalmerHarrisburg University of Science & Technology@charlespalmerwww.linkedin.com/in/charleslpalmer/http://www.slideshare.net/charlespalmerhu

http://bit.ly/GfP-AMZN

CreditsSpecial thanks to all the people who made and released these awesome resources for free:

◇ Presentation template by SlidesCarnival◇ Photographs by Unsplash