Tutoriel pour débuter Twine/Harlowe
Ce tutoriel débutant vous guide pas à pas pour prendre en main Twine, une application open-source pour créer des histoires interactives à choix multiples. Il s’adresse à ceux qui n’ont pas de connaissances avancées en code. Plongez dans le monde de la narration non linéaire, créez des embranchements intrigants et des fins multiples. Développez vos compétences d’écriture tout en vous amusant avec l’art de la création sur Twine et participez à la N.U.I.E.
Vous avez votre histoire ? Dessinez un plan, puis réalisez-le.
Je fais ce tutoriel pour Twine 2.7.0, 8 July 2023.
Les bases
Hiérarchie
Histoire et passages :
L’histoire est le projet sur lequel vous travaillez. Elle s’ouvre depuis la bibliothèque de Twine. Dans la vue graphique, chaque carré représente un passage, dont le nom vous permet de le lier à d’autres passages. Chaque passage peut correspondre à une page lors de l’exécution du jeu.
Macros et Ancres :
Les macros sont entre (parenthèses) et vont exécuter une certaine fonction. Elles permettent d’aller assez loin dans la programmation, et elles sont toutes référencées dans la documentation. Les ancres, ou en anglais, hook, sont entre [crochets] et servent à définir des portions de texte, qui peuvent être liées avec une macro en les collant sans espaces.
Liens entre passages
Comme chaque passage a un nom symbolique, vous devez faire des liens vers le passage en utilisant ce symbole exact. Il existe plusieurs manières de faire les liens, la plus simple est de mettre le nom du [[passage]] entre double crochets. Vous pouvez aussi mettre [[le texte qui apparaîtra->passage]] du coté d’origine d’une flèche pointant vers le [passage<-le texte qui apparaîtra]. C’est l’équivalent de la macro (link-goto: ).
[[passage]]
[[le texte qui apparaîtra->passage]]
[[passage<-le texte qui apparaîtra]]
(link-goto: "passage", "le texte qui apparaîtra")
Image externe
Pour inclure une image, copiez son URL, ou hebergez-la sur un autre site, tel que Imgur, puis mettez son adresse dans le paramètre src=”“ d’une balise html <img><\img>.
<img src="https://www.adressedelimage.com" alt="Titre de l'image" class=""></img>Lien externe
Pour que le lien externe soit persistant, il faut que son ancre soit affectée par une macro (link-repeat: ) :
(link-repeat: "Il découvrira le Cercle de l'Orbite Galactique")[(open-url: "http://www.lecog.fr")]
Quelques macros
La macro (visited: )
La macro (visited: ) sert à tester si un certain passage a déjà été visité par le lecteur. Si c’est le cas, alors elle fera fonctionner une [ancre] collée directement, et peut par exemple faire apparaitre un texte ou exécuter une autre macro. Le “nom du passage” doit être entre guillemets.
La macro (display: )
Elle sert à faire apparaître un autre passage dans le passage actuel. La macro (display: ) peut être utile en particulier associée à (visited: ), car elle permet de faire apparaître certains passages que si on en a visité d’autres. Pour cela, la macro (visited :) va affecter une [ancre] qui contient la macro (display: ). Appeler le passage actuel crée une boucle, et sans condition de sortie, c’est une récursion infinie.
(visited: "nom du passage précédent")[Le texte à révéler]
(visited: "nom du passage précédent")[(display: "nom du passage à révéler")]
Révéler un texte par un (click: )
La macro (click: ) va réveler un certain passage de texte et rendre cliquable le texte placé entre guillemets dans la macro. Ce texte sera cliquable dans tout le passage.
Code :
"Je cherche des infos sur Mohawk & Headphone Jack"
(click: "Mohawk & Headphone Jack")[
T'incarne un mec avec une crête et un casque sur les oreilles]
Rendu avant le click :
Rendu après le click :
Développement
Variables
Une variable est un symbole qui contient une donnée.
Variable globale (pour toute l’histoire):
$bike
Variable locale (limitée à l’ancre ou au passage):
_vélo
La variable peut être mise à jour (on change la donnée qu’elle contient) et incrémentée (on augmente sa valeur).
Pour la mettre à jour, il faut appeler le symbole de la donnée et la faire muter avec la macro (set: ). Ici la variable locale _vélo contient la donnée textuelle (un string) Décathlon.
(set: _vélo to "Décathlon")
Pour l’incrémenter, il faut appeler la variable et fixer sa valeur à elle-même (it) et lui ajouter la valeur dont on l’incrémente. Ici la variable globale $bike contient un nombre entier (un int) egal à 1, puis incrémenté de 2.
(set: $bike to 1)
(set: $bike to it +2)
Pour faire apparaître la variable dans le texte on utilise la macro (print: )
Le matin vous avez roulé (print: $bike)km sur votre vélo (print: _vélo).
Rendu : Le matin vous avez roulé 3km sur votre vélo Décathlon.
Ce code fait apparaitre le texte correspondant dans la liste de données “texte_X” séparés par , des virgules,. Si $bike = 3, la macro (nth: ) fait apparaitre “texte_3” :
(nth: $bike, "texte_1", "texte_2", "texte_3")
Conditions et tests de variables
La base des tests conditionels est la macro (if: ). Elle va tester si quelque chose est vrai, tester si une variable a une valeur définie, par exemple. Cette macro n’accepte que des booléens (des variables qui ne peuvent être que TRUE ou FALSE), et peut être attachée à des ancres qui seront cachées “si” la valeur était fausse.
Exemple d’utilisation :
(if : $bike is 3)[Vous avez roulé 3 km]
Dans une histoire avec plusieurs chemins, où certains événements peuvent se produire ou ne pas se produire, il est courant de vouloir exécuter une version légèrement modifiée d’un passage reflétant l’état actuel du monde. Les macros (if :), (unless :), (else-if :) et (else :) permettent d’activer ou de désactiver ces modifications en fonction de variables, de comparaisons ou de calculs de votre choix.
Ajout du nom
On utilise la macro (input: ) pour lier la variable $Dieu à un champ de saisie de texte, le tout lié à une macro (link-rerun: ) qui met à jour la page.
Code :
Quel est votre nom ?
(input: bind $Dieu, "Dieu")
(link-rerun: "Tel est mon nom")[
Vous vous appellez $Dieu ...
[[Commencer la création -> Jour 1]]]
Rendu :
Mise en forme de base
Elle se fait en CSS (feuilles de style en cascade). On définit des règles de styles destinées à des éléments ou des groupes d’éléments particuliers dans la page. Par exemple, « Je veux que le titre principal de ma page s’affiche en rouge en gros caractères. »
Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :
h1 {
color: red;
font-size: 5em;
}
Dans Twine, certains éléments sont spécifiques à l’application :
- tw-story : c’est votre fenètre principale
- tw-passage : c’est la zone où s’affiche le texte
- tw-sidebar : c’est la barre latérale
- .enchantment-link, tw-link : les différents types de liens
Voici la feuille de style que je propose d’utiliser pour une mise en page facile :
Utilisez-là dans Twine, et ajustez facilement les variables de couleur en remplaçant le code hexadécimal.
Vous êtes prêts à participer à la N.U.I.E
