Perché una navigazione a grafo?

Sotto ogni funzionalità di PanelWave c’è una decisione presa prima della prima riga di codice: un capitolo non è una sequenza di pagine, è un grafo orientato. Le vignette sono nodi. I collegamenti dicono quale vignetta può seguire quale, a quale condizione e con quale transizione. Tutto ciò che lettori e autori vedono poi, da un semplice pulsante «avanti» a un mistero ramificato, è una conseguenza di questa scelta. Questo post spiega perché l’abbiamo fatta, che cosa sarebbero costate le alternative e perché a un fumetto lineare non costa nulla. Se ti interessano i meccanismi, la documentazione li spiega in Graph Navigation; qui c’è il ragionamento.

Tre modi di decidere cosa viene dopo

Il fumetto digitale eredita uno di due modelli. Il primo è quello della stampa: un fumetto è un elenco ordinato di pagine, e leggere significa sfogliarle. Conserva l’arte e la composizione, ma su uno smartphone vuol dire pizzicare e zoomare, e non ha un vocabolario per le scelte: l’unica decisione del lettore è avanti o indietro. Il secondo è il modello video, il motion comic: le vignette diventano inquadrature su una timeline, con suono e movimento, e il file scorre. Guadagna movimento e atmosfera e perde completamente il lettore. Il tempo lo scandisce qualcun altro, l’arte compete con l’animazione e non c’è nessuna porta da aprire.

Il terzo modello è il grafo. Ogni vignetta è un nodo con collegamenti verso le vignette che possono seguirla. Una storia lineare è una catena di collegamenti incondizionati, e una scelta è un nodo con due o più collegamenti in uscita con condizioni diverse. Il modello non privilegia nessuna delle due forme, ed è proprio questo il punto: il formato non ha una modalità normale e una modalità interattiva speciale. Ha una sola primitiva che descrive entrambe.

Che cosa dà un grafo ai lettori

L’esperienza del lettore discende dal modello in modo più diretto di quanto ci si aspetterebbe.

• Ritmo. Un nodo è una sosta. Il lettore avanza quando decide di farlo, oppure lascia che lo faccia la riproduzione automatica, con una durata stabilita dalla vignetta o dal lettore. Le illustrazioni restano ferme mentre le guarda, a differenza di un’inquadratura su una timeline.
• Percorso. Una deviazione è un collegamento che lascia la linea principale e un altro che vi rientra. Scene facoltative, vicoli laterali e stanze segrete non richiedono meccanismi speciali, e un lettore ha sempre una strada per tornare alla trama.
• Ritorno. Poiché ogni passo è un collegamento, tornare indietro significa percorrere lo stesso collegamento al contrario, transizione compresa. Cronologia e navigazione all’indietro funzionano in modo identico per storie lineari e ramificate.
• Scelta. Un hotspot su una porta registra in una variabile che cosa ha fatto il lettore; i collegamenti in uscita dal nodo successivo interrogano quella variabile. La scelta è del lettore, e il formato se la ricorda.
• Vista. Lo stesso grafo si presenta una vignetta alla volta su uno smartphone o come pagina composta su uno schermo grande. La vista pagina mostra la disposizione progettata dall’autore; la vista vignetta percorre i nodi. Il lettore passa liberamente dall’una all’altra, e la documentazione dell’interfaccia di lettura descrive che cosa fa ogni vista con «avanti» e «indietro».

Che cosa dà un grafo agli autori

Per chi crea l’opera, il grafo sostituisce i casi speciali con i dati. Una ramificazione non è uno script: è un collegamento con una condizione scritta in JSON Logic, una piccola regola che si legge come una frase. Le scelte sono hotspot che impostano variabili tipizzate con un ambito dichiarato, e lo stesso linguaggio di condizioni che instrada i collegamenti può anche sostituire il contenuto di una vignetta tramite una variante o nascondere un singolo balloon. Un solo linguaggio, imparato una volta.

Le pagine non sono sparite. Un capitolo può ancora definire impaginazioni con posizionamenti e un ordine di lettura, quindi la composizione pensata per la stampa resta e l’export per la stampa funziona come prima. La differenza è che la pagina descrive come sono disposte le vignette, il grafo come si muove la storia. Le due cose sono tenute volutamente separate, e il riferimento del formato spiega come convivono in page view versus panel view. Riordinare le vignette su una pagina cambia il loro ordine di lettura; non cambia mai il grafo.

