Kom igång med Twine

Svårighetsgrad:

Det här är en introduktion till Twine, ett digitalt verktyg för att skapa interaktiva berättelser. Med Twine kan göra textbaserade spel att köra direkt på webben eller storyboards till interaktiva berättelser och spel som du senare programmerar i Scratch eller något annat programmeringsspråk.

Du skapar en karta över din berättelse där du bestämmer vilka vägar som ska vara möjliga att ta i berättelsen. Du kan enkelt se alla olika vägar och hur berättelsen förändras beroende på vilka val som görs. För att göra dessa länkar och för att lägga in bilder eller ändra design, använder du html-kod.

Vill du veta mer om vad en interaktiv berättelse är, läs här innan du kör igång med Twine.

Delmoment 1: Lär känna Twine

Twine är på engelska, men har tydliga symboler som är lätta att känna igen. Här kommer en guide till hur du hittar i Twine och vad du kan göra.

Öppna programmet på din dator (om du har laddat ned det) eller surfa in på https://twinery.org om du vill använda webbversionen. Om du använder Twine på webben behöver du klicka på texten Use it online som står i rutan till höger på sajten.

Du startar genom att välja +Story för att börja på en ny berättelse.

Twine Story

Du får då hitta på ett namn på din berättelse och sedan välja +Add.

Twine Add

Nu kommer du in till arbetsytan där du ska skapa ”kartan” till din berättelse! Här finns från början bara en textruta, som en post-it-lapp ungefär, mitt på skärmen. Det är din startruta där berättelsen ska börja. Du ser att det är en startruta för att den har en grön symbol med rymdraket på. Om du vill kan du ändra startruta senare, men för att komma igång använder du den!

I Twine kallas de här textrutorna för Passage, vilket betyder passager eller avsnitt. Avsnitten är alltså de olika delar som din berättelse består av. I varje avsnitt kan du sedan länka till ett nytt avsnitt och på så sätt skapar du vägar mellan berättelsens olika delar.

Twine Newstory

Twine har tre lägen:

  1. Story map: Arbetsytan där du bygger upp din ”karta” med berättelsens alla avsnitt och där du bestämmer vilka vägar berättelsen kan ta.
  2. Passage editor: Pop up-redigerare för ett avsnitt där du skriver in text och gör länkar till andra avsnitt. Du kan även lägga in bilder och ändra designen på hur avsnittet ser ut.
  3. Play mode: Uppspelnings-läget där du spelar upp din digitala berättelse och ser hur den ser ut på webben.

De här är de viktigaste delarna att känna till för att komma igång med Twine:

  • För att lägga till fler textrutor till berättelsen trycker du på +Passage, en grön knapp längst ned till höger.

    Twine Passage

  • För att börja skriva i ett avsnitt dubbelklickar du på den rutan, eller markerar rutan och väljer pennan.
  • För att ta bort en textruta markerar du den och väljer soptunnan.
  • Du kan testa hur en textruta kommer att se ut i uppspelnings-läge genom att markera den och välja skalbaggen.
  • För att göra en annan textruta till din startruta markerar du den och väljer rymdraketen.

    Twine Avsnitt Val

  • Du kan spela upp din berättelse med Play-knappen längst ned till höger.
  • Du kan testa din berättelse med Test-knappen (skalbaggen) längst ned till höger. Skillnaden mellan Test och Play är att ….

    Twine Test Play (1)

  • För att spara din berättelse klickar du på uppåtpilen som finns bredvid namnet på din berättelse, längst ned till vänster, och väljer Publish to file.

    Twine Save3

I Twine Wiki hittar du mer hjälp och instruktioner för att använda Twine. 
Men nu är det dags att lära känna verktyget genom att skapa en första berättelse i Twine!

Delmoment 2: En röd tråd i Twine

Nu ska du få skapa en linjär berättelse i Twine och länka samman de olika delar som en berättelse består av till en helhet. Du kommer att börja med att lägga in din röda tråd som avsnitt i Twine. Du gör ett avsnitt vardera för berättelsens Vem, Var, Vad, Hur och Mål.

Har du inte hittat på någon röd tråd ännu? Gör någon av övningarna här!

  1. Använd startrutan och välj pennan för att gå in och redigera det avsnittet. Överst i textrutan skriver du in namnet på avsnittet, döp den till ”START”. Detta kommer inte att synas när du läser berättelsen sedan!
  2. Byt ut texten nedanför, där det står “Double-click this passage to edit it”. Skriv in en mening som du tycker passar för att inleda din berättelse, till exempel “Det var en gång…”. Tänk på att meningen ska passa ihop med nästa avsnitt, där du skriver om VEM som är berättelsens hjälte.

    Twine Avsnitt Start

  3. Stäng textrutan med krysset uppe till höger.
  4. Skapa ett nytt avsnitt med +Passage. Lägg den nya textrutan bredvid startrutan.

    Twine Passage

  5. Markera ditt nya avsnitt och välj pennan för att gå in och redigera det. Döp det till ”VEM”. Nedanför skriver du en mening om vem din hjälte är. I vårt exempel har vi skrivit ”Bullbakande Batman, en superhjälte som älskar att baka bullar.” Tänk på att meningen ska passa ihop med den som du skrev i START.

    Twine Avsnitt Vem

  6. Nu fortsätter du likadant och skapar avsnitt för VAR, VEM, HUR och MÅL. Tänk på att varje avsnitt ska passa ihop med det innan, så att de tillsammans blir en lång berättelse.

I vårt exempel blir berättelsen:
”Det var en gång Bullbakande Batman, en superhjälte som älskade att baka bullar. Han bodde i Bagarmossen utanför Stockholm. Där bodde också många barn som brukar leka på en kulle mitt på torget. Barnen älskade bullar! Där fanns också Bullförstörande Zombies som ville trampa på alla bullar som de kom åt. Men Bullbakande Batman hade en zombiesövande sång. Om han viskade sången i örat på en zombie så somnade den. Då fick alla barn i Bagarmossen bullar av Bullbakande Batman!”

Twine Storyboard Rodtrad

Testa din berättelse! Tryck på Play. Vad händer? Jo, du kan bara läsa startrutans text, eller hur? Nu måste du lägga till länkar för att skapa en väg genom berättelsen. Det gör du genom att programmera! Här använder du html-kod.

  1. Gå tillbaka till arbetsfältet för ”kartan” och markera startrutan, ditt avsnitt för START. Välj pennan för att redigera avsnittet.
  2. Nu ska du skriva in html-kod som skapar en länk mellan START och VEM-avsnittet. Under din text skriver du in denna kodrad:
    [[Vem är hjälten?|VEM]]
    Den här kodraden skapar en länk [ ] till VEM. Länken syns inte utan ligger inbakad i textraden ”Vem är hjälten?”.

    Twine Avsnitt Start Lankad

  3. Gör nu på samma sätt för alla dina avsnitt! Kopiera kodraden och byt bara ut text och länk så att det stämmer med varje avnitt. I vårt exempel använder vi:
  • VEM: [[Var finns hjälten?|VAR]]
  • VAR: [[Vad för hinder möter hjälten?|VAD]]
  • VAD: [[Hur kan hjälten övervinna hindret?|HUR]]
  • HUR: [[Vad händer när hjälten övervinner hindret?|MÅL]]
  • MÅL: Om du vill kan du ha en länk tillbaka till START, annars låter du detta avsnitt vara olänkat eftersom berättelsen tar slut här.

Twine Storyboard Rodtrad Lankad

Testa din berättelse! Tryck på Play. Kan du läsa hela berättelsen genom att klicka dig fram med länkarna?

Om du tycker att berättelsen behöver ändras för att flyta på bra, kan du gå in i de olika avsnitten och ändra dina textrader. När du känner dig klar kan du låta någon annan läsa berättelsen och se om den personen förstår den röda tråden.

Färdig!

Grattis, nu har du lärt dig att länka ihop en berättelse i Twine. Kom ihåg att spara ned berättelsen som en html-fil till din dator. 

Twine Save3

I nästa uppgift får du prova att skapa olika valmöjligheter som gör att berättelsen kan ta olika vägar!

Har du kommentarer till materialet på den här sidan? Mejla info@kodcentrum.se