Alors que je me reposais pendant les vacances, de nouvelles versions d’ink et d’Inky sont sorties. Parmi les nouveautés, une façon plus facile de personnaliser l’apparence de son histoire quand on l’exporte vers une page web.

Assurez-vous donc de télécharger la dernière version d’Inky (0.10 au moment de l’écriture de l’article) avant de continuer !

Avant de commencer, un petit mot pour ceux qui se débrouillent en HTML/CSS/JavaScript ou qui utilisent ink dans un autre moteur de jeu comme Unity : ce qui sera décrit ici n’est valable que pour l’exportation web de base d’Inky. Si vous utilisez votre propre HTML et JavaScript, alors modifier l’apparence se fera sans doute différemment en fonction de votre code. Cela va de même pour ceux qui utilisent Unity ou un autre moteur.

Une nouvelle notion : les étiquettes

Les étiquettes (« tags » en anglais) sont des informations que l’histoire donne au logiciel qui l’affiche (ici, notre page web) pour qu’il puisse effectuer quelque chose de spécial qu’on ne peut pas contrôler avec ink ; l’apparence, par exemple. Elles ne seront pas visibles par le joueur.

Une étiquette est indiquée avec le symbole #. On peut l’écrire à la fin de la ligne qui la concerne, ou juste au-dessus.

Cette ligne n'est pas étiquetée.

# une étiquette # une seconde étiquette
# une troisième

Cette ligne l'est. # une quatrième étiquette # et une cinquième

Cette ligne n'est pas étiquetée non plus.

Dans l’exemple ci-dessus, la seule ligne ayant des étiquettes — et elle les a toutes ici — est celle du milieu (si on ne compte pas lesdites étiquettes). Comme nous pouvons le voir, il est possible d’en mettre plusieurs pour un même paragraphe en les écrivant les unes après les autres, ou sur plusieurs lignes si on les place avant le contenu.

Si nous testons notre projet dans Inky, nous pouvons voir les étiquettes dans le panneau de droite au fur et à mesure de l’histoire, afin de nous assurer que tout fonctionne. Mais n’oubliez pas, elle ne seront pas visibles par le joueur !

Tout cela est bien beau, mais comme les étiquettes ne sont pas utilisables par ink directement, cela ne sert pour l’instant pas à grand-chose ! Heureusement pour nous, la page web exportée par Inky gère par défaut plusieurs étiquettes.

Le titre et l’auteur de l’histoire

Deux étiquettes peuvent être placées au tout début de l’histoire pour spécifier son titre et qui l’a écrite (vous !).

# title: Ma génialissime histoire
# author: Nathanaël Marion

La seule chose requise ici, c’est de commencer les étiquettes par title: et author:, et de les placer au tout début du fichier. N’oubliez pas de remplacer mon nom par le vôtre ! 😉

Une fois que c’est fait, allons dans le menu File > Export for web..., choisissons une destination et le nom du dossier qui contiendra l’histoire. Il ne reste plus qu’à ouvrir le fichier index.html ainsi créé avec un navigateur. Le titre et votre nom apparaît ! Il y a un problème cependant : il y a un petit « by » en anglais…

Pour cette raison, il vaut peut-être finalement mieux ne pas spécifier l’auteur avec une étiquette et directement modifier le fichier HTML. Supprimons l’étiquette, ouvrons donc encore une fois index.html, mais cette fois avec un éditeur de texte (Bloc-notes sur Windows ou TextEdit sur macOS peuvent faire l’affaire) et localisons la ligne suivante :

<h2 class="byline"></h2>

Ajoutons-y le nom pour qu’elle ressemble à ceci :

<h2 class="byline">par Nathanaël Marion</h2>

Il est aussi possible d’à la place modifier la ligne byline.innerHTML = "by "+splitTag.val; dans main.js pour remplacer le « by » par un « par ». Comme cela, on pourra garder l’étiquette author:, qui fonctionnera comme il faut. Simplement, modifier le JavaScript est (un tout petit peu) plus risqué si jamais on y ajoute par inadvertance des erreurs. À vous de choisir l’une ou l’autre des méthodes !