E siccome il grafo è fatto di dati in un manifest JSON, non di logica in un programma, si può validare. Vignette irraggiungibili, vicoli ciechi, ingressi mancanti e cicli sono domande strutturali a cui uno strumento può rispondere prima che un lettore ci inciampi. Il Graph Editor del CMS disegna il grafo come una mappa, segnala questi problemi e ti permette di simulare qualsiasi percorso, e il controllo pre-pubblicazione ripete il controllo di raggiungibilità prima della pubblicazione.

Perché non pagine con salti?

L’alternativa ovvia e più economica è tenere le pagine e aggiungere un’istruzione di salto: vai a pagina 14 se il lettore ha preso la chiave. Gli strumenti di narrativa interattiva funzionano così da decenni, e per il testo funzionano bene. Per il fumetto, però, cede in due punti. Primo, un salto è un’eccezione all’ordine e non una parte del modello, quindi ogni strumento che conosce le pagine deve imparare i salti a parte, e la navigazione all’indietro ha bisogno di una contabilità tutta sua. Secondo, i salti di solito sono codice, e questo mette la ramificazione dietro una barriera che la maggior parte degli artisti non vuole attraversare. In un grafo, il collegamento è l’ordine. Non c’è nulla da aggiungere, e un editor visuale può disegnarlo senza che nessuno scriva uno script.

Perché non una timeline?

La timeline è allettante perché porta con sé suono e movimento gratis, e PanelWave usa davvero le timeline, all’interno di una vignetta, per animazioni e audio. L’errore è fare della timeline la spina dorsale della storia. Una timeline ha una sola direzione e una sola velocità, quindi l’interazione va aggiunta a forza sotto forma di pause e menu, e l’arte non ha mai modo di stare ferma. Un grafo mette la timeline al suo posto: un nodo può avere movimento, suono, persino video, e restare un luogo in cui il lettore si ferma, esplora e da cui riparte quando è pronto. Il movimento serve la vignetta invece di sostituirla.

Quanto costa alle storie lineari

Niente. Era la prova che il progetto doveva superare. Un fumetto tradizionale in PanelWave è una catena di collegamenti senza condizioni, che il CMS crea automaticamente man mano che aggiungi vignette. Il player la percorre esattamente come una storia ramificata: raccoglie i collegamenti in uscita, ne valuta le condizioni, prende il vincitore. Con un solo collegamento incondizionato per vignetta la valutazione è banale, e il lettore vede un fumetto che si legge dall’inizio alla fine. Paghi la complessità solo dove la usi, e puoi aggiungere una prima ramificazione al capitolo tre senza ristrutturare i capitoli uno e due.

Un grafo, tre livelli

Il grafo è anche ciò che permette a un ecosistema aperto di condividere un’unica definizione di storia. Il formato definisce il grafo come dati, il player lo valuta al momento della lettura e il CMS lo disegna e lo valida. Nessuno dei tre deve accordarsi su nulla oltre al manifest, e qualsiasi reader di terze parti che implementa le stesse regole ottiene la stessa storia. È questa la proprietà che intendiamo quando diciamo che il formato è il contratto, come descritto in Architecture. Il manifest è abbastanza compatto da leggerlo per intero; l’esempio commentato mostra un’opera completa in una pagina.

Il modello è anche il motivo per cui guardiamo con serenità a ciò che ci aspetta. Varianti di vignetta che cambiano contenuto in base allo stato, hotspot che agiscono, confini del paywall in punti esatti della storia e una vista di lettura in cui lo spazio tra le vignette diventa visibile sono tutte cose che si possono aggiungere a un grafo senza cambiare che cosa sia un grafo. Un ordine delle pagine o una timeline avrebbero richiesto un nuovo modello per ciascuna.

Per approfondire

• Graph Navigation: l’anatomia di un grafo, condizioni, transizioni e mutazioni.
• Graph: ogni proprietà degli oggetti grafo, collegamento e mutazione.
• Chapters and Pages: come convivono le impaginazioni e il grafo.
• Variables: lo stato che leggono le condizioni sui collegamenti.
• Graph Editor: disegnare, validare e simulare il grafo nel CMS.