Esempio di narrazione non lineare con Twinery
Codici per Twinery
Creare passaggi e collegamenti
Mettere il nome del passaggio a cui si vuole creare il collegamento tra due parentesi quadre, [[come questo]]. Questo trasformerà il nome del passaggio in un link cliccabile.
È possibile anche fare in modo che il testo mostrato sulla pagina sia diverso dal nome del passaggio.
Ad esempio, se si vuole avere due modi per raggiungere un passaggio, oppure non si vuole rivelare il nome della destinazione. In questi casi puoi scrivere questo:
[[testo sulla pagina | nome del passaggio]] in questo modo “testo sulla pagina” sarà il link ma il giocatore verrà portato al passaggio “nome del passaggio”
Inserire immagini
Una volta che conosciamo qual è l' URL dell’ immagine è semplice visualizzarla nella nostra
È preferibile caricare immagini e file audio su un nostro sito Web (o ospitarli su Google Drive o Dropb ox).
< img src="l'URL della tua immagine" width="500" height="300" alt="leone">
< img src="l'URL della tua immagine"alt="leone">
La parte relativa alla larghezza e all'altezza del codice controlla la dimensione dell'immagine sulla pagina.
Se si lasciano disattivati, visualizzerà l'immagine nelle dimensioni originali.
È possibile anche inserire il codice di incorporamento
<iframe src="URL immagine" width="500" height="300" allow="autoplay"></iframe>
Inserire un’immagine di sfondo
Per aggiungere un'immagine di sfondo o un .gif animato, assicurati di selezionare un'immagine di alta qualità/grande dimensione. Vai all'editor CSS:
tw-story { background-image:url(INSERIRE IL TUO URL QUI) background-size:cover; }
esempio:
tw-story {background-image:url(https://www.hardware-programmi.com/wp-content/uploads/2019/07/cambiare-immagine-sfondo-computer-750x460.jpg) background-size:cover; }
Se vuoi inserire lo sfondo ad un solo passaggio devi prima creare l’etichetta nel passaggio (in alto c'è l'opzione “+ tag" o “etichetta”) e modificare il codice per lo stile in questo modo
tw-story[tags~="tag nodo"] {background-image:url("URL immagine"); background-size:cover; }
Aggiunta di un video
Per incorporare un video da un servizio come YouTube o Vimeo, devi ottenere il codice di incorporamento ed eventualmente personalizzarlo.
Una volta che hai il codice, inseriscilo così com'è nel tuo passaggio per visualizzarlo.
Ad esempio, su Youtube: premi "condividi" e seleziona "incorpora" (taglia e incolla il codice hmtl nel tuo passaggio]
Il codice da inserire per un video inserito in una pagina web è simile a quello per un'immagine:
<video src="l'URL del tuo video" width="640″ height="480″> </video>
Aggiunta di effetti sonori e musica
Il codice per aggiungere un effetto sonoro di base (Harlow, predefinito) è come il seguente. Questo andrebbe nel passaggio in cui vuoi che inizi il suono ...
<audio src="http://www.seriousplaylab.com/twine20/twinesound.mp3" autoplay>
L'attributo “autoplay” fa in modo che venga riprodotto non appena viene visualizzato il passaggio in cui si trova.
Per formattare il testo puoi usare i pulsanti in alto
Aggiungi HTML
Per aggiungere HTML alla tua storia, ad esempio del testo che hai personalizzato o hai un codice per incorporare una risorsa come un video di YouTube, puoi aggiungerlo direttamente al testo del tuo passaggio. Verrà visualizzato esattamente come lo hai inserito.
Esempio incorporamento di un gioco fatto con learning apps
<iframe src="https://learningapps.org/watch?v=pr9agnz5t21" style="border:0px;width:100%;height:500px" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
Per nascondere I pulsanti nella barra laterale
Codice da inserire nel foglio di stile
tw-sidebar {
visibility: hidden
}
Per aggiungere o togliere punti
Inserire settare la variabile punti (set: $punti to 0)
Hai $punti punti
Nel blocco della risposta corretta
(set: $punti to +10)
Benissimo
i tuoi punti sono aumentati
ora hai $punti punti
(set: $punti to - 5)
Attenzione la risposta non è corretta!
Considera anche le istruzioni del programma