Creare storie interattive con Undum

Avevo già parlato, qualche tempo fa, delle avventure testuali, uno dei più antichi generi di giochi per computer, i cui primi esemplari risalgono a epoche in cui le interfacce grafiche erano pressoché inesistenti. Argomento di oggi sarà un genere a loro “cugino”, ossia le storie interattive, assieme a una libreria JavaScript per realizzarle in modo semplice (anche se non necessariamente facile). Se siete abbastanza vecchi da aver vissuto gli anni d’oro del libro-game in Italia, allora sapete già cosa siano le storie interattive: storie a bivi, in cui ogni blocco di testo si conclude con una o più scelte, in base alle quali cambierà l’andamento della narrazione. La scelta in questione, di solito, è presentata nella forma di frasi quali “Se vuoi aprire la porta, vai alla pagina 43. Se vuoi continuare lungo il corridoio, vai alla pagina 210”: in base a ciò che scegliamo di fare, continueremo a leggere dalla pagina corrispondente a quella azione. Col tramonto dei libri-game e la pesante affermazione di internet, le storie interattive si sono evolute, adattandosi al nuovo ambiente: dalla pagina stampata siamo passati alla pagina digitale e lo HTML, utilizzato per produrre pagine e siti web, si è dimostrato un ottimo veicolo anche per le storia interattive. Non l’unico veicolo, perché progetti come Inform hanno scelto una strada leggermente diversa, ma di certo la struttura “a bivi” delle storie interattive si adatta benissimo alla forma di un sito: basta sostituire il numero di pagina con un link da cliccare, ed ecco che la storia si è trasformata in un perfetto inserto per un normale sito web. Un vecchio libro-game, dunque, può oggi essere trasformato in un insieme di pagine HTML, corrispondenti alle “pagine” del libro cartaceo, e collegate tra loro da link, che permettono di saltellare da una pagina all'altra  senza bisogno di sfogliare il libro. Questo, se non altro, è il modo più semplice in cui si possa realizzare una storia interattiva su computer. Avere qualche centinaio di pagine HTML, però, può essere decisamente scomodo, sia da realizzare che da mantenere, e può dare problemi di lentezza, dovendo attendere i comodi del server ogni volta che clicchiamo su un bivio; per questo motivo, sono state prodotte alcune infrastrutture basate su librerie JavaScript, che permettono di produrre testo in base ai nostri click e mantenendosi sempre sulla stessa pagina HTML, il cui contenuto sarà di volta in volta modificato dal JavaScript, in modo veloce ed efficiente. Undum è una di queste infrastrutture, probabilmente la più semplice da usare, anche se è bene ricordare che “semplice” e “facile” sono due aggettivi dal significato diverso: Undum è semplice, ma non necessariamente facile. Vedremo il perché. In linea di massima, Undum è composto da tre elementi fondamentali: una pagina HTML, tre librerie JavaScript e un paio di files CSS. La pagina HTML è il luogo su cui apparirà il testo della storia; le librerie JavaScript servono a contenere il testo e a scriverlo sulla pagina; i files CSS servono a definire la grafica e l’impaginazione della storia. Tutto qui. Per essere usato, è sufficiente modificare la pagina HTML, i fogli di stile CSS e una delle librerie JavaScript, per inserire la vostra storia e adattare la grafica alle vostre esigenze. Una volta fatto questo, basta caricare il pacchetto sul proprio sito e incorporare la pagina HTML nel punto che preferite del vostro sito. Molto semplice, come dicevo: non c’è niente da installare sul vostro computer, ma solo un paio di files da modificare, cosa che si può fare con un qualsiasi editor di testo. Semplicità non è facilità: sebbene sia semplice, può non essere facile da utilizzare, se si è totalmente ignoranti in fatto di programmazione. Non è necessario molto, perché basta una minima infarinatura di HTML (per modificare la pagina) e di JavaScript, per modificare la libreria, e i files di partenza sono ricchi di commenti, che spiegano come effettuare la maggior parte delle modifiche, ma non è un progetto “visuale”, di quelli in cui basta trascinare qui e là un paio di finestre ed etichette, senza una idea precisa di cosa ci sia dietro. La pagina HTML, in particolare, è piena di indicazioni “modifica qui” e “non modificare qui”, ma anche la libreria JavaScript non scherza, sotto questo aspetto, e dovrebbe essere sufficientemente accessibile anche per un non-programmatore. Una volta scaricato il file ZIP ed estratto il contenuto, la cartella di Undum che ci interessa (cioè la cartella games), presenta questa struttura:

tutorial.en.html
tutorial.ru.html
media/
css/
games/
img/
js/

I due files HTML che troviamo all'inizio sono appunto due guide, una in inglese e una in russo, che spiegano il funzionamento di Undum e lo spiegano attraverso una sorta di storia interattiva: seguendo il tutorial, potrete leggere sia le spiegazioni, sia verificarle di persona, “giocando” il testo. La cartella CSS contiene due fogli di stile, undum e undum-mobile, che determinano la grafica della pagina HTML: il primo file ne definisce la grafica per i computer, il secondo per i dispositivi mobili. La cartella Games contiene il materiale usato da ogni gioco: nello specifico, contiene le tre immagini mostrate nel corso del tutorial e le librerie JavaScript specifiche per ogni singola storia. La cartella Img contiene immagini di base, utilizzate dai fogli di stile per impostare sfondi, titoli e altri elementi della pagina HTML. La cartella Js contiene due librerie JavaScript di base, ossia una versione di jQuery e Undum: non toccatele, per evitare danni. Ciò che possiamo modificare senza problemi, per creare le nostre storie, sono i files HTML, i fogli di stile CSS e tutto il contenuto della cartella Games. Se vogliamo cambiare le immagini di base, possiamo modificare anche il contenuto della cartella Img, ricordandoci però di modificare di conseguenza anche i fogli di stile, se le nuove immagini avranno un nome differente. Il minimo indispensabile da modificare, in ogni caso, è composto da due files: tutorial.en.html e tutorial.game.en.js (nella cartella games). Anche i loro nomi possono essere cambiati; anzi, sarebbe proprio meglio cambiarli. Un gioco, quindi, potrebbe avere una struttura di questo tipo:

storia.html
media/
css/
games/
storia.game.js
img/
js/

In questo esempio, Storia.html è la pagina su cui sarà scritta la nostra storia, mentre Storia.game.js è la libreria che si occuperà di scrivere la nostra storia. Entrambi i files possono essere prodotti, modificando i modelli già esistenti, ossia tutorial.en.html e tutorial.game.en.js: anzi, produrli in questo modo è il sistema consigliato, nonché più semplice. Una volta che abbiamo finito di scrivere la nostra storia, basterà caricare tutto quanto (Storia.html, la cartella Media e tutte le sue sottocartelle) sul nostro sito. Se vogliamo scrivere più storie, potremo riutilizzare sempre la stessa struttura di base, aggiungendo semplicemente i files delle nuove storie:

storia.htmlnuovastoria.htmlmedia/css/games/storia.game.jsnuovastoria.game.jsimg/js/

E così via: l’unica limitazione è che tutte le storie avranno la stessa grafica, ma a questo si può ovviare facilmente, creando nuove copie dei foglio di stile e modificandoli come preferiamo. Siccome il tutorial di Undum è disponibile solo in inglese e russo, qui potete scaricare il tutorial in italiano: la traduzione è mia e anche gli eventuali refusi sono miei. Volendo, puoi essere usato anche come base, per scrivere le vostre storie, dato che la struttura è la stessa di Undum inglese.