Nous avons à présent modifié un fichier provenant de l’exportation web. À cause de cela, il ne faut plus utiliser l’exportation web, car Inky remplacerait le fichier que nous venons de changer par celui par défaut ! Quand nous effectuerons une modification dans l’histoire, il faudra à la place utiliser l’option Export story.js only..., laisser le nom du fichier proposé et le sauver dans le dossier contenant l’exportation web (avec index.html et les autres). On confirme qu’il faut remplacer l’ancien et le tour et joué : nous avons mis à jour l’histoire sans toucher aux fichiers chargés de la présentation. C’est cela que nous devrons faire pour le reste de l’article.

Et n’oubliez pas, Inky ne prend pas en compte les étiquettes. Il faut exporter l’histoire et l’ouvrir dans un navigateur pour voir les effets décrits dans ce tutoriel !

Avoir un thème ténébreux (sombre)

Si le fond blanc par défaut de l’histoire vous fait mal aux yeux, il est possible d’utiliser un thème sombre. Il suffit d’ajouter cela au début, juste après l’étiquette du titre :

# theme: dark

Vous n’avez qu’à essayer pour voir. (N’oubliez pas, il faut utiliser Export story.js only... !) C’est tout ce qu’il y a à savoir ici. Nous verrons plus tard comment modifier plus finement les couleurs avec un peu de CSS.

Contrôler le flot du texte

Il est possible de vider l’écran du texte qui y a été affiché précédemment. Cela est très pratique lorsque l’on change de chapitre, par exemple. L’étiquette à utiliser est # CLEAR.

Chapitre 1 :

Tout avait commencé ainsi…

*   Ce livre est ennuyeux et vous sautez un chapitre.

# CLEAR

Chapitre 2 :

Et ce fut la fin.

Il faut faire attention : si l’on efface l’écran entre deux lignes, la première ne s’affichera jamais car elle sera effacée au moment même où elle sera montrée !

Ne faites donc

# CLEAR

pas cela !

Le mieux est d’effacer l’écran après un choix.

Il est aussi possible de réinitialiser l’histoire pour que le joueur puisse recommencer. Il faut cette fois-ci utiliser # RESTART :

Et ce fut la fin.

Voulez-vous relire l'histoire ?

*   Oui
    # RESTART
    -> END
*   Non
    Et ce fut véritablement la fin !

La même remarque que plus haut s’applique : le texte qui sera affiché après le # RESTART ne s’affichera jamais puisque l’histoire aura recommencé avant de l’atteindre. Il convient de tout de même écrire un -> END après l’étiquette pour qu’Inky ne se plaigne pas qu’il y a un bout de l’histoire sans véritable fin.

Pour finir cette section, un petit effet absolument totalement inutile, mais amusant : si on fait recommencer l’histoire dès le début, avant le premier choix, alors quand elle aura redémarré, elle atteindra d’emblée l’endroit où elle se réinitialise, ce qui la fera recommencer, ce qui… Oui, il en faut peu pour m’amuser.

Des images

Tout d’abord, allez chercher des images, n’importe lesquelles, sinon vous ne pourrez pas tester. Mettez-les dans le dossier contenant votre histoire exportée (celui qui contient index.html).

Pour afficher une image avec Inky, il faut écrire # IMAGE: monimage.png, où monimage.png doit être remplacé par le nom d’une des images que vous êtes allé chercher au paragraphe précédent.

Et alors, un énorme dragon cracheur de feu apparut !

# IMAGE: mechant-dragon.png

Passionnant. Vous tournez la page.

Il est possible de ranger les images dans un dossier à la place. Il faudra alors écrire (par exemple) # IMAGE: images/mechant-dragon.png, où le dossier images serait placé dans celui contenant l’histoire exportée. On peut bien sûr aller encore plus loin si on le souhaite et créer un dossier dragon dans le dossier images. On aurait alors # IMAGE: images/dragon/mechant-dragon.png, et ainsi de suite.

Modifier l’apparence de façon arbitraire

Alors là, nous allons mettre les mains dans le cambouis. Il est possible, en écrivant du CSS, de modifier l’apparence d’à peu près n’importe quoi dans l’histoire. Tout d’abord, il faut dire à ink de quel paragraphe nous souhaitons modifier l’apparence. Il faut pour cela utiliser l’étiquette # CLASS: suivi d’un mot tout en minuscules et ne contenant que des lettres, des chiffres et des traits d’union (pas d’espaces, notamment).

Cette ligne est normale et triste.

Mais cette ligne voit la vie en rose ! # CLASS: texte-joyeux

Et celle-ci ne voit rien.

La deuxième ligne possède maintenant un petit nom : texte-joyeux. Pour colorer texte-joyeux, il va falloir écrire du CSS. Ouvrons donc le fichier style.css, toujours à côté d’index.html. Ne nous préoccupons pas du contenu déjà présent. Allons à la fin et ajoutons ceci :

.texte-joyeux {
    color: pink;
}

Et si nous testons, nous verrons que la deuxième ligne voit véritablement la vie en rose.

Décortiquons ce que nous venons de faire. Tout d’abord, nous avons écrit le nom que nous avions utilisé dans l’étiquette, mais précédé d’un point. Nous avons ensuite ouvert une accolade et écrit le nom d’une propriété CSS (ici color), un deux-point, la valeur de la propriété (ici pink) et un point-virgule ; on peut écrire plusieurs propriétés si on le souhaite, puis on n’oublie pas de refermer l’accolade.

À partir de là, le merveilleux monde du CSS est à notre portée. Pour ne pas vous y perdre, prenez le temps de lire n’importe quel tutoriel de CSS. Tiens, par exemple, celui-ci et celui-là, provenant d’un site que vous devez connaître. Ça s’applique à Twine, mais à part les sélecteurs (pour nous, .texte-joyeux), le reste est le même. Vous aurez un petit aperçu des propriétés utilisables.

Il est également possible de modifier l’apparence par défaut du texte.

Pour modifier le titre principal et le nom de l’auteur, il faut utiliser h1 et h2, respectivement (sans point avant) :

h1 {
    color: red;
}

h2 {
    color: blue;
}

Vous pouvez soit modifier le CSS concernant ces deux éléments qui est déjà présent dans le fichier style.css, ou juste ajouter les règles ci-dessus à la fin du fichier CSS.

Pour modifier le texte normal, il faut utiliser p, et pour les choix, a. Par exemple :

p {
    font-size: 50px;
}

a {
    font-style: italic;
}

Bien sûr, mes exemples feront très moches. Le mieux est de savoir ce que l’on veut changer et de chercher la propriété CSS qui correspond. Prenez votre temps, lisez donc les deux tutoriels mentionnés plus haut, et n’hésitez pas à écrire un commentaire s’il y a quelque chose que vous n’arrivez pas.

Enfin, sachez qu’il est possible d’écrire directement de l’HTML dans l’histoire ink. Si l’on voulait rendre un seul mot joyeux plutôt que tout un paragraphe, il aurait été possible d’écrire :

Il y a <span class="texte-joyeux">deux mots</span> joyeux dans cette phrase !

Le CSS est le même que quand il s’agissait de tout le paragraphe. Et là, tout le monde de l’HTML s’ouvre à nous ! Mais ce sera sûrement pour une prochaine fois. Alors amusez-vous bien à apprendre du CSS pour l’instant !

Pour terminer cet article qui est déjà bien assez long, sachez qu’Inky propose un style par défaut pour le texte qui indique la fin de l’histoire. Il suffit d’utiliser le nom end :

Et c'est la fin ! Pour de vrai cette fois. # CLASS: end