Fiction-interactive.fr

Tutoriels Twine

Liste des articles :

Tutoriel : premier jeu en Twine ! - Hugo Labrande

Tutoriel Twine : premières macros et structures conditionnelles – Hugo Labrande

Tutoriel Twine 2 : les variables – Hugo Labrande

Un (petit) peu de CSS dans votre Twine ? - Hugo Labrande

Twine 2 : des effets CSS plus complexes pour vos passages – Hugo Labrande

Tutoriel : créez un jeu Twine multilingue – Mia Blais-Côté

Choix de polices d’écriture et de tailles de texte sur Twine 1 – Mia Blais-Côté

Twine et CSS Grid - Filiaa

Cet ebook compile des tutoriels parus sur le site http://www.fiction-interactive.fr, centrés sur le logiciel Twine (Twine 1 et Twine 2).

On parle uniquement de technique ici ; nous vous conseillons de l’accompagner de notre ebook sur la conception de jeux !

Nous publions un article sur la fiction interactive, et plus largement les narrations non-linéaires, tous les vendredis de septembre à juin.

Si ces articles vous ont plu, n’hésitez pas à :

parler de http://www.fiction-interactive.fr autour de vous ;

nous rejoindre sur notre serveur Discord ;

faire un don à notre compte paypal (paypal@fiction-interactive.fr), qui servira à couvrir nos frais d’hébergement et à proposer des prix pour notre concours annuel.

Tutoriel : premier jeu en Twine !

Hugo Labrande

Depuis que la nouvelle version du site a été lancée, vous avez pu lire plein d’articles sur la programmation en Inform 6 et en Inform 7, et quelques articles sur d’autres aspects de la fiction interactive. Il manquait tout de même une pièce importante : des tutoriels Twine ! Et avec cet article, c’est maintenant chose faite !

Twine, c’est quoi ?

Twine est un logiciel d’écriture d’histoires à embranchements (pensez « livres dont vous êtes le héros », ou « jeu hypertexte »), créé par Chris Klimas en 2007. Cet outil a rencontré un succès fulgurant pour deux raisons : sa simplicité d’utilisation (vous allez voir !), et le fait que le résultat final soit une page HTML. Pas besoin de se prendre la tête, mettez le jeu sur un site (le vôtre, itch.io, ou philome.la), et envoyez le lien à vos amis, et voilà, les gens jouent à votre jeu, instantanément, sans rien installer et sur n’importe quelle plateforme. Il existe relativement peu de Twine en français : vous pourrez retrouver sur notre site À la basse et au chant d’Éva Simonin (un jeu qui a gagné le concours 2016, ça n’est pas rien !), mais on mentionnera aussi la traduction par Skarn (du forum Littéraction, que l’on salue !) de Cactus Blue Motel par Astrid Dalmady (un jeu qui a fini troisième à l’IFComp 2016), ou les jeux de Gabrielle Barboteau.

Le fait que le format de sortie soit du HTML permet d’utiliser tous les outils de la programmation Web (comme le JavaScript et le CSS) pour personnaliser votre jeu et ajouter des fonctionnalités ou redécorer l’interface. Regardez par vous-même la différence entre Howling Dogs, Even Cowgirls Bleed, Cactus Blue Motel, SPY INTRIGUE et Localhost — tous créés avec Twine, mais avec différents degrés de personnalisation et de travail sur l’interface ! Nous ne parlerons pas de tout ceci dans ce tutoriel (mais peut-être dans les suivants !) ; pour l’instant, nous allons nous focaliser sur la création de notre premier jeu, simple, sans fioriture, avec l’interface par défaut.

Installation

Il existe deux versions de Twine : Twine 1 (et surtout la version 1.4.2, la plus récente) et Twine 2, sorti tout récemment. Twine 2 apporte quelques nouveautés, comme le fait qu’il n’y a plus besoin de télécharger de logiciel pour créer de jeu (tout peut être fait avec l’outil en ligne !). Cependant, Twine 1.4.2 reste très utilisé, surtout avec le format Sugarcube ; ceci est dû à plusieurs facteurs, mais le fait est qu’il s’agit du format historique, qui était en place lors de l’explosion de Twine et de la période où beaucoup de classiques du genre ont été créés, et qu’il bénéficie ainsi d’une demi-douzaine d’années de travail de la communauté : il y a ainsi un grand nombre d’exemples, une documentation très fournie, ainsi que beaucoup de « macros » (des petits bouts de code JavaScript/CSS à insérer dans un Twine pour ajouter une fonctionnalité ou un effet au jeu).

Pour chacune de ces versions, il existe plusieurs formats d’histoire différents ; les différences concernent principalement la présentation par défaut du jeu (et éventuellement sa flexibilité en termes de présentation) et la syntaxe lorsqu’il s’agit d’écrire des fonctions. Il existe en gros trois formats : le format SugarCube, qui est le format historique et le plus populaire pour Twine 1 et qui a donc été conservé pour Twine 2 ; le format Harlowe, le format par défaut de Twine 2 ; et le format Snowman, plus avancé mais plus personnalisable. Ce que nous allons présenter dans cet article est indépendant de la version (Twine 1 ou 2) et du format choisi ; les concepts sont les mêmes, mais l’apparence du jeu sera peut-être un peu différente de nos screenshots. Nous reviendrons sur le choix du format dans un article ultérieur, mais pour un débutant, le mieux est sans doute d’utiliser Twine 2 avec le format par défaut (Harlowe), qui a une documentation bien faite et est utilisé par un grand nombre d’auteurs.

Interface de création

Quelle que soit le format d’histoire choisi, et quelle que soit la version de Twine (1 ou 2), l’interface pour la création d’une histoire est sensiblement la même.

Une des grandes forces de Twine est que le développement a un caractère visuel très fort : il est très facile de structurer son histoire et de voir les différentes branches que la lectrice peut emprunter, ainsi que les relations entre les événements (l’interface est tellement simple que certains l’utilisent pour dessiner des graphes avec des liens ou comme outil de visualisation, alors que c’est à la base un outil pour la fiction interactive !). Comme en plus ajouter des cases ou modifier les liens se fait facilement, vous prendrez vite le coup de main et créerez des structures de plus en plus compliquées !

La structure de base dans Twine est le passage ; il s’agit d’un morceau de texte que le lecteur va lire, par où il va passer, bref tout simplement un passage de votre histoire. Visuellement, ça représente un écran de texte, et lorsque la lectrice cliquera sur un lien, on changera de passage : le passage s’effacera et le suivant sera affiché. Dans l’interface d’édition, chaque passage est représenté par un rectangle, avec un titre (pour que vous puissiez vous y retrouver),et du texte, qui s’affichera à l’écran. Pour l’instant, lorsque vous ouvrez un nouveau projet Twine, il y a un passage vide (« Start » pour Twine 1, « Passage sans titre » pour Twine 2).

Début de création avec Twine 1

Notez qu’un passage est une unité littéraire, alors que d’autres outils de visualisation comme Trizbort utilisent des salles (« rooms »), c’est-à-dire une unité géographique. Ainsi, Twine vous permet de visualiser votre histoire, alors que Trizbort permet de visualiser un lieu. C’est l’une des grandes différences entre l’hypertexte et les fictions à analyseur syntaxique : le premier est très bien adapté au récit littéraire, alors que le second est résolument orienté exploration. Bien entendu, l’un n’empêche pas l’autre et la limite est bien plus complexe et poreuse que ça : il y a des fictions à parser où l’exploration ne joue qu’un rôle minime (Galatea, par exemple), et des hypertextes où l’on explore de salle en salle (À la basse et au chant).

Remplissons notre Twine ! Cliquez sur le premier passage vide et écrivez quelque chose ; je vous propose le texte suivant, le début de notre premier jeu, un jeu à suspense pour Halloween :

Vous n’êtes pas rentrée dans le bureau de votre grand-père depuis des années. Mais ce soir, en allant vous coucher, vous vous êtes arrêtée, sans trop savoir pourquoi. La porte est entrouverte, et une curiosité soudaine et irrésistible vous pousse à entrer, sans trop savoir ce que vous allez y trouver…

Une fois que c’est fait, vous pouvez tester votre jeu !

Dans Twine 1 : sauvegardez votre jeu, puis allez dans « Build… > Test play ». Votre navigateur va s’ouvrir, avec votre jeu dedans.

Dans Twine 2 : après avoir rempli le passage, cliquez sur l’icône de l’insecte (« Test story starting here ») ; une fenêtre s’ouvre avec votre jeu à l’intérieur.

Notre premier passage avec Twine 2

Pour l’instant, il n’y a pas grand-chose, juste un texte introductif. Vous pouvez changer quelques éléments (comme le titre du jeu, par exemple), mais pour aller plus loin, il va falloir créer un nouveau passage.

Premier lien

Étoffons notre jeu comme ceci : nous allons ajouter un autre passage qui décrit le personnage s’approchant du bureau du grand-père, puis un autre passage où elle ouvre une boîte mystérieuse, qui l’aveugle et la fait tomber dans un monde mystérieux… (Oui oui, on dirait Jumanji, mais bon, on démarre simple !)

L’inconvénient si l’on écrit tout dans le même passage, c’est l’effet « mur de texte » : lors de l’ouverture de l’histoire, tout ce que le lecteur verra est des paragraphes et des paragraphes de texte, ce qui n’est pas forcément appétissant ou engageant. Nous allons découper notre petit récit en plusieurs passages, et le joueur devra cliquer sur le lien suivant pour lire le paragraphe suivant ; à chaque paragraphe, la tension va monter, jusqu’au dernier paragraphe, où la « chute » est révélée.

Découper son texte en des paragraphes digestes qui ne seront pas affichés en même temps est souvent une bonne idée, notamment si vous voulez faire monter la tension, ou passer à une nouvelle scène. Par contre, ça ne rendra pas un texte long et ennuyeux plus intéressant, et les lecteurs n’aiment pas devoir cliquer alors qu’ils ne trouvent pas le lien si intéressant que ça. Une stratégie assez répandue, par exemple dans les jeux Choice of Games, est de ne pas laisser trop de temps s’écouler entre deux moments où le joueur doit faire un choix ; nous verrons plus tard comment mettre ce genre de choses en place.

Revenons sur notre texte : il nous faut maintenant choisir où mettre le lien vers le passage suivant. Un bon endroit est « vous pousse à entrer » : on communique ainsi au joueur qu’un clic sur ces mots est équivalent à suivre l’action d’entrer. Pour ajouter un lien, c’est facile : il suffit de rajouter des crochets sur les mots, ce qui donne

… et irrésistible [[vous pousse à entrer]], sans trop savoir ce que…

Allez modifier votre passage, puis fermez la fenêtre : le passage « vous pousse à entrer » vient d’être créé par Twine, et il y a une flèche entre les deux ! (Twine 1 vous demande peut-être avant cela une confirmation.) Vous pouvez maintenant éditer ce nouveau passage, et y écrire :

La pièce est silencieuse, et vous ne devriez pas être là. Mais là, sur le bureau, vous remarquez un coffret, qui semble dégager une lumière étrange, comme une aura qui émanerait de sous le couvercle…

Puis encore une fois, nous allons mettre un lien, cette fois sur « sous le couvercle ». Enfin, dans le nouveau passage « sous le couvercle », nous écrivons :

Prenant votre courage à deux mains, vous ouvrez le couvercle du coffret : la lumière aveuglante emplit toute la pièce, et vous vous sentez happée par une main invisible, qui vous précipite dans un trou dans fond !

FIN

Structure linéaire avec Twine 2

Je vous encourage, une fois ce tutoriel fini, à modifier le texte et écrire quelque chose de plus intéressant… Mais voilà, votre première histoire est terminée ! Vous pouvez la tester, et l’exporter en page HTML si vous le voulez !

Prêts à cliquer ?

Faire des embranchements

Notre histoire est sympa, mais elle est pour l’instant très linéaire et n’exploite pas vraiment les possibilités offertes par l’hypertexte. Nous allons la complexifier un tout petit peu, en ajoutant une deuxième fin ; la joueuse aura alors le choix de cliquer sur deux choses différentes, qui orienteront vers une fin ou une autre.

Lorsque le boom de Twine a eu lieu, beaucoup de personnes l’utilisaient pour des histoires linéaires avec aucune possibilité pour le joueur de changer quoi que ce soit ; les histoires pouvaient être intéressantes, mais il n’y avait aucun embranchement possible. Ça n’est pas forcément gênant ! Beaucoup d’histoires et même de jeux vidéo sont linéaires ; il y a les kinetic novels (sous-genre du visual novel), beaucoup de jeux d’aventure point-and-click, et même Photopia, un classique des jeux à analyseur syntaxique. Par contre, dans un contexte numérique se rapprochant des jeux vidéo, les joueurs aiment bien avoir ce qu’on appelle en anglais de l’agency : une capacité de prendre des décisions par eux-mêmes ou des initiatives qui peuvent avoir des conséquences, ou d’explorer par eux-mêmes. Proposer des choix peut être un moyen ; on peut aussi rajouter du texte optionnel, des passages qui peuvent se lire dans n’importe quel ordre, des textes un petit peu cachés, etc. C’est ce que font des jeux comme Analogue: A Hate Story ou Gone Home, voire même A Normal Lost Phone : l’histoire est linéaire, mais le joueur a toute latitude pour explorer, découvrir petit à petit, et faire ses choix, ce qui est mieux qu’un jeu qui vous contraint absolument à rester sur les rails et à ne pas dévier.

Reprenons notre deuxième passage, et ajoutons une option pour rebrousser chemin. Le meilleur endroit est sans doute sur les mots « vous ne devriez pas être là » : si on clique dessus, c’est comme si le personnage se rendait compte qu’elle ne pouvait pas être là et qu’elle devait partir, et elle referme la porte, donnant une fin plus ennuyeuse (passage « vous ne devriez pas être là ») :

Non, vous ne devriez vraiment pas être là, décidez-vous. Le cœur battant, et le plus silencieusement possible, vous refermez la porte du bureau et partez vous coucher.

FIN

Un embranchement avec Twine 1

Et voilà, votre jeu a deux fins différentes, et vous avez créé votre premier embranchement : votre deuxième passage a deux flèches différentes correspondant aux deux fins différentes ! Il s’agit bien entendu d’un tout petit exemple : vous pouvez créer des histoires plus longues, avec plus d’embranchements et plus de fins, et même des passages qui se rejoignent ! Nous verrons très bientôt dans un prochain tutoriel comment complexifier la structure de votre jeu.

Tutoriel Twine : premières macros et structures conditionnelles

Hugo Labrande

Il y a quinze jours, nous vous présentions un tutoriel de prise en main de Twine, l’outil permettant de créer des jeux hypertextes de façon très simple, et qui a fait sensation dès sa sortie et continue d’être très utilisé. Ce tutoriel était général, et fonctionnait pour Twine 1 (la version historique) et Twine 2 (sortie il y a 3 ans). Dans un souci d’adapter nos tutoriels aux usages les plus fréquents, nous allons désormais nous focaliser sur Twine 2, avec le format Harlowe, le format d’histoire par défaut ; mais n’hésitez pas à vous manifester si vous voulez que l’on écrive sur un point particulier en Twine 1 ou sur un autre format d’histoire en Twine 2 !

L’aspect très visuel de Twine permet d’avoir une idée claire de ce qui se passe dans votre histoire et des différents chemins que peut prendre le joueur. Cependant, si on ne fait pas attention, on ajoute trop de choix, et les possibilités se multiplient… et parfois on se retrouve avec tout un tas de branches, qui ne sont pas forcément si différentes les unes des autres, et pour lesquelles il faut écrire des textes très similaires ! Nous allons aujourd’hui montrer comment éviter cela, avec des branches qui se recoupent, mais où l’on a toujours possibilité de savoir par où le joueur est passé, pour pouvoir adapter le texte au fil de l’histoire. On peut ainsi regrouper le texte et garder les embranchements pour des sous-histoires vraiment différentes — et s’éviter de devenir chèvre !

Un cauchemar en Twine.

Mon dîner avec André

Voici le scénario que l’on voudrait implanter : vous êtes au restaurant, en train d’attendre André, qui est en retard. Le voici, et il vous demande de l’excuser pour le retard : on donne alors le choix à la lectrice de dire que ça n’est pas grave, ou de lui faire un reproche. Voici une proposition de texte correspondant :

Déjà 19 h 18. Vous commencez sérieusement à vous impatienter, et en plus vous avez une faim de loup… Vous rafraîchissez votre fil d’activité une troisième fois en buvant un peu d’eau. Quand même, pensez-vous, il abuse un peu ; enfin, ça arrive, mais même pas un texto pour prévenir qu’il serait en retard…

 Quelques minutes plus tard, André entre dans le restaurant, et demande quelque chose au serveur, qui vous montre du doigt. Il s’approche de votre table rapidement, mais benoîtement.

 « Ah euh… Bonsoir, je… Je suis désolé, hein, je… Pas trouvé de place pour me garer, vraiment je suis navré…

 — [[Ça n’est pas grave]], faites-vous en souriant. »

 — [[Je me doute – la prochaine fois, ça serait poli de m’envoyer un texto, hein]], faites-vous en souriant. »

Une fois qu’on a tapé ceci dans notre premier passage, on voit le problème tout de suite : les noms des passages créés automatiquement sont très longs, et c’est illisible ! Twine vient à notre rescousse : il est possible de créer un lien vers un passage dont le nom n’est pas exactement le texte sur lequel porte le lien. La syntaxe est simple : [[le texte->nom du passage]]. Ici, nous allons remplacer nos liens par :

[[Ça n’est pas grave->laissons couler]]

[[Je me doute – la prochaine fois ça serait poli de m’envoyer un texto, hein->faisons la remarque]]

Attention aux espaces ici ! Si vous écrivez [[Ça n’est pas grave -> laissons couler]], le passage créé aura pour nom  » laissons couler », avec un espace devant. Ça peut vous jouer des tours, et c’est une erreur pas forcément facile à détecter de prime abord…

Nous pouvons maintenant écrire la suite : disons qu’André sourit et dit merci dans le premier cas, et fait une petite grimace dans le deuxième cas ; dans les deux cas ensuite, il va regarder le menu et commander une salade de chèvre chaud, et l’histoire reprend son cours normal. Pour faire cela, nous allons créer un passage (allez, appelons-le « chèvre chaud ») qui contient la suite de l’histoire :

André regarde le menu quelques instants, et fait « Ah ben tiens, je vais prendre la salade de chèvre chaud. »

Il faut ensuite que nous mettons en place les choses pour que, quelle que soit la réplique qu’on a choisie, on arrive dans ce passage-là. Il est tout à fait possible d’envoyer la lectrice sur un nouveau passage sans qu’elle s’en aperçoive (et en particulier sans avoir besoin de cliquer sur un lien) ; la commande pour afficher le passage est go-to. Par exemple, pour le passage « laissons couler », on écrira :

Il vous sourit. « Héhé, merci. Promis, j’ai pas l’habitude d’arriver en retard... » Vous souriez également.

(go-to: "chèvre chaud")

Il y a juste deux petits problèmes avec cette approche. La première est que Twine ne dessinera pas de flèche allant vers « chèvre chaud », ce qui est dommage. La deuxième, c’est qu’il ne crée pas automatiquement le passage. L’astuce que j’ai utilisée, c’est de commencer par écrire « [[chèvre chaud]] » pour qu’il soit créé, puis j’ai remplacé ceci par le « go-to ». Il y a peut-être mieux, mais je n’ai pas trouvé – mais dites-moi si vous trouvez  !

Remarquez la syntaxe : (XXX: YYY). Cette syntaxe est celle spécifique au format Harlowe : on retrouvera ce genre de constructions énormément. Dans Twine 1 (format Sugarcube), ça s’écrit plutôt << XXX YYY >> ; pour le format Snowman de Twine 2, c’est quelque chose comme <%=XXX YYY%>. Dans tous les cas, « XXX » est le nom d’une fonction ou macro dans le jargon Twine : c’est une fonctionnalité fournie par un format d’histoire Twine que vous pouvez utiliser directement dans votre code. Quant à « YYY », c’est la chose à laquelle vous voulez appliquer la macro (on dit souvent son argument, comme pour une fonction mathématique).

Il vous suffit de connaître quelques macros simples pour pouvoir faire déjà beaucoup de choses dans vos Twine. Le logiciel vous offre aussi la possibilité (avancée !) de créer vos propres macros, ou d’insérer des macros écrites par d’autres personnes dans votre jeu. Et des macros, on en trouve beaucoup sur Internet ! Ce qui a fait la richesse de Twine 1 est la quantité de macros disponibles : à l’époque, l’un des spécialistes était Leon Arnott, qui a écrit un grand nombre de macros, tellement utiles qu’elles ont été directement intégrées à Twine 1.4 ! (On en trouve encore pour SugarCube, par exemple ici.) Il en existe un grand nombre pour Twine 2 (tous les formats) : vous pouvez par exemple aller voir du côté du Twine Cookbook créé par l’Interactive Fiction Technology Foundation. La référence des macros intégrées à Harlowe est elle disponible ici.

Ceci est un test

Ainsi, on a proposé un choix à la lectrice, et le texte variait en fonction de ce choix ; cependant, l’histoire continue a priori de la même façon. Nous allons écrire une suite à l’histoire, en faisant une ellipse de plusieurs années : on retrouve André et le personnage du joueur, qui se remémorent leur première rencontre… Ici, on va adapter le texte en fonction de ce qui s’est effectivement passé, c’est-à-dire en fonction du passage qui a été emprunté :

<i>Quelques années plus tard...</i>

André se lève et tape doucement sur son verre avec un couteau. La noce se tait rapidement en se donnant des coups de coude. Il prend son verre de champagne, et commence son discours.

« Laissez-moi vous raconter notre premier rendez-vous… On avait rendez-vous à la Brasserie de la République à 19 h. Le jour même, je ne trouve pas de place pour me garer, j’arrive avec 20 minutes de retard… Et là… Tu te souviens de ce que tu m’as dit ? fait-il en riant.

(if: (history:) contains "laissons couler")[— Oui… ça n’est pas grave.

— Oui. Toutes ces années, et tu as toujours autant de patience et de bonté. Je t’aime. »]

(else:)[— Oui… faites-vous en rougissant. Je t’ai dit que t’aurais pu prévenir, déjà à l’époque…

— Oui, fait-il en riant de nouveau, on a encore les mêmes conversations ! On se dit toujours autant les choses, et c’est ça qui fait notre force. Je t’aime. »]

Il y a ici deux macros différentes. Commençons par history : il s’agit d’une macro spéciale qui donne (sous la forme d’un tableau) la liste des noms des passages visités par le joueur ; elle permet d’adapter le texte en fonction des choix faits par le joueur et des nœuds qui ont été visités. Ici nous l’utilisons en conjonction avec la macro if, qui est sans doute la macro la plus utile qui soit, puisqu’elle permet de tester une condition : si la condition est vraie, ce qu’il y a entre les premiers crochets est affiché ; si elle est fausse, c’est ce qu’il y a dans les autres crochets (ceux après else) qui sont affichés. On peut tester tout un tas de conditions avec if : ici, c’est « si la liste des passages visités contient « laissons couler », alors… », mais on peut aussi tester la valeur de variables (ce qu’on fera la prochaine fois), etc.

Disgrâce !

Testons notre histoire : pas de problème pour le premier choix mais, pour le deuxième, on a une espace disgracieuse. La raison est que dans le code, lorsque nous avons écrit le (else:, nous sommes revenus à la ligne pour la clarté et la lisibilité du code ; mais dès qu’on saute une ligne, pour une raison ou une autre (lisibilité, séparation du code, etc.), Twine saute automatiquement une ligne. (C’est un problème spécifique à Twine, pour tout vous dire, mais c’est parce que ce qui est dans un passage doit correspondre fidèlement à ce que vous avez sur l’écran, c’est plus intuitif.)

Pour se débarrasser d’un retour à la ligne intempestif, la méthode est toute simple : rajoutez un caractère \ (backslash) à la fin de la ligne où les premiers crochets finissent (juste avant le saut de ligne qui mène au else, en somme). Testez, et voilà le retour à la ligne disparu — retenez cette astuce, car elle vous servira !

Et voilà, votre dîner avec André est terminé ! Revenez bientôt pour un tutoriel sur les variables en Twine !

Tutoriel Twine 2 : les variables

Hugo Labrande

Le tutoriel d’aujourd’hui porte sur une technique très générale et basique pour adapter votre histoire aux choix faits par le joueur : l’utilisation de variables, et les passages dépendant de la valeur de certaines variables. Les variables vous permettent de stocker des informations auxquelles vous pouvez accéder plus tard ; elles représentent un très bon moyen de garder une structure simple pour votre jeu tout en accommodant plus de variations (mineures comme majeures), au prix de quelques lignes de code très simples.

Qui êtes-vous ?

Imaginez que vous avez un jeu complexe, avec tout un arbre de possibilités. Sur une suggestion de votre maman, la première de vos testeuses, vous voulez ajouter la fonctionnalité suivante : le joueur peut choisir au début du jeu si il veut incarner un personnage qui s’appelle Alexis ou un autre qui s’appelle Jacqueline. Il va falloir rajouter un choix au début, en demandant si le joueur préfère s’appeler Alexis ou Jacqueline. Et après… Vous contemplez votre arbre de possibilités, et soupirez. Il va vraiment falloir dupliquer tout l’arbre pour avoir un arbre avec que du Alexis à gauche et un autre avec que du Jacqueline à droite ?

Ok, maman, je vais essayer…

Bien entendu, non, les variables rendent la chose plus simple ! Concrètement, vous faites une variable qui contient « Alexis » ou « Jacqueline » (selon le choix du joueur) ; et dans votre jeu, au lieu de tout le temps afficher « Alexis », vous affichez ce qu’il y a dans cette variable. C’est beaucoup plus simple !

Le premier nœud sera quelque chose comme :

Bienvenue ! Avant de commencer ce récit, préférez-vous vous appeler [[Jacqueline]] ou [[Alexis]] ?

Ensuite, on crée les nœuds correspondant aux deux choix, et chaque nœud va simplement mettre quelque chose de différent dans notre variable, qu’on appellera « prénom ». La syntaxe est la suivante (par exemple pour le nœud « Jacqueline ») :

(set: $prenom to "Jacqueline")

(go-to: "debut-histoire")

Désormais, « prénom » contient « Jacqueline » : vous pouvez alors écrire dans le nœud suivant, que nous avons nommé « debut-histoire » :

Quand (print: $prenom) ouvre enfin les yeux, le réveil affiche 07h48. Aaah !

Le nom d’une variable doit commencer par un « $ » ; c’est la façon de Twine de signaler que ce qui suit n’est pas du texte, mais le nom d’une variable. Quant à la macro « print », elle est là pour afficher le contenu de la variable.

Utiliser des variables ainsi permet d’écrire du texte qui s’adapte sans peine aux choix précédents, sans avoir un nombre de branches trop conséquent ; c’est très utilisé, et en fait dans la plupart des jeux. Cependant, si à chaque fois que vous touchez à une variable vous devez faire une petite structure « en diamant », votre code risque d’en être rempli, et ça peut nuire à la lisibilité de votre structure générale… Pour éviter ceci, et parce que ce genre de choix est tellement utilisé, les créateurs de Twine ont créé une construction spécifique, les « setter links », que vous pouvez utiliser à chaque fois que vous voulez modifier la valeur d’une variable en fonction du lien sur lequel la lectrice clique.

Reprenons le premier nœud, et au lieu de créer des liens vers les passages « Jacqueline » et « Alexis », changeons les liens en des « liens modificateurs » (ma traduction de setter links…) :

Bienvenue ! Avant de commencer ce récit, préférez-vous vous appeler (link:"Jacqueline")[(set:$prenom to "Jacqueline")(go-to: "debut-histoire")] ou (link:"Alexis")[(set:$prenom to "Alexis")(go-to: "debut-histoire")] ?

Si ça vous fait peur, pas d’inquiétude, on vous explique ! La macro (link: crée un lien avec le texte « Jacqueline » (ou « Alexis », pour le deuxième rien), et ce qui suit entre crochet indique ce qu’il faut faire si on clique sur ce lien : donner à la variable $prenom la valeur « Jacqueline », puis aller au nœud « debut-histoire » ; on fait pareil pour le deuxième lien. Du coup, vous n’avez plus besoin de créer des passages « Jacqueline » et « Alexis », dont le seul but était de changer la valeur de $prenom : ça nettoie un peu votre structure et évite de créer des nœuds « pour rien » !

On peut faire encore plus flexible pour ce cas du prénom : et si on voulait que la joueuse puisse taper le prénom qu’elle souhaite utiliser ? C’est possible avec la macro prompt ; votre premier nœud deviendrait alors

Bienvenue ! (set: $prenom to (prompt: "Avant de commencer ce récit, tapez votre prénom :", "Tapez votre prénom ici"))

Ce qui veut dire essentiellement « mettez dans $prenom le résultat de la macro prompt, c’est-à-dire ce qui vient d’être tapé par le joueur ; le texte qui s’affichera par défaut dans la zone de texte est « tapez votre prénom ici » ».

Tout à fait mon genre

Permettre au lecteur de choisir son prénom a tout de même des incidences sur le reste de votre jeu, puisqu’il va falloir changer les pronoms et les accords dans votre jeu en fonction du genre correspondant ! Partons du principe que « Jacqueline » implique que la lectrice veut être de genre féminin, et que « Alexis » implique un genre masculin (on précise, parce qu’en anglais, c’est plutôt un prénom féminin !). Pour les accords, on va utiliser tout simplement un test, avec la macro « if », que l’on a déjà rencontrée au tutoriel précédent :

« Bonjour, (print: $prenom) ! Ça va, tu as l’air (if: $prenom is "Alexis") [essoufflé] (else:) [essoufflée] !

 - Tu me connais, je suis (if: $prenom is "Alexis") [un grand] (else:) [une grande] retardataire... »

Avec ces tests, on a deux textes différents, mais on n’a besoin que d’un seul nœud : ça ne complexifie pas la structure de notre jeu, mais on prend en compte plus de possibilités !

Si vous trouvez le code précédent un peu lourd, c’est normal ! On parlera dans un tutoriel suivant de la possibilité de créer des macros personnalisées, des widgets, qui permettent d’automatiser ce genre de tests : plus besoin d’écrire le test, on écrit une macro qui fait le test et on l’appelle quand on en a besoin !

Pour ce qui est des pronoms, on peut faire la même chose ; mais ici, il y a beaucoup moins de variabilité que pour les accords, et on peut peut-être s’en tirer… avec des variables, encore une fois ! On peut créer une variable $pronompersonnel, qui contiendra « il » pour Alexis et « elle » pour Jacqueline ; et encore une fois, on peut changer leur valeur dans un « lien modificateur ». Et même mieux : on peut surcharger celui qu’on a déjà créé pour changer les variables $prenom et $pronompersonnel en même temps ! La syntaxe pour faire plusieurs assignations est simplement de les séparer par un point-virgule ; ainsi on obtient

Bienvenue ! Avant de commencer ce récit, préférez-vous vous appeler (link:"Jacqueline")[(set:$prenom to "Jacqueline"; $pronompersonnel to "elle")(goto: "debut-histoire")] ou (link:"Alexis")[(set:$prenom to "Alexis"; $pronompersonnel to "il")(goto: "debut-histoire")] ?

Vous pouvez tester ceci en écrivant par exemple :

« Oui, j’attends (print: $prenom), là… Ouais… Bah, (print: $pronompersonnel) est toujours en retard, de toute façon... »

Certains joueurs aiment bien pouvoir choisir leurs pronoms, encore une fois dans un intérêt de personnalisation et d’identification au personnage principal ; c’est une possibilité par exemple dans quasiment tous les jeux de Choice of Games, et le jeu s’adapte sans problème, ce qui renforce l’immersion. Pour faire ceci, utilisez encore une fois la macro prompt, mais cette fois pour changer la variable $pronompersonnel :

(set: $pronompersonnel to (prompt: "Tapez votre pronom :"))

Il reste encore un peu de boulot pour les pronoms, pour définir les formes « lui/elle » et « le/la », mais c’est exactement la même technique – et voilà, vous pouvez créer relativement simplement une histoire où le texte s’adapte au genre du protagoniste !

Un (petit) peu de CSS dans votre Twine ?

Hugo Labrande

Les tutoriels précédents sur ce site ont parlé des bases de Twine (Twine 2 et Harlowe, plus précisément) : comment créer des passages, les relier entre eux, faire des histoires avec branchements divergents, modifier le texte à la volée avec des variables… En suivant ces tutos, vous pouvez enfin créer votre grand livre dont vous êtes l’héroïne, une histoire pleine de rebondissements, de personnages attachants, et de blagues sur la SNCF (pourquoi pas). Et ça n’est pas fini ! On vous prépare des tutos plus pointus sur des aspects intéressants de Twine, et comment décupler ses possibilités.

Il y a juste un problème. Votre jeu, aussi bien écrit qu’il soit, utilise le format par défaut de Twine. Vous allez le montrer à des gens, qui vont voir… un truc qui ressemble au Twine précédent, et au Twine suivant. Et malheureusement, dans l’ère actuelle, il faut aller chercher l’attention du lecteur, qui a probablement 20 autres onglets ouverts dans son navigateur ; ou tout simplement avoir des captures d’écran qui en jettent pour votre page sur itch.io ou pour votre kit de presse que vous allez spammer à toutes les rédactions de jeux vidéo. Il va falloir se plonger dans les entrailles de votre page web, et modifier les éléments de style (la « feuille CSS ») pour rendre la présentation plus attrayante.

Mais hauts les cœurs ! Il y a quelques heures, je n’y connaissais rien non plus, et maintenant, ça va mieux ! Il y a plein d’aide sur le sujet, et surtout, le superbe tutoriel de furkle. (furkle, au passage, est l’extraordinaire auteur de Spy Intrigue, un jeu à l’humour noir paru pendant l’IFComp 2015, et qui a été fait avec Twine — et la simple vue de l’interface du jeu devrait vous convaincre que furkle sait y faire et va pouvoir nous aider.)

Les bases

Commencez par ouvrir votre histoire dans Twine. Dans le menu en bas à gauche, vous trouverez l’option « Modifier la feuille de style de l’histoire » : cliquez, et une fenêtre s’ouvre. Là, tapez :

body {

 text-align: center;

 font-size: 125%;

}

Testez votre jeu : le texte de votre jeu est désormais écrit plus gros et est centré !

En CSS, ce que nous venons d’écrire s’appelle une règle : il y a un sélecteur (body, le corps de la page) et des propriétés qui prennent des valeurs différentes. Les règles peuvent se combiner et s’empiler : si Twine définit des règles mais que vous aussi, ce sont les vôtres qui gagnent (et donc en contrepartie, si vous ne spécifiez rien, les règles par défaut de Twine s’appliquent quand même).

Un petit point sur les sélecteurs : il en existe plusieurs spécifiques à Twine. Nous avons vu le sélecteur body, qui affecte le corps de la page HTML, c’est-à-dire essentiellement tous les éléments de la page ; ce sélecteur est le sélecteur de base, présent dans toutes les pages HTML. Une page HTML générée par Twine est essentiellement séparée en deux : la zone sur le côté où s’affichent les flèches permettant de revenir en arrière (tw-sidebar) et le reste, l’espace dédié à votre histoire (tw-story). Pour bien voir la différence entre les deux, nous allons en colorer une en bleu et une en rouge (attention, ça va faire mal aux yeux) :

tw-story {

 background-color: #0000ff;

}

tw-sidebar {

 background-color: #ff0000;

}

Aïe !

La gestion des couleurs se fait en spécifiant le codage hexadécimal RVB (« rouge vert bleu », en anglais « RGB ») de la couleur, qui est plutôt standard et très fréquemment utilisé en HTML ou en CSS. Pour trouver la teinte que vous voulez, il y a des guides en ligne (comme celui-ci) avec des listes de teintes et leur codage RVB ; ou vous pouvez également ouvrir n’importe quel programme de dessin ou retouche photo et cliquer sur la palette, et les numéros correspondants sont en général écrits. Vous pouvez aussi écrire en format RVB :  rgb(255, 0, 0) pour du rouge, par exemple.

Vous voyez bien les zones, mais ces couleurs sont horribles ! Alors mettons du blanc (#ffffff) sur l’histoire et du gris (#c8c8c8) sur la barre latérale… Après test, vous ne voyez plus votre texte — c’est normal, il est écrit en blanc ! Ajoutez alors à tw-story la propriété color : #000000 », pour mettre le texte en noir. Tout cela prend forme.

À l’intérieur de tw-story, il y a tw-passage, qui correspond plus particulièrement à la zone où le texte du passage courant est en train de s’afficher. Juste pour montrer la différence, mettez cette zone en gris clair (#e6e6e6), de la même façon que précédemment : la zone du texte est en gris, le reste est en blanc à part la barre latérale. Ça n’est pas très esthétique, et je vous encourage à faire mieux !

Enfin, les liens ont leur propre sélecteur, « tw-link », pour que vous puissiez en modifier l’apparence ; vous pouvez aussi sélectionner plus précisément les liens visités, avec le sélecteur « tw-link.visited ». Encore une fois, on utilise « color », pour mettre les liens en vert-bleu et les liens visités en pourpre :

tw-link {

 color: #008c28;

}

tw-link.visited {

 color: #8C0028;

}

Ouf !

Les balises

Les balises sont une fonctionnalité assez chouette de Twine : vous pouvez ajouter des balises, c’est-à-dire des étiquettes ou encore des tags, à vos passages, pour signifier que certains passages ont des caractéristiques communes. Pour rajouter une balise, rien de plus simple, et vous l’avez déjà vu : ouvrez un passage, et entre le titre et votre texte se trouve un emplacement avec un « +Balise » : cliquez dessus, tapez le nom de l’étiquette à ajouter et validez.

À quoi servent ces balises ? Mettons que vous ayez créé une balise « rêve », que vous avez ajoutée à tous les passages qui sont en fait des rêves du protagoniste. Vous pouvez maintenant modifier le CSS de ces passages, et uniquement ces passages, en sélectionnant ceux qui correspondent à la balise « rêve » :

tw-story[tags~="rêve"] {

 background-color: #c86464;

}

Le code précédent change la couleur de fond pour toute la page si on est dans un rêve ; mais si vous voulez seulement modifier tw-passage, c’est aussi possible : écrivez tw-passage[tags~="rêve"] {, de façon similaire.

C’est tout pour aujourd’hui, mais c’est déjà pas mal ! À vous les Twine colorés, les changements de palette de couleurs selon la zone dans laquelle se trouve le lecteur, les séquences de rêve qui tranchent complètement avec celles de la vie réelle, les fonds d’écran qui s’obscurcissent à mesure que l’histoire devient de plus en plus sombre… À vous de jouer ! On reparlera très bientôt de tout ça dans un prochain tutoriel, où l’on creusera un peu les propriétés que l’on peut utiliser dans tw-passage ou dans tw-sidebar, pour encore plus d’effets intéressants !

Twine 2 : des effets CSS plus complexes pour vos passages

Hugo Labrande

Dans notre dernier tutoriel Twine, nous avons commencé à aborder l’utilisation des feuilles de style CSS pour changer l’apparence d’un Twine au format Harlowe. Le monde du CSS est vaste (c’est un euphémisme, vu les centaines de livres sur le CSS qui sortent chaque année…), et il est possible de faire énormément d’effets de style avec Twine.

J’avoue tout de go n’avoir aucune expérience en design de pages web (jusqu’à l’été dernier, ma page personnelle était du texte pur avec un fond jaune, du plus bel effet si vous vivez en 1995), et pour tout dire je ne sais pas si on a beaucoup de designers web dans notre communauté ; si ça vous intéresse de faire un tutoriel de base sur quelques règles à respecter pour obtenir quelque chose de plaisant visuellement, envoyez-moi un message, et on en discutera, ça sera avec plaisir !

Pour l’heure, nous allons nous intéresser de plus près à tout un tas de propriétés qui permettent de changer la façon dont les passages sont affichés ; ainsi, nous écrirons nos règles CSS pour le sélecteur tw-passage. Pour rappel, les règles CSS s’écrivent dans « Modifier la feuille de style de l’histoire » ; une règle sur ce sélecteur s’écrit par exemple :

tw-passage {

 color: #ffffff;

}

Il existe d’autres sélecteurs que tw-passage. Si vous voulez des informations sur ces sélecteurs, ou plus d’informations sur les règles présentées ici, ainsi qu’un environnement de test interactif pour vous amuser, allez voir le tutorial de furkle sur le CSS en Harlowe  !

Fuck the police

La première chose que l’on peut changer, c’est la façon dont les mots sont affichés à l’écran. Plusieurs propriétés s’y rapportent :

color : la couleur de la police, spécifiée soit avec le code RVB (comme rgb(58, 230, 131), pour un bleu-vert clair), soit avec le code hexadécimal (comme #3ae683, pour la même couleur). Vous pouvez obtenir les valeurs correspondantes en regardant en ligne, ou en ouvrant un programme de dessin ou de retouches photo et en regardant la palette (les deux données sont généralement indiquées pour pouvoir les modifier et obtenir la couleur exacte souhaitée). Attention à bien choisir la couleur : il est important que le texte soit lisible sur le fond choisi, mais une couleur trop flashy fera mal aux yeux !

text-align : l’alignement du texte, qui peut être left, center, right ou justify.

font-size : la taille du texte (de sa police), qui peut être spécifiée de plusieurs façons : relative (200%, pour avoir quelque chose qui s’affiche deux fois plus gros que les réglages par défaut du navigateur), ou absolue (12px pour une police de taille de 12 pixels, mais qui ne créera donc pas le même effet sur un petit téléphone que sur un grand écran HD).

font-family : la police de caractères elle-même, spécifiée de la même façon qu’en CSS. Pour des raisons de flexibilité, il est recommandé de mettre plusieurs polices de caractères dans cette propriété, et de terminer par le nom d’une famille générique.
Ces grandes familles sont serif pour les polices avec des empattements (c’est-à-dire des extrémités sur les barres des caractères comme le « b »), sans-serif pour celles sans, monospace pour les polices qui roulent en Scénic où tous les caractères ont la même largeur, cursive pour celles qui imitent les rondeurs et les liens entre les lettres que fait l’écriture manuscrite, fantasy pour les polices étranges ou drôles (comme le Comic Sans MS, la police préférée des gens qui veulent troller leurs amis typographes). On mettra donc le nom d’une ou deux polices entre guillemets, en démarrant avec la plus exotique, puis on terminera par la grande famille ; le navigateur essaiera de récupérer la première, puis sinon la deuxième, etc., jusqu’à arriver à la fin et, au pire, devoir choisir une police de la même famille.
Si vous souhaitez vraiment utiliser une super police trouvée sur la toile, il faudra utiliser la règle spéciale @font-face, qui fera télécharger automatiquement la police quand l’utilisateur jouera à votre jeu, mais ce ne sera pas expliqué ici. Un bon site pour trouver des polices gratuites et pour générer ces règles @font-face est Font Squirrel.

On pourra ainsi écrire :

tw-passage {

 color: #4682b4;

 text-align: center;

 font-size: 80%;

 font-family: "Geneva", "Helvetica", "Arial", sans-serif;

}

Gardez en tête que ces règles s’appliquent à tous les passages, puisque vous les mettez dans tw-passage. Si vous voulez qu’elle ne s’applique qu’à certains passages mais pas à d’autres, il faut utiliser des balises, comme expliqué dans notre tuto précédent. Par contre, si vous voulez changer l’aspect de quelques mots, il faut utiliser du code HTML comme <span>des mots à modifier</span> et rajouter des propriétés dans span ; ceci pourra faire l’objet d’un tutoriel ultérieur.

Placez votre texte ici

Passons ensuite aux propriétés qui vous permettent de jouer sur la zone où le texte de votre histoire apparaîtra. Il y en a essentiellement quatre :

width (largeur, en anglais) : la largeur de la zone occupée par le texte à l’écran. Vous pouvez spécifier une largeur absolue (en pixels, par exemple 400px) ou relative ; dans ce cas, il faut spécifier le pourcentage de la zone de texte (la partie de l’écran qui n’est pas la barre latérale) que vous voulez occuper. On conseille en général d’utiliser les mesures relatives, car elles fonctionneront sur toutes les machines (ordinateur à grand écran comme téléphone à petit écran).

padding (rembourrage ou marge intérieure) : l’écart que vous voulez entre les bords de la zone de texte (que vous venez de spécifier avec width) et votre texte à l’intérieur. Si vous mettez un rembourrage de 0, le texte peut aller jusqu’à toucher le bord, ce qui peut être disgracieux (notamment si votre bord est visible, par exemple si la couleur de votre passage est différente de la couleur de fond de la page). Préférez ainsi une petite valeur, comme 2em (deux fois la taille d’un caractère dans la police actuelle). Il est également possible d’utiliser les mêmes unités que tout à l’heure comme les px et les %.

margin (marge) : l’écart entre les bords de la zone de texte et l’élément extérieur. (Les marges font bouger votre zone de texte, le rembourrage fait bouger votre texte à l’intérieur de la zone de texte.) Si vous spécifiez simplement margin: auto, la zone de texte sera automatiquement centrée (et de taille spécifiée par width) ; mais vous pouvez jouer sur les marges pour avoir quelque chose d’excentré, par exemple, et créer un effet intéressant.

background-color : la couleur de fond de votre zone de texte (nous l’avons déjà rencontrée au tutoriel précédent !).

Par exemple, nous allons ajouter aux règles précédentes les règles

 background-color: #fffacd;

 width: 90%;

 padding: 1em;

 margin: auto;

À noter que pour padding et margin, vous pouvez en fait spécifier des valeurs différentes pour le haut, le bas, la gauche et la droite. Il suffit de mettre 4 valeurs de suite (séparées par une espace) dans la règle, comme par exemple margin: 1em 2em 2em 3em ; les valeurs s’appliqueront respectivement en haut, à droite, en bas et à gauche. Si on n’en met que 2, cela sera interprété comme « une pour le haut et le bas, l’autre pour la gauche et la droite ». Allez voir par exemple ce tutoriel CSS pour vous aider !

Par les moustaches de Plekszy-Gladz

Enfin, trois règles vous permettent de dessiner une bordure autour de votre zone de texte :

border : la bordure, avec 3 attributs à spécifier : le type (dotted pour des pointillés, dashed pour des traits, solid pour une ligne continue, double pour deux lignes continues, groove pour un effet de relief « en gouttière », ridge pour un effet inverse de côté un peu surélevé, inset pour un effet enfoncé, et outset pour un effet surélevé), la taille (en px ou en em — attention à ne pas la prendre trop grande), et la couleur.

border-radius : le degré d’arrondi sur les rebords de la zone. Des faibles valeurs vous donneront des bords faiblement incurvés (1% ou 2% donnent presque des coins arrondis), des valeurs supérieures à 50% feront que votre zone de texte ressemble à une ellipse. Encore une fois, il est possible d’utiliser des valeurs absolues en px.

box-shadow : ajoute une ombre sous votre zone de texte. Il faut spécifier la couleur de l’ombre, le décalage (horizontal et vertical), et la largeur de l’ombre ; on peut conseiller d’avoir un décalage et une largeur suffisantes pour avoir un effet d’ombre relativement réaliste, mais des valeurs plus faibles ajouteront une touche de couleur, tout en gardant l’apparence sobre et stylisée.

Ajoutons donc aux règles précédentes :

 border: outset 0.5em #64c8c8;

 border-radius: 2%;

 box-shadow: #fab57f 1em 1em 0.2em;

Et voyons le résultat, combiné aux règles déjà appliquées pour le tutoriel précédent…

C’est le truc le plus joli que j’aie jamais fait de ma vie

Pas un chef-d’œuvre, mais quelque chose de visuellement accrocheur et intéressant, surtout pour quelqu’un qui ne connaissait rien en CSS au début de ce tutoriel ! (Je parle de moi, là — et éventuellement de vous !) Bien sûr, il est possible de faire bien plus que ça avec le CSS (peut-être un prochain tutoriel ?) ; et on pourrait aussi rajouter des règles dans d’autres sélecteurs (comme body ou tw-sidebar) pour parfaire le tout. C’est tout pour aujourd’hui, mais j’espère vous avoir ouvert les yeux et stimulé le cerveau en vous montrant toutes les possibilités qui s’ouvrent à vous en utilisant ces règles simples !

Tutoriel : créez un jeu Twine multilingue

Mia Blais-Côté

Bonjour, je suis Mia Blais-Côté. Passionnée d’écriture et de FI (eh oui !) je me suis lancée dans du commercial sur Steam… tout en apprenant un truc cool ou deux. Dans cet article, je vais vous montrer l’un de ces truc cools : une méthode pour faire un Twine multilingue ! Il y a plusieurs méthodes, voici la mienne, que j’ai conçue notamment à partir de ce que m’a indiqué TheMadExile, concepteur du format SugarCube (ici et là).

Cette méthode marche très bien, je l’ai utilisée notamment pour mes deux jeux, 4 Alice: Lorange Journey et Alan : Rift Breakers, que vous pouvez retrouver sur Steam. 4 Alice: Lorange Journey est désormais traduit en 7 langues (y comprit l’arabe !), Alan: Rift Breakers en a 5, et j’en ajoute fréquemment car c’est une bonne stratégie sur Steam.

Les codes donnés dans cet article marchent pour le format SugarCube version 2 (très important), pour Twine 1 et Twine 2. Et vous avez de la chance, je vous ai même fait des vidéos pour accompagner ce tutorial !

Avec Twine 1

Tout d’abord, il faut créer une nouvelle histoire et choisir le format SugarCube 2. Comme ce format n’est pas intégré dans Twine 1, vous devez le télécharger à l’adresse http://www.motoslave.net/sugarcube/2/ (en bas de « Download »). Ensuite, ajoutez un passage de type stylesheet (feuille de style), avec le code suivant :

#story-title {

 display: none;

 }

Ensuite, créez un passage de type Script, et ajoutez le code suivant :

setup.i18n = {

 langs : {

 'English' : 'en',

 'Français' : 'fr',

 },

codes : function () {

 return Object.keys(this.langs).map(function (label) {

 return this.langs[label];

 }, this);

 },

labels : function () {

 return Object.keys(this.langs);

 },

labelFromCode : function (code) {

 var label = Object.keys(this.langs).find(function (label) {

 return this.langs[label] === code;

 }, this);

if (!label) {

 throw new Error('unknown language code "' + code + '"');

 }

return label;

 }

 };

function initLanguage() {

 switch (setup.i18n.langs[settings.lang]) {

case 'fr':

 l10nStrings.ok = 'OK',

 l10nStrings.savesLabelSlot = 'Emplacement',

 l10nStrings.savesSavedOn = 'Sauvegarder sur',

 l10nStrings.uiBarToggle = 'Cache / Montre l’IU';

 l10nStrings.settingsTitle = 'Paramètres';

 l10nStrings.settingsOff = 'Off';

 l10nStrings.settingsOn = 'On';

 l10nStrings.settingsReset = 'Réinitialiser';

 l10nStrings.cancel = "Annuler";

 l10nStrings.restartTitle = "Recommencer";

 l10nStrings.restartPrompt = "Êtes-vous sûr de vouloir recommencer? Tout progrès non sauvegardé sera perdu.";

 l10nStrings.savesTitle = "Sauvegardes";

 l10nStrings.savesEmptySlot = "emplacement vide";

 l10nStrings.savesLabelDelete = "Effacer";

 l10nStrings.savesLabelExport = "Sauvegarder au Disque";

 l10nStrings.savesLabelImport = "Charger du Disque";

 l10nStrings.savesLabelLoad = "Charger";

 l10nStrings.savesLabelClear = "Tout Effacer";

 l10nStrings.savesLabelSave = "Sauvegarder";

 break;

}

$('html').attr('lang', setup.i18n.langs[settings.lang]);

 }

function changeLanguage() {

 window.location.reload();

 }

Setting.addList('lang', {

 label : 'Langue - Language',

 list : setup.i18n.labels(),

 default : setup.i18n.labelFromCode('fr'),

 onInit : initLanguage,

 onChange : changeLanguage

 });

postrender['i18n-passage-include'] = function (content) {

 var passage = State.passage + '_' + setup.i18n.langs[settings.lang];

$(content).empty().wiki(Story.get(passage).processText());

 };

Il est rangé en haut à gauche, et c’est lui qui fait la magie

Puis créez un passage appellé StoryBanner avec ceci dedans :

<<switch setup.i18n.langs[settings.lang]>>

 <<case "en">>Your title in english

 <<case "fr">>Votre titre en français

 <</switch>>

Et voilà comment on traduit le titre de notre jeu !

Pour finir, créez trois passages, l’un vide (le «contenant») et les deux autres ayant le code ISO des langues voulues. (Par exemple : Start, Start_fr, Start_en.)

Maintenant, en testant votre histoire, vous aurez un menu avec des boutons. Cliquez sur Paramètres et vous verrez l’option qui vous permettra de changer de langues. Le joueur peut changer la langue à n’importe quel moment, sans que cela ne perturbe le jeu ni perde sa progression !

Le menu de sélection des langues

Avec Twine 2

C’est presque la même chose qu’avec Twine 1 !

Créez  une nouvelle histoire et choisissez le format Sugarcube 2, dans « Modifier le format de l’histoire ».

De toute façon, la version 1.0.35 de SugarCube n’est plus mise à jour

Dans « modifier la feuille de style de l’histoire », mettez le code suivant :

#story-title {

 display: none;

 }

Insérez ensuite le code suivant dans « modifier le Javascript de l’histoire » :

setup.i18n = {

 langs : {

 'English' : 'en',

 'Français' : 'fr',

 },

codes : function () {

 return Object.keys(this.langs).map(function (label) {

 return this.langs[label];

 }, this);

 },

labels : function () {

 return Object.keys(this.langs);

 },

labelFromCode : function (code) {

 var label = Object.keys(this.langs).find(function (label) {

 return this.langs[label] === code;

 }, this);

if (!label) {

 throw new Error('unknown language code "' + code + '"');

 }

return label;

 }

 };

function initLanguage() {

 switch (setup.i18n.langs[settings.lang]) {

case 'fr':

 l10nStrings.ok = 'OK',

 l10nStrings.savesLabelSlot = 'Emplacement',

 l10nStrings.savesSavedOn = 'Sauvegarder sur',

 l10nStrings.uiBarToggle = 'Cache / Montre l’IU';

 l10nStrings.settingsTitle = 'Paramètres';

 l10nStrings.settingsOff = 'Off';

 l10nStrings.settingsOn = 'On';

 l10nStrings.settingsReset = 'Réinitialiser';

 l10nStrings.cancel = "Annuler";

 l10nStrings.restartTitle = "Recommencer";

 l10nStrings.restartPrompt = "Êtes-vous sûr de vouloir recommencer? Tout progrès non sauvegardé sera perdu.";

 l10nStrings.savesTitle = "Sauvegardes";

 l10nStrings.savesEmptySlot = "emplacement vide";

 l10nStrings.savesLabelDelete = "Effacer";

 l10nStrings.savesLabelExport = "Sauvegarder au Disque";

 l10nStrings.savesLabelImport = "Charger du Disque";

 l10nStrings.savesLabelLoad = "Charger";

 l10nStrings.savesLabelClear = "Tout Effacer";

 l10nStrings.savesLabelSave = "Sauvegarder";

 break;

}

$('html').attr('lang', setup.i18n.langs[settings.lang]);

 }

function changeLanguage() {

 window.location.reload();

 }

Setting.addList('lang', {

 label : 'Langue - Language',

 list : setup.i18n.labels(),

 default : setup.i18n.labelFromCode('fr'),

 onInit : initLanguage,

 onChange : changeLanguage

 });

postrender['i18n-passage-include'] = function (content) {

 var passage = State.passage + '_' + setup.i18n.langs[settings.lang];

$(content).empty().wiki(Story.get(passage).processText());

 };

Puis, comme dit ci-haut, créez un passage appellé StoryBanner, et mettez-y les lignes :

<<switch setup.i18n.langs[settings.lang]>>

 <<case "en">>Your title in english

 <<case "fr">>Votre titre en français

 <</switch>>

Pour finir, créez trois passages, l’un vide (le « contenant ») et les deux autres ayant le code ISO des langues voulues. Par exemple: Commencer, Commencer_fr, Commencer_en. Maintenant, en testant votre histoire, vous aurez un menu avec des boutons. Cliquez sur Paramètres et vous verrez l’option qui vous permettra de changer de langues. (C’est le même menu que celui de Twine 1, alors scrollez un peu plus haut pour la capture d’écran correspondante !)

Et voilà !

Vous avez maintenant un jeu multilingue, où le joueur peut changer de langue à n’importe quel moment sans perdre sa progression ! Et c’est facile d’ajouter des langues en plus, il suffit de traduire les chaînes l10nStringset de les ajouter au script avec le code ISO correspondant ! Par exemple :

Exemple tiré de mon jeu « Alan: Rift Breakers ».

Bien entendu, pour certaines langues comme pour le russe ou l’arabe, il vous faudra des polices de caractères compatible avec le lettrage non-Latin !

Voilà, merci de m’avoir lue ! Vous pouvez visiter le site web de mes jeux à l’adresse suivante : miagames.net !

Choix de polices d’écriture et de tailles de texte sur Twine 1

Mia Blais-Côté

Bonjour tout le monde ! Ici Mia et je suis de retour avec un autre article-tutoriel pour Twine 1. Grâce à lui, vous pourrez personnaliser votre histoire en donnant au lecteur ou à la lectrice l’option de choisir entre plusieurs polices de caractères et de tailles de texte.

Pour commencer, ouvrez un nouveau projet dans Twine 1, puis choisissez le format d’histoire SugarCube 2 si vous l’avez déjà. (Sinon, vous pouvez le télécharger à cette adresse.)

Comme d’habitude !

Ensuite, créez un passage de type Script et mettez ce code :

var settingSizeNames = ["Petite", "Moyenne", "Grande"];

var settingSizeHandler = function () {

 var $html = $("html");

$html.removeClass("petite");

$html.removeClass("moyenne");

$html.removeClass("grande");

switch (settings.Size) {

 case "Petite":

$html.addClass("petite");

 break;

 case "Moyenne":

$html.addClass("moyenne");

 break;

 case "Grande":

$html.addClass("grande");

 break;

 }

};

Setting.addList("Size", {

 label : "Taille",

 list : settingSizeNames,

 onInit : settingSizeHandler,

 onChange : settingSizeHandler,

 default : "Petite",

});

var settingFontNames = ["Amble", "Open Dyslexic", "Open Sans"];

var settingFontHandler = function () {

 var $html = $("html");

$html.removeClass("amble");

$html.removeClass("opendyslexic");

$html.removeClass("opensans");

 switch (settings.Font) {

 case "Amble":

$html.addClass("amble");

 break;

 case "Open Dyslexic":

$html.addClass("opendyslexic");

 break;

 case "Open Sans":

$html.addClass("opensans");

 break;

 }

};

Setting.addList("Font", {

 label : "Police",

 list : settingFontNames,

 onInit : settingFontHandler,

 onChange : settingFontHandler,

 default : "Amble",

});

Pour ce tutoriel, j’utilise les polices de caractère Amble, Open Sans et Open Dyslexic.

Vous pouvez modifier settingsSizeNames pour choisir ce qui s’affichera dans le menu. Malheureusement, ces noms ne peuvent pas s’adapter dynamiquement à la langue choisie ; si votre jeu est multilingue, comme dans le tutoriel précédent, les options s’afficheront toujours pareil… Un texte comme « S », « M » et « XL » est peut-être le plus universel.

Vous pouvez également modifier le nom des classes (ce qu’il y a entre les parenthèses après removeClass et addClass) ; si c’est le cas, il vous faut aussi modifier le nom des classes correspondantes dans le CSS ci-dessous.

Puis créez une feuille de style (CSS) avec ceci dedans :

html.opendyslexic .passage {

 font-family: OpenDyslexic-Regular;

}

html.amble .passage {

 font-family: Amble-Regular;

}

html.opensans .passage {

 font-family: OpenSans-Regular;

}

html.petite .passage {

 font-size: 18pt;

}

html.moyenne .passage {

 font-size: 20pt;

}

html.grande .passage {

 font-size: 22pt;

}

Le résultat

À noter que si vous avez traduit des noms de classe en français dans le passage Script, ceux-ci doivent avoir les mêmes noms dans votre feuille de style, ou le code ne va pas marcher. Par exemple, si vous avez remplacé « small » par « petit », il vous faudra écrire html.petit.passage.

Maintenant, tout ce qu’il vous reste à faire, c’est de télécharger les polices que vous aurez choisi, ou celles utilisées dans ce tutoriel, puis de les importer dans votre histoire en cliquant sur « Story » puis « Import Font ».

Voici le lien vers les polices utilisées ici : Amble, Open Sans et Open Dyslexic.

Par la suite, en testant votre histoire, vous aurez un bouton « Settings » (ou « Préférences » si vous avez suivi notre tutoriel précédent). En cliquant dessus, un menu s’ouvrira et vous permettra de choisir la police et de la taille du texte !

Et une option de plus !

Et voici le lien pour un exemple de code pour le choix de polices. À bientôt !

Twine et CSS Grid

Filiaa

Si, comme moi, vous aimez triturer un peu la mise en page de vos histoires Twine, les grilles CSS ont toutes les chances de vous intéresser. Il s’agit d’un outil très polyvalent, qui permet de disposer des éléments sur une grille en deux dimensions et qui est pris en charge par la plupart des navigateurs récents. Pour mieux comprendre son fonctionnement et les possibilités qu’il apporte, je vous propose de le découvrir à l’aide de trois petits exemples.

Pour pouvoir suivre ce tutoriel, il est recommandé d’être un peu à l’aise avec les langages HTML et CSS. Si ce n’est pas votre cas, je ne peux que vous recommander d’aller en apprendre un peu plus ; les bases ne sont pas très compliquées, et ça ouvre les portes vers plein d’options pour personnaliser l’apparence de vos histoires. Par exemple, commencez par notre article d’introduction au CSS pour Twine, et enchaînez avec un tutoriel plus avancé !

En-tête, menu et pied de page

Pour commencer, créons une mise en page simple comprenant un en-tête, une barre de menu à gauche, un espace à droite pour le contenu et un pied de page. Comme ceci :

Commençons par ouvrir un nouveau passage, et créons-y la structure de notre page : un bloc « contenant » à l’intérieur duquel on placera nos quatre autres blocs.

{

<div class="contenant">

 <div class="entete"><h1>Titre</h1></div>

 <div class="menu">Menu</div>

 <div class="contenu">Contenu</div>

 <div class="pieddepage">Pied de page</div>

</div>

}

Il nous faut ensuite modifier la feuille de style de l’histoire. Il faut tout d’abord indiquer au contenant de se comporter comme une grille. Pour cela, rien de plus simple, il suffit d’ajouter ces lignes :

.contenant {

 display: grid;

}

Il faut ensuite définir le nombre, et la taille, des lignes et des colonnes de la grille. Pour notre modèle simple, nous n’avons besoin que de trois lignes, et de deux colonnes, que nous allons définir à l’aide des propriétés grid-template-rows et grid-template-columns, respectivement. On en profitera pour définir la hauteur et la largeur de notre grille, et lui assigner une couleur de fond. Notre code devient :

.contenant {

 display: grid;

 background-color: #7c8cbf;

 width: 100%;

 height: 100vh;

 grid-template-rows: 2fr 5fr 1fr;

 grid-template-columns: 1fr 2fr;

}

Pour la largeur, on ne s’est pas embêtés : 100%, ça veut dire qu’il va garder la même largeur que son parent (tw-story si on travaille avec Harlowe).

Pour la hauteur, ça se complique : par défaut, les éléments HTML n’ont pas de hauteur, et s’ajustent à leur contenu ; or, on souhaiterait ici que notre grille occupe toute la hauteur de la page, même lorsqu’elle est vide. C’est ce que permet l’unité vh : elle définit la hauteur d’un élément en proportion de la taille de la fenêtre : 20vh, c’est 20 % de la hauteur du viewport, 100vh correspond donc à la hauteur totale du viewport.

Pour les lignes et les colonnes, on a choisi l’unité fr, qui, si elle peut paraître un peu étrange, est en réalité très pratique. Examinons notre ligne grid-template-columns: 1fr 2fr;. Elle signifie que nous voulons diviser notre grille en deux colonnes, celle de droite étant deux fois plus large que celle de gauche. Le navigateur va s’occuper tout seul de calculer leur largeur en fonction de l’espace disponible.
Vous me direz : pourquoi ne pas avoir utilisé les % ? Il y a plusieurs raisons à cela. La première : imaginons que, plus tard, je change d’avis, et je décide d’ajouter une troisième colonne, de même taille que la première. Si j’avais utilisé les %, je devrais non seulement ajouter la taille de ma troisième colonne, mais aussi ajuster celles des deux premières colonnes. Avec les fr, il suffit d’ajouter 1fr à la suite de la ligne, et c’est le navigateur qui s’occupe de faire le calcul. Idem si je décide d’élargir la colonne de droite : avec les fr, je ne modifie que la valeur de la deuxième colonne, la largeur de la première s’ajustera automatiquement, alors qu’avec les %, j’aurais dû rectifier les deux valeurs. La deuxième raison n’est pas évidente dans cet exemple, on en reparlera plus tard. L’utilisation des fr n’est évidemment pas obligatoire, on peut utiliser toute autre unité de longueur acceptée par CSS.

Maintenant que notre grille est formée, il va falloir la remplir. Pour cela, ciblons les blocs que nous avons créés dans notre passage. Nous allons leur assigner la place qui leur convient dans la grille. Ajoutons ces lignes à notre feuille de style :

.entete {

 background-color: #152866;

 grid-area: 1 / 1 / span 1 / span 2;

 padding: 20px;

}

.menu {

 background-color: #4b61a8;

 grid-area: 2 / 1;

 padding: 20px;

}

.contenu {

 grid-area: 2 / 2;

 padding: 20px;

}

.pieddepage {

 background-color: #152866;

 grid-area: 3 / 1 / span 1 / span 2;

 padding: 20px;

}

La propriété qui nous intéresse, c’est grid-area. Elle permet de définir la cellule de départ et la taille de chacun de nos blocs. Analysons par exemple la ligne correspondante pour l’en-tête : grid-area: 1 / 1 / span 1 / span 2;. Les deux premiers nombres définissent le point de départ de notre zone : ici, la première ligne et la première colonne. Quant au span 1 et au span 2, ils signifient respectivement que notre zone doit occuper une seule ligne, et deux colonnes. Il est important de citer les valeurs dans cet ordre, et de les séparer par des « / ». Pour les blocs qui n’occupent qu’une seule cellule, on peut omettre les deux dernières valeurs : on se contente de spécifier la ligne et la colonne choisis, comme on l’a fait pour le menu et le contenu.

Si vous voulez réutiliser la même interface tout au long de votre histoire, vous pouvez bien sûr écrire le début du code HTML (jusqu’à <div class="contenu"> par exemple) dans un passage taggé header et la fin (à partir de </div> <div class="pieddepage">), dans un passage taggé footer ; seul le contenu sera modifié d’un passage à un autre, et ça vous épargne bien des copier-coller.

Il ne reste plus qu’à ajouter du contenu dans toutes ces zones ! À moins que vous ne préfériez en apprendre un peu plus sur les grilles avec un deuxième projet…

Retrouvez et téléchargez ce premier projet ici !

Un calendrier

Attelons-nous maintenant à un projet un peu plus compliqué, comportant bien plus de lignes et de colonnes : nous allons créer une page de calendrier.

Nous avons donc besoin d’un tableau à 7 colonnes de même largeur (une par jour de la semaine) et à 6 lignes (une plus petite pour spécifier le jour de la semaine, 5 plus grandes pour les cases quotidiennes). On remarque que l’on veut trois types de cellules différentes : des cellules turquoise, d’autres gris clair et des gris foncé. Commençons par nous attaquer au passage Twine qui contiendra tout ça. On y ajoute le titre, notre bloc « contenant » et toutes les petites cases. Il y en a beaucoup, mais le code est très similaire, donc on peut allègrement copier-coller.

<h1>Juin 2018</h1>

{

<div class="calend">

 <div class="jour">L</div>

 <div class="jour">Ma</div>

 <div class="jour">Me</div>

 <div class="jour">J</div>

 <div class="jour">V</div>

 <div class="jour">S</div>

 <div class="jour">D</div>

 <div class="vide"></div>

 <div class="vide"></div>

 <div class="vide"></div>

 <div class="vide"></div>

 <div class="date">1</div>

 <div class="date">2</div>

 <div class="date">3</div>

 <div class="date">4</div>

 <div class="date">5</div>

 <div class="date">6</div>

 <div class="date">7</div>

 <div class="date">8</div>

 <div class="date">9</div>

 <div class="date">10</div>

 <div class="date">11</div>

 <div class="date">12</div>

 <div class="date">13</div>

 <div class="date">14</div>

 <div class="date">15</div>

 <div class="date">16</div>

 <div class="date">17</div>

 <div class="date">18</div>

 <div class="date">19</div>

 <div class="date">20</div>

 <div class="date">21</div>

 <div class="date">22</div>

 <div class="date">23</div>

 <div class="date">24</div>

 <div class="date">25</div>

 <div class="date">26</div>

 <div class="date">27</div>

 <div class="date">28</div>

 <div class="date">29</div>

 <div class="date">30</div>

 <div class="vide"></div>

</div>

}

On a bien nos trois classes de cases différentes, et on n’oublie pas les accolades qui font ignorer les sauts de ligne à Twine, sans quoi on risque d’avoir quelques surprises

On ouvre ensuite notre feuille de style pour mettre tout ça en forme ; commençons par le contenant :

.calend {

 background-color: #212A2A;

 width: 600px;

 min-height: 400px;

 padding: 10px;

 display: grid;

 grid-gap: 8px;

 grid-template-columns: repeat(7, 1fr);

 grid-template-rows: 1fr repeat(5, 2fr);

 grid-auto-flow: row;

 overflow-x: hidden;

}

Outre les propriétés classiques qui définissent ses dimensions et sa couleur, on trouve bien sur le display : grid, et les grid-template-rows/columns. Pour ces derniers, la valeur de la propriété (la partie à droite des deux-points) est un peu différente de l’exemple précédent. En effet, plutôt que de déclarer une à une les largeurs (hauteurs) voulues pour chaque colonne (ligne), on a utilisé repeat pour pouvoir créer d’un seul coup un grand nombre de colonnes (lignes) de même dimension. Ainsi, repeat(7, 1fr) signifie « je veux 7 colonnes de même largeur », tandis que 1fr repeat(5, 2fr) signifie « je veux une première ligne d’une certaine hauteur, puis 5 autres qui sont toutes deux fois plus grosses que la première ».

On a aussi écrit une ligne grid-gap: 8px;, qui permet d’ajouter de l’espace entre les cellules, appelé gouttière, ce qui permet de les séparer sans leur ajouter de bordure. Cette petite ligne apparemment bien innocente va nous permettre d’aborder le deuxième avantage des fr sur les %. En effet, si on avait défini la largeur de nos colonnes en %, en s’arrangeant pour que la somme fasse 100 %, cet espace de 8 petits pixels entre les colonnes aurait fait déborder nos cellules à l’extérieur du contenant (et bien oui, 100 % de la largeur + 48 pixels, c’est strictement plus grand que 100 %). Plutôt que de devenir fou à essayer de tout recalculer par nous-même, on utilise les fr pour laisser le navigateur s’en occuper.

Enfin, dernière ligne consacrée à la grille :grid-auto-flow : row ;. C’est une propriété qui est très utile quand on a plein de cases à ajouter qui s’agencent de manière simple. Plutôt que de déclarer une par une la position de chaque case, on lui dit de commencer en haut à gauche, puis de remplir la première ligne. Une fois que toutes les colonnes de la première ligne sont remplies, on passe à la deuxième, en commençant à gauche, etc. Et ce jusqu’à avoir atteint la dernière case.

Comme on laisse toutes les cellules se placer automatiquement, pas besoin de spécifier leur position avec grid-area, les déclarations des classes jour, date et vide contiennent donc uniquement des propriétés de couleur ou de placement du texte très classiques.

Retrouvez et téléchargez ce calendrier ici !

Un plan

Pour finir, un projet encore un peu plus complexe : nous allons créer un plan avec des liens cliquables permettant de se déplacer dans diverses pièces d’un manoir.

Si vous remarquez quelques différences dans la présentation du plan, c’est normal : celui du rez-de-chaussée a été créé en utilisant des dimensions en % et des cases entourées de bordures noires, tandis que celui du premier étage utilise des dimensions en fr et grid-gap. Je vous laisse deviner lequel je préfère…

Cet exemple va permettre d’illustrer une autre manière de positionner les cellules dans la grille : en les nommant. On commence comme d’habitude, en créant la structure HTML dans un passage Twine.

<h2>Rez-de-chaussée</h2>

<div class="plan">\

 <div class="smanger">[[Salle à Manger]]</div>\

 <div class="bibli">[[Bibliothèque]]</div>\

 <div class="cuisine">[[Cuisine]]</div>\

 <div class="hall">[[Hall]]</div>\

 <div class="salon">[[Salon]]</div>\

</div>

[[Monter à l'étage|Plan 1]]

La classe plan va nous servir de grille, et on crée une cellule pour chaque pièce de notre manoir. Dans la feuille de style, on va donc inscrire :

.plan {

 display: grid;

 grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;

 grid-template-rows: 16% 16% 16% 16% 16% 16% 4%;

}

.smanger {

 grid-area: smanger;

}

.bibli {

 grid-area: bibli;

}

.cuisine {

 grid-area: cuisine;

}

.hall {

 grid-area: hall;

}

.salon {

 grid-area: salon;

}

La grille est donc bien définie, avec ses lignes et ses colonnes, et on a donné un nom à chacune des pièces à situer sur notre plan. Maintenant, on va pouvoir utiliser ces noms avec la propriété grid-template-areas pour expliquer où va quelle pièce sur le plan. Si on veut qu’une case de la grille reste vide, on inscrit juste un point à l’emplacement correspondant.

.plan {

 display: grid;

 grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;

 grid-template-rows: 16% 16% 16% 16% 16% 16% 4%;

 grid-template-areas:

 "smanger smanger bibli bibli bibli bibli bibli"

 "smanger smanger bibli bibli bibli bibli bibli"

 "smanger smanger hall hall hall salon salon"

 "smanger smanger hall hall hall salon salon"

 "cuisine cuisine hall hall hall salon salon"

 "cuisine cuisine hall hall hall salon salon"

 ". . hall hall hall . . ";

}

On crée donc une sorte de tableau : les lignes sont délimitées par des guillemets et les colonnes, par au moins une espace. Je conseille toutefois d’an ajouter plus pour aligner vos colonnes, ça rend votre feuille de style bien plus lisible.

Il ne reste plus qu’à faire le même travail pour le premier étage, et bien sûr à créer une histoire mettant à profit cette interface !

Retrouvez et téléchargez ce dernier exemple ici !