Creare storie a bivi in maniera facile

Creare una storia a bivi è più semplice di quanto sembri. Con un unico file HTML è possibile realizzare racconti interattivi in cui il lettore prende decisioni e modifica lo sviluppo della narrazione. In questo articolo vedremo come farlo in modo semplice e accessibile a tutti.

Le storie a bivi sono racconti interattivi in cui il lettore (che può essere considerato anche “giocatore”) deve assumere decisioni in alcuni momenti chiave della narrazione. Ogni scelta porta a percorsi diversi, modificando lo sviluppo della trama fino a portare a uno dei possibili finali.

Alcuni tipi di storie a bivi possono essere rappresentati come alberi binari, una struttura di dati ricorrente nell’informatica.

Ci riferiamo a tipi di storie in cui ogni “punto decisionale” presenta esattamente due possibili scelte e ciascuna scelta conduce a uno sviluppo narrativo distinto. In questo modo, ogni nodo (A) dell’albero corrisponde a un momento di scelta, mentre i rami (B) rappresentano le alternative disponibili e le foglie (C), i possibili finali della storia, essendo nodi terminali.

Nota: dal punto di vista matematico, gli alberi binari appartengono alla famiglia dei grafi, strutture formate da nodi (detti anche vertici) collegati tra loro da linee (detti anche archi o lati).

Questo aspetto rappresenta un interessante elemento di contatto tra informatica e letteratura, mostrando come strutture classiche dell’informatica possano essere utilizzate per analizzare e progettare testi narrativi.

Vediamo quindi come realizzare una storia a bivi visualizzabile sulla digital board.

Un esempio di storia a bivi

Per mostrare nella pratica come una storia a bivi possa essere gestita con strumenti informatici, ti proponiamo un esempio realizzato in HTML + JavaScript. Il codice crea una piccola storia interattiva: il testo viene mostrato a schermo e, a ogni punto decisionale, compaiono due pulsanti corrispondenti alle possibili scelte.

Dal punto di vista della struttura, la storia è descritta come un insieme di “scene” collegate tra loro: ogni scena contiene un testo e un elenco di scelte che rimandano alla scena successiva. In questo modo, la narrazione diventa navigabile.

Nota: clicca su “Full screen” per lavorare a pieno schermo (ESC, poi, per uscire).

Come modificare la storia (guida per chi non è esperto)

Per modificare il codice, che è contenuto in un unico file .html, basta utilizzare Windows Notepad (il Blocco note di Windows, per capirsi) oppure un editor testuale più specifico come Sublime Text, che è disponibile per macOS, Windows e Linux.

Per scaricare il file .html nel tuo computer (così da poterlo modificare) basta cliccare sul link qui sotto:

Scarica la storia a bivi

Il codice HTML proposto è pensato per essere facilmente modificabile anche da chi non ha competenze di programmazione. La parte più importante da conoscere è la sezione in cui è definita la struttura della storia.

1. Dove si trova la storia nel codice

All’interno del file HTML/Javascript è presente una variabile chiamata story.
Questa variabile contiene tutte le scene (nodi) della storia: testi, scelte e collegamenti tra una scena e l’altra.

Ogni scena è identificata da un nome (come start, foresta, finale), che serve a collegare le scene della storia tra loro.

2. Com’è fatta una scena

Una scena è composta da:

• testo: ciò che viene mostrato al lettore;
• scelte: i pulsanti su cui il lettore può cliccare.

A livello di codice, una scena è costituita come segue (esempio):

stanza: {
  text: "Dentro c’è una stanza piena di libri antichi. {name} cosa sceglie?",
  choices: [
    { label: "Prende un libro", next: "finale_libro" },
    { label: "Cerca una torcia", next: "finale_torcia" }
  ]
},

Non è necessario capire tutto il codice: è sufficiente sapere che

• text è il testo del nodo attuale;
• choices contiene le due alternative;
• label contiene il testo relativo a ciascuna alternativa;
• next indica quale nodo e collegato a ciascuna.

3. Modificare il testo della storia

Per cambiare la storia è sufficiente:

• riscrivere il contenuto tra le virgolette del campo text;
• riscrivere il testo delle scelte ("Apri la porta", "Torna indietro");
• inserire nuove scene.

4. Aggiungere una nuova scena

Per aggiungere un nuovo pezzo di storia devi:

1. copiare una scena esistente;
2. incollarla sotto le altre;
3. cambiare il nome della scena;
4. collegarla a una scelta usando il valore next.

In questo modo la storia cresce come un albero, aggiungendo nuovi rami e nuovi finali.

5. I finali della storia

Una scena è un finale quando non contiene scelte.
In questo caso il lettore non può più proseguire e la storia termina.

6. Provare le modifiche

Dopo aver modificato il file:

1. salva il documento con estensione .html;
2. aprilo facendo doppio clic oppure trascinandolo in un browser (Firefox, Chrome…);
3. prova la storia e verifica che ogni scelta funzioni correttamente.

L’articolo Creare storie a bivi in maniera facile proviene da Missione Insegnante.