Twine : Petit tuto en français

Comme on l’a dit dans le précédent article, voici une petite aide pour vous permettre de vous lancer sur Twine.

Comme on disait, Twine ça marche un peu comme un livre dont vous êtes le héros, mais là pas besoin de noter des choses sur un bout de feuille volante, qui peut néanmoins vous servir de marque-page. Ici on va utiliser des bouts de codes pour, passer d’une page à une autre, nommer des choses, donner des valeurs (argent, point de force,…), marquer la présence d’un objet dans son inventaire….

Le langage de Twine, ressemble beaucoup à du HTLM, mais rassurez-vous nous on y connait rien et ça nous a pas empêché de faire des choses sympa.

Un fichier twine fini ressemble à ça :

L’arborescence du récit qui débute avec la case du haut, pour se finir tout en bas avec différentes fins selon les choix effectués par les joueurs.

Sur twine, une page s’appelle un « passage ». Il s’agit des cases que l’on voit et lorsqu’on clique, on ouvre un éditeur de texte tout simple avec une zone de titre en haut qui permet de nommer le « passage ».

Juste en dessous se trouve une zone pour placer une balise, cela pourrait permettre de retrouver plus facilement des passages ayant un lien (exemple : on place une balise « argent » sur tout les « passages » où l’on va devoir interagir avec de la monnaie).

Et enfin le corps du texte qui correspond à ce que le joueur va voir. Ou pas, puisqu’on va aussi saisir ici les bouts de codes qui vont permettre de faire opérer la magie.

Comme dans l’exemple ci-dessus, on créé un nouveau passage et son lien en utilisant la graphie : [[texte qui doit être cliqué par le joueur|nom du passage]]. On visualise les liens entre une page et l’autre, grâce à des flèches :

On peut bien-sûr mettre en forme son texte pour que tout ça soit un peu plus gai.

On peut mettre un texte dans la couleur que l’on veut : (color : nom de la couleur en anglais ou le numéro de la couleur )[le texte entre les crochets sera alors dans la couleur désignée]

Pour changer les attributs des caractères, on peut utiliser des signes.

Pour mettre en gras on mettra les  »mots »  entre quatre apostrophes, pour mettre en italique c’est les slashs qui sont utilisés pour encadrer //les mots// alors que pour souligner on place des balises <u>au début et à la fin du mots</u>

Si on se sent noyé par le texte, on peut insérer une image (si elle est hébergé sur internet).

Pour cela on utilise cette formule : <img src=“l’URL de votre image”>

On peut même en faire un lien cliquable vers une autre page comme ça : [[<img src=”votre lien”>|nom de la page liée]]

Du côté du créateur pas très doué en orthographe

Quand la magie opère (promis les chatons sont cliquables)

Mais ça ce n’est que de la mise en forme, ce qui fait la force de twine, c’est donc de se passer de cette fameuse feuille volante avec toutes nos informations dessus.

Pour ça, on crée ce qu’on appelle des variables. Ce sont des éléments permettant d’influencer le cours de l’histoire. Cela peut être la possession d’un objet, d’une caractéristique, de l’argent ou encore le nom d’un personnage…

Pour mieux vous repérer, il faudra donner un nom à la variable, qui vous permet d’identifier à quoi elle fait référence. Si on parle d’une épée = $épée, un personnage = $héro… C’est à vous de nommer vos variables pour vous y retrouver. (Attention il faudra conserver toujours la même façon d’écrire, à une majuscule près)

Il faut savoir que par défaut, une variable est fausse. Pour configurer une variable, on fait ça ainsi :

Pour un objet, ou un trait de caractère ou un événement (malédiction, carte perdue…):

On utilise une variable à condition binaire avec true = oui et false = non. On utilise alors ce bout de code : (set: $variable to true(ou false)). Par exemple : (set : $amulette to true) voudra dire que le personnage possède une amulette à ce moment.

Pour une unité numérique :

(set: $variable to 0 (ou 1,2,3,4,5,6,7 c’est vous qui voyez) et on augmente avec (set: $variable +=1) (ou on diminue avec -=1)

Pour nommer un élément :

(set: $variable to “Thomas”)

Nommer un élément n’est pas d’une grande utilité en soi mais ça peut le devenir si on propose au joueur de rentrer des données, dans ce cas on va utiliser la commande « (prompt: »texte ») » . Cela fera apparaitre une boite de dialogue dans laquelle le joueur pourra entrer le texte qui deviendra la valeur de la variable.

(set $grandméchant to (prompt: « Je me souviens de cet horrible bibliothécaire, il se nommait… »)).

Surtout ne pas oublier les guillemets sinon ça ne marchera pas !

C’est ce qu’utilise Brahima dans Perso fight, ce qui fait apparaitre ces boites de dialogue

Et il suffira ensuite dans notre paragraphe de citer le nom de la variable pour qu’on la fasse apparaitre. Si on reprend notre exemple du vilain bibliothécaire. On pourra écrire  » $grandméchant  vous crie dessus parce que vous rentrer dans la bibliothèque en courant « .

Les coulisses de Perso fight, les variables seront remplacés par ce que les joueurs ont répondu aux précédentes questions.

Une fois qu’on arrive à maitriser les variables, on peut déterminer des conditions. C’est comme ça qu’on va rendre notre jeu plus riche, en créant des situation qui diffèrent en fonction des variables précédentes.

On pose alors une condition :

(if: $pointdevie is 4)[texte que la personne voit si elle remplie les conditions]

(else:)[texte que la personne voit si elle NE remplie PAS les conditions.]

ou encore imaginons une scène traditionnelle :

On va chercher un trésor, on tombe sur le dragon, il faut une épée et une amulette pour le vaincre.

A partir de là on peut créer deux chemins lors de la rencontre avec le dragon.

Un où le personnage est victorieux s’il a les deux objets et l’autre où il sera vaincu s’il lui manque l’un des objets.

(if: $amulette is true and $épée is true)[ Le héros pourfend le dragon]

(else:)[Le dragon vous crame les fesses.]

Si vous maitrisez déjà ces bases, vous pouvez créer un nombre illimités d’aventures. Il y a bien-sûr encore plus de fonctions qu’on n’a pas vu dans ce tutoriel. Comme on disait, si vous maitrisez l’HTML, vous avez avec Twine un super outil pour créer des jeux avec ce langage. On vous invite donc à vous lancer et n’hésitez pas à nous faire partager vos créations !

Share

2 réflexions au sujet de « Twine : Petit tuto en français »

  1. Bonjour ! Merci pour ce post. Malheureusement les images ne s’affichent pas et restent grisées…serait-il possible d’accéder à une version pdf de ce tutoriel? Merci beaucoup !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *