Conseil : Comment aborder ce pas à pas ?
Cette section comporte un grand nombre de bouts de texte ou de code. Ne vous embêtez pas à les retaper dans Twine et faites directement un copier/coller pour tester directement ce que cela apporte à votre histoire. Les éléments à adapter seront clairement visibles, ne vous inquiétez pas. Bon Twine !
Créer une nouvelle histoire dans Twine 2 et la configurer⚓
Cliquez sur le bouton "+ Histoire" vert à droite.
Donnez un nom à votre histoire, puis cliquez sur "Ajouter".
Méthode : Configurer le format
Une fois sur cet écran, cliquez immédiatement sur le nom de votre histoire en bas à gauche.
Cliquez sur "Modifier le format de l'histoire", et choisissez "Sugarcube 2"
Le format conditionne l'apparence de base de votre histoire, ainsi que certaines commandes. Si vous changez de format, certaines commandes de ce pas à pas ne fonctionneront peut-être plus correctement, soyez prudents et essayez toujours votre histoire après chaque changement de format !
Si vous souhaitez ajouter un passage indépendant, cliquez en bas à droite sur le bouton "+ passage"
Méthode : Le premier passage de son histoire
Lorsque vous passez la souris sur un passage, une barre d'icônes apparaît. De gauche à droite : supprimer le passage / Editer le passage / Tester l'histoire à partir de ce passage / Définir ce passage comme étant le point de départ de l'histoire.
Double-cliquez sur un passage ou cliquez sur l'icône "stylo" pour éditer le passage en question.
Ecrire dans Twine⚓
Méthode : Ecrire et mettre en forme son texte
Une fois que vous avez fait un double-clic sur un passage, vous pouvez écrire à l'intérieur, tout simplement !
En revanche, moins simple, si vous souhaitez mettre votre texte en forme (gras, italique, listes, etc.), il va vous falloir découvrir les règles suivantes. Cela devient du coup beaucoup moins pratique qu'un bon vieux traitement de texte, mais on arrive assez vite à se débrouiller.
Créer d'autres paragraphes et les lier⚓
Méthode : La méthode des crochets
Pour créer un lien entre des passages dans Twine, il vous suffit de mettre des crochets [[ ]] là où vous souhaitez créer le lien vers le passage du même nom (voir ci-dessus). Si le passage vers lequel le lien renvoie n'existe pas encore, Twine le crée automatiquement. C'est facile ! (si si, essayez !)
Méthode : Faire converger les chemins
Si deux liens pointent vers le même passage, vous obtiendrez logiquement une convergence.
Pour pointer plus finement vers le même passage, vous pouvez inclure un mot clé dans votre lien, de cette façon : [[vous allez où ?|Chez Canopé]]. Cela vous permet d'amener le lecteur au même endroit sans qu'il ait à lire exactement la même phrase.
Les deux passages ci-dessus mènent au même passage intitulé "faim".
Attention :
Une fois la création d'embranchements acquise, vous avez d'ores et déjà les moyens d'écrire et de réaliser des fictions interactives, même complexes.
Les sections suivantes vous ouvriront certes des pistes et des voies intéressantes pour votre histoire, mais un fait demeure : vous connaissez déjà l'essentiel. Les exemples du "Conte à votre façon" et des exemples de la partie sur les structures narratives n'ont fait appel à rien d'autre ! (simplement un lien internet pour le Conte à votre façon", mais c'est minime et expliqué très rapidement juste ci-dessous).
Insérer des liens, des images et des sons⚓
Méthode : Insérer des liens internet
Facile également, si vous avez en tête le principe précédent : une définition vers le mot "faim" sur le Larousse en ligne se fera ainsi
[[Définition|http://www.larousse.fr/dictionnaires/francais/faim/32696]]
A gauche dans l'éditeur, à droite tel que le lecteur le verra.
A vous les liens vers toute page internet !
Méthode : Insérer des images
Pour insérer une image d'un site internet, vous pouvez employer le code suivant :
<img src="adresse internet de l'image" alt="message à afficher si l'image ne se charge pas" />
Changez les éléments en gras et vous verrez votre image s'afficher.
Attention ! Si vous copiez/collez un lien direct vers une image sur un site, il se peut qu'elle ne s'affiche pas, mais que vous ayez à la place un message "no hotlinking". En effet, certains sites n'acceptent pas ce procédé qui consomme leur bande passante.
Pour éviter ce problème, il est recommandé de passer par un hébergeur d'images (tel que NoelShack qui permet d'héberger des images issues de votre ordinateur ou directement à travers leur adresse sur internet). Recopiez ensuite l'adresse que vous fournit l'hébergeur.
Pour réduire votre image ou contrôler sa taille, il faut ajouter une petite chose à la fin de votre ligne (mais avant les "/>") :
<img src="adresse internet de l'image" alt="message à afficher si l'image ne se charge pas" height="chiffre" width="chiffre"/>
Height= hauteur de l'image / Width = largeur de l'image
C'est déjà beaucoup plus adapté... Mais n'hésitez pas à jouer avec les chiffres jusqu'à ce que vous trouviez votre bonheur !
Question⚓
Où trouver des images libres de droit ?
Solution⚓
En plus du moteur de recherche CC Search, vous pouvez aller directement chercher sur les sites suivants pour trouver des images utilisables pour vos projets en classe.
a) Utilisation commerciale autorisée :
Superfamous (photos par un designer, paysages, abstrait, vues aériennes, pas de moteur de recherche)
Life of Pix (par agence de pub canadienne, moteur de recherche intégré)
Startup stock photos (photos ambiance de bureau)
Flickr (photos proposées par membres, penser à régler moteur de recherche pour licence)
Pixabay (images variées, libres de droit y compris pour usage commercial)
b) Sans utilisation commerciale :
c) Licence Creative Commons :
MorgueFile (images 800x600 minimum, moteur recherche intégré)
PhotoPin (images puisées dans Flickr)
EveryStockPhotos (résultats d'images classés selon licence)
Foter (moteur de recherche orienté vers l'intégration directe des images dans un blog)
d) Images gratuites, licence à vérifier au cas par cas :
Public Domain Pictures (photos proposées par photographes amateurs, utilisation gratuite pour les photos en définition standard)
Free Range Stock (inscription gratuite pour récupérer images gratuites elles aussi)
FreeImages (inscription gratuite nécessaire pour récupérer images)
Dreamstime (banque d'images commerciales comportant une section gratuite, inscription nécessaire pour récupérer les images)
Big Foto (photos d'amateurs, pas d'inscription nécessaire, images classées par zone géographique)
PicJumbo (pas de moteur de recherche)
NewOldStock (images noir et blanc et vintage d'auteurs inconnus, pas de moteur de recherche)
Ancestry Images (site spécialisé dans les images et cartes postales anciennes)
Google Images (tri possible par licence dans les options de recherche)
e) Spécialement dédié aux recherches par élèves en classe :
Photos for class (interface en anglais, moteur de recherches acceptant toutes les langues, images proposées triées à l'avance pour licence Creative Commons, intégration automatique des indications de licence à toute image téléchargée, risque de résultat d'image « inappropriée » réduit)
Photos pour la classe (un site institutionnel du Réseau Canopé, organisé par albums thématiques. Comprend une section bilingue)
Méthode : Insérer des vidéos
Pour les vidéos en ligne, la méthode dépendra du service de vidéos. Sont évoquées ici les méthodes pour Youtube et Dailymotion, ce qui devrait déjà suffire pour de très larges usages.
Pour Youtube
Une fois votre vidéo Youtube choisie, faites un clic droit dessus et cliquez sur "Copier le code d'intégration".
Dans votre passage, collez le code que vous venez de copier.
Comme pour les images, vous pouvez changer les chiffres de hauteur et de largeur dans le code.
Une fois en test dans le navigateur, votre vidéo s'affiche bien. Cependant, elle est peut-être trop grande.
Voilà, la taille est maintenant plus raisonnable !
Pour que votre vidéo se lance d'elle même quand le lecteur atteint la page, ajoutez à l'adresse de la vidéo la fin suivante : ?rel=0&autoplay=1 (Voir en grisé ci-dessus).
Pour Dailymotion
Pour des vidéos de Dailymotion, cliquez tout d'abord sur l'icône "Partager" en bas à droite de la vidéo que vous souhaitez intégrer dans votre histoire.
Ce qui est surligné en bleu sur la capture d'écran est le code d'intégration que vous devrez copier dans Twine. Attention ! Si vous souhaitez changer des options (telle que cocher "Démarrer automatiquement", ou choisir la taille de la vidéo), faites d'abord vos réglages, puis copiez-collez votre code d'intégration qui se sera mis à jour selon vos choix.
Une fois le code copié/collé...
... la vidéo apparaîtra dans Twine dans le passage concerné.
Les variables⚓
Définition : Qu'est-ce que c'est ?
Les variables sont des données qui, comme l'indique leur nom, sont... variables et peuvent être changées de multiples façons, pour garder la trace des actions du joueur dans l'histoire.
Conseil : A quoi ça peut servir ?
Dans le cas de chiffres :
garder en mémoire combien de fois le joueur a fait une action (par exemple, combien de fois le joueur a parlé à un personnage dont les répliques changeront au fur et à mesure).
gérer des scores, de l'argent, des points de vie, le temps passé... etc., selon le type d'histoire.
gérer un score dans un quiz.
Dans le cas de lettres :
Permettre au lecteur de choisir certaines données, telle que le nom du protagoniste.
Intégrer des quiz à réponses ouvertes à l'histoire.
Dans tous les cas :
Permettre de mettre en place dans son histoire des conditions : un événement ne se déclenchera ou un endroit ne sera accessible que si telle action a été faite ou tel passage lu par le lecteur/acteur.
Du point de vue de la fiction interactive, cette possibilité démultiplie tout simplement les possibilités offertes dans l'histoire.
Méthode : Définir une variable
Pour définir une variable dans Twine (dans le format Sugarcube de ce pas-à-pas), il vous faut inscrire, de préférence dans votre premier passage, les éléments sous la forme suivante :
<<set $_________ to __>>
Explication : remplacez le premier trait par le nom de variable collé au signe "$", et remplacez le second trait par la valeur que doit prendre cette variable. Dans le cas de lettres, il vous faudra les taper entre guillemets, ainsi : "___"
Imaginons que nous souhaitions introduire dans notre histoire que le personnage principal entame sa promenade tout frais, sans aucune fatigue (soit une fatigue égale à 0). Imaginons également qu'il croisera sur sa route une auberge dont nous allons fixer provisoirement le nom à "Au petit poney".
Comment allez-vous faire ce réglage dans votre premier passage ? Ecrivez votre bout de code ci-dessous.
Comparez maintenant avec la capture d'écran ci-contre. Aviez-vous la même chose ?
Petit détail qui a son importance : ces lignes fixant vos variables ne seront jamais affichées ni visibles au aux yeux du lecteur.
Vous pouvez donc effectuer de nombreuses opérations à l'insu du lecteur, ne l'oubliez pas !
Méthode : Afficher la valeur d'une variable dans le texte de son histoire.
Pour afficher votre variable dans votre texte, vous utiliserez "print" (= imprimer à l'écran) au lieu de "set" (= fixer)
Ainsi, pour reprendre l'exemple précédent, si vous souhaitez afficher le nom de l'auberge que vous avez choisi d'appeler "Au petit poney", vous devrez taper :
<<print $auberge>> à l'endroit de la phrase où le nom doit apparaître. Voyez ci-dessous.
Méthode : Modifier une variable
Modifier une variable existante n'est pas très complexe si vous connaissez les signes arithmétiques élémentaires. ;-)
Dans notre exemple de promenade en forêt, imaginons que la fatigue du personnage augmente avec le temps (ce qui semblerait logique !). Dans ce cas, nous devons modifier la variable $fatigue en la faisant passer par exemple de 0 à 2. Ce qui se traduira dans Twine sous la forme suivante :
<<set $fatigue to $fatigue +2>>.
En des termes plus intelligibles, on demande à Twine de fixer la variable "fatigue" à la même valeur + 2.
Afficher "votre fatigue est de 2 !" n'est pas très seyant, nous sommes bien d'accord. Pour afficher autre chose pour rendre cette fatigue légère, tel que "Vous êtes un peu fatigué", il faudra inclure une condition pour afficher ce texte (voir plus loin).
Liste des modificateurs possibles :
ajouter : +
soustraire : -
multiplier : *
diviser : / (modulo : %)
Pour un descriptif plus complet, rendez-vous sur cette page.
Méthode : Faire entrer une variable à l'utilisateur
Pour faire taper une variable à l'utilisateur, il faut employer la commande "textbox" (= boîte de dialogue texte, c'est logique... quand on le sait !).
Toujours dans notre exemple, imaginons que nous transposons à présent l'histoire à la troisième personne, et que nous souhaitons donner au lecteur/acteur la possibilité d'en nommer le protagoniste comme il le souhaite. Nous allons donc devoir faire en sorte de stocker le nom choisi dans une variable que nous appellerons de façon fort originale $nom.
Nous allons par conséquent entrer dans Twine la commande suivante :
<<textbox "$nom" "">>
Attention ! Il ne faut surtout pas oublier le duo de "" à la fin.
Donnez tout au début la possibilité au lecteur/acteur de nommer le protagoniste...
... introduisez dans vos passages l'affichage de cette variable "$nom"...
... et vous obtiendrez une jolie boîte de dialogue dans laquelle le lecteur/acteur peut cliquer...
... taper son texte...
... et pouvoir retrouver son choix inséré dans le texte de l'histoire !
Pour aller plus loin : dans la commande <<textbox "$nom" "">>, le duo de "" à la fin correspond à ce qui va s'afficher dans la boîte de dialogue elle-même. Avec les "" de fin, cela signifie que nous aurons une boîte de dialogue vide. Si vous souhaitez intégrer la consigne directement dans la boîte de dialogue, tapez-la à cet endroit. Par exemple, pour reprendre les termes des exemples ci-dessus ::
<<textbox "$nom" "Entrez votre nom">>. Ce qui donnera :
Méthode : Donner au lecteur un choix entre plusieurs options.
Particulièrement utile si on veut introduire des quiz classiques dans son histoire, il est possible d'introduire des cases à cocher en employant la syntaxe suivante : <<radiobutton "$variable" "réponse possible">>
Si vous souhaitez qu'une case soit cochée par défaut, il faut ajouter "checked" en toute fin, comme ceci :
<<radiobutton "$variable" "réponse possible" checked>>
Exemple : Dans notre histoire, imaginons que notre lecteur aille se restaurer à la fameuse auberge "Au petit poney". Nous pouvons alors lui donner le choix de ce qu'il peut y manger.
Le menu propose trois plats. Laissons le lecteur décider de ce qu'il veut manger !
Plus tard, le lecteur pourra retrouver dans le texte ce qu'il aura choisi, toujours grâce à la commande "print".
Pour éviter que l'écran affiche le "manger d'tourte", il faut bien faire attention à donner aux variables des noms qui s'inséreront ensuite correctement dans un texte si on les destine à cela (voir les changements en grisé ci-dessus).
Comme vous vous en rendrez vite compte si vous les utilisez ainsi, la langue française est un véritable casse-tête dans ce cadre...
Le choix des plats tel que le lecteur le verra.
"manger d'tourte" ? ! Un peut étrange, comme formulation !
Le changement du nom de la variable ne change bien entendu rien à ce que lecteur lira au niveau des choix qu'on lui propose.
En revanche, le texte sera beaucoup plus naturel ainsi !
Méthode : Définir des conditions
Pour déterminer des conditions (par exemple : le joueur peut continuer s'il a trois bonnes réponses à un quiz), il va falloir entrer dans un script de type "si... autrement...", soit en anglais "if... else...".
Pour cela, les choses vont se faire en plusieurs fois :
<<if ______________________________________>>
Ce qu'il se passe si la condition est remplie.
<<else>>
Ce qu'il se passe si la condition n'est PAS remplie
<</if>>
Que mettre après le "if" ? Il nous faut trois choses : le nom de la variable à vérifier, la valeur que l'on attend d'elle (un chiffre, qu'elle soit vraie ou fausse, qu'elle corresponde à un ensemble de lettres, etc.), et entre les deux la correspondance (égale, supérieure, inférieure, etc.)
Exemple : toujours dans notre histoire, nous allons mettre en place une condition : arrivé devant une colline, le joueur ne pourra grimper la pente que s'il n'a pas trop mangé juste avant (une tourte, c'est lourd sur l'estomac !).
Première étape : mettre le "if" en place. Traduit en langage Twine, la condition que nous souhaitons devient "si la variable $menu est "tourte", alors le joueur ne peut pas aller plus loin."
Deuxième étape : mettre le "else" en place, en-dessous duquel nous tapons ce qu'il se passe si le lecteur a mangé autre chose que de la tourte bien lourde.
Troisième étape : IMPORTANT ! Taper un petit <</if>> pour indiquer à Twine que l'arbre des conditions est terminé.
Soit dans Twine :
Et le résultat :
Ce que verra le lecteur qui a trop mangé.
Ce que verra le lecteur qui aura mangé chichement... mais pourra continuer sa route !
Liste non-exhaustive des comparateurs possibles pour vos conditions :
Signe | Signification | Exemples |
|---|---|---|
== | la variable doit être égale à la valeur pour que la condition soit remplie. |
|
!= | la variable ne doit pas être égale à la valeur |
|
< | la variable doit être strictement inférieure à la valeur | $note < 20 |
<= | la variable doit être inférieure ou égale à la valeur | $note <= 20 |
> | la variable doit être strictement supérieure à la valeur | $note > 10 |
>= | la variable doit être supérieure ou égale à la valeur | $note >= 20 |
Modifier l'apparence de sa fiction⚓
Jusqu'où peut-on aller ?⚓
Toujours à partir du format Sugarcube (celui sur lequel se base ce pas-à-pas), il est possible de complètement modifier l'apparence de votre histoire. Pour vos en convaincre, rendez-vous sur le site du mini-monde de Pierre Kessler.
Définition : Un terme étrange : le "CSS"
Pour dire les choses très simplement, le CSS est ce qui règle le style visuel global de votre histoire (bordures, couleurs, cadres, etc.)
Méthode : Accéder aux changements d'apparence dans l'éditeur
Pour accéder aux changements, cliquez sur le nom de votre histoire en bas à gauche, puis sur "Modifier la Feuille de Style de l'Histoire".
C'est ici que vous allez faire quelques copier/coller selon ce que vous voulez changer !
Méthode : Changer la couleur de fond
Pour changer la couleur de fond de votre histoire, copiez/collez le code suivant :
body
{
background-color: blue;
}
Adaptez bien entendu le nom de la couleur à celle que vous désirez (toujours en anglais !), ou indiquez son code hexadécimal (ici, ce bleu peut-être indiqué sous le doux code de #0000FF).
Vous pouvez trouver les noms des couleurs à beaucoup d'endroits sur internet, dont la page ici.
Résultat :
Le bleu est un peu agressif, mais c'est pour l'exemple !
Méthode : Changer la couleur du texte
Copiez/collez le code suivant, toujours au même endroit :
body
{
background-color: blue;
color: red;
}
Bien entendu, vous mettez les éléments que vous voulez changer. Ici, si vous souhaitez seulement le texte en rouge sans changer la couleur de fond, vous enlevez la ligne "background-color" et ne laissez que "color".
Décidément, notre histoire est mal partie pour gagner un prix de design...
Méthode : Modifier la couleur des liens (autres passages, internet...)
Copiez/collez :
a
{
color: yellow;
}
Vraiment mal partie !
Méthode : Changer la police et la taille des caractères
Copiez/collez le code suivant :
body, tw-story
{
font-family: Palatino;
font-size: 22px;
}
Bien entendu, il vous faut changer le nom de la police par celui de votre choix, ainsi que la taille de caractères.
ATTENTION ! Prenez garde à choisir une police qui a le plus de chances d'être sur l'ordinateur du lecteur (tel qu'Arial) pour éviter les problèmes d'affichage en cas de police non existante dans son ordinateur.
Pour vous aider à choisir, vous pouvez référer à cette page qui recense de nombreuses polices et évalue leurs chances d'être sur l'ordinateur d'un utilisateur.
La police est agréable, mais ça ne suffira pas !
Diffuser son histoire⚓
Méthode : Sauvegarder son histoire
Pour sauvegarder votre histoire, vous ne trouverez pas dans Twine de bouton "Sauver" comme on peut en avoir l'habitude. Il y a en fait deux façons d'arriver à ce résultat.
Première façon : "publier vers un fichier".
En cliquant sur "Publier vers un Fichier", vous allez pouvoir télécharger votre histoire sous la forme d'un fichier html. Il vous suffira alors de l'importer à nouveau dans Twine (commande "Importer depuis un fichier" à l'écran d'accueil de l'application) pour la retrouver.
Deuxième façon : "Archive"
En cliquant sur "Archive", vous téléchargerez automatiquement un fichier html (encore) qui contiendra l'ensemble de vos histoires à importer également dans Twine.
Méthode : Envoyer son histoire à quelqu'un
En publiant votre histoire vers un fichier, vous pourrez ainsi permettre à d'autres de la lire en la leur envoyant par exemple par mail.
Il s'agit d'un fichier html simple qui s'ouvrira dans n'importe quel navigateur (firefox, chrome, edge, etc.). Vous n'aurez besoin d'internet que si des éléments de votre histoire y renvoient (liens vers des sites, vidéos youtube, etc.). Si votre histoire ne comporte rien de tel, seulement du texte, le lecteur n'aura pas besoin d'internet !
Méthode : Publier son histoire sur internet
Si vous souhaitez publier votre histoire Twine sur internet, vous avez plusieurs moyens.
Premier moyen : La publier sous Canoprof comme cela a été fait dans ce parcours.
Deuxième moyen : sur un site internet personnel ou d'école. Votre histoire Twine est en effet un simple fichier html, une petite page internet prête à l'emploi.
Troisième moyen (pour le second degré) : la déposer sur Moodle pour que vos élèves puissent la consulter sur Entea.
Quatrième moyen : déposer votre récit dans une plateforme comme Github, afin d'être dans une dynamique de partage.