Fiction-interactive.fr

Vorple

Liste des articles :

Pourquoi Vorple est le futur de la fiction interactive – Hugo Labrande

Comment installer Vorple – Hugo Labrande

Tester votre jeu Vorple – Hugo Labrande

Modifier le CSS d’un jeu Vorple – Hugo Labrande

Faire un jeu à embranchements dans Vorple – Hugo Labrande

Créer un jeu d’aventure des années 80, maintenant ! - Hugo Labrande

Forcer le joueur à taper une commande précise – Hugo Labrande

Faites votre propre invite de commandes dans Inform 6 – Hugo Labrande

Cet ebook compile des articles parus sur le site http://www.fiction-interactive.fr, centrés sur l’utilisation de l’outil Vorple pour Inform et ses possibilités.

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.

Pourquoi Vorple est le futur de la fiction interactive

Hugo Labrande

Les limites d’Inform

Vous aurez remarqué, sur notre site, il y a beaucoup de fictions interactives avec analyseur syntaxique (celles où il faut taper >PRENDRE PELLE pour avancer), et la grande majorité de ces fictions interactives sont écrites avec Inform (6 ou 7, qui n’ont en fait pas grand-chose à voir l’un avec l’autre). Il y a d’autres outils, bien sûr : on peut citer ADRIFT, dont la version 4 a eu une traduction française (mais qu’on a perdue), Quest (facile d’utilisation mais on peut jouer aux jeux uniquement en ligne), TADS (jamais traduit en français, seulement en allemand, et le traducteur en a bavé), et j’en passe.

Le format des jeux Inform a beaucoup d’avantages. Historiquement, Inform était un langage conçu pour écrire des fictions interactives qui tourneraient avec le même interpréteur que les jeux d’Infocom ; c’est la Z-machine, dont je vous parlais dans un article précédent. Vous écrivez votre jeu Inform, vous donnez le fichier de jeu sur Internet, et on peut y jouer sur Windows, Mac, Linux, un navigateur Web, Android, iOS, Discord, l’ifMUD, Amiga, et bien d’autres plateformes. Il y a un autre format compatible avec Inform, Glulx, qui s’affranchit notamment des limites de taille, et qui a des interpréteurs sur toutes les plateformes récentes (mais pas les vieilles machines). Bref, c’est plutôt agréable pour l’auteur. Et enfin, le fait que ça ne soit que du texte rend les jeux lisibles par les lecteurs d’écran, ce qui en fait un des rares genre de jeux vidéos accessibles aux personnes ayant des problèmes de vue. Enfin, on peut mélanger des menus simples au texte, de façon relativement compatible avec le reste, ce qui est plutôt pratique (pour des menus principaux, des menus qui donnent des indices, etc.).

Mais ce format a des limites. Si on parle de la Z-machine, vous avez tout d’abord les limites de taille : 512 ko maximum. Bien sûr, ce n’est que du texte : en Inform 6, la taille du jeu de sortie permet de mettre tout de même beaucoup de texte avant que ça soit trop gros, mais les versions récentes d’Inform 7 ajoutent tellement de code que ça ne rentre plus dans un format Z-machine. Ensuite, il y a le fait qu’on ne puisse pas ajouter d’images ou de sons – enfin, pour être plus précis, on peut (la V6 de la Z-machine), mais c’est un hack de la fin des années 80, personne ne maîtrise vraiment, et la plupart des interpréteurs ne prennent pas en charge ces choses-là (donc vous donnez votre fichier de jeu et tous les gens sur navigateur Web ou mobile ne voient pas les images, c’est ballot).

Surtout, le fait que la Z-machine soit pensée pour être aussi portable veut dire que vous n’avez pas vraiment le contrôle sur l’affichage. Vous avez accès au nombre de colonnes de l’affichage, c’est-à-dire le nombre de caractères à chasse fixe qu’on peut afficher sur une ligne, et ça vous permet de bidouiller quelque chose qui ressemble un peu à du texte centré. Sauf bien sûr si le joueur change la police de caractères, alors là ça devient tout moche ; et comme la plupart des joueurs ont leur interpréteur favori avec leurs réglages favoris et n’en changent plus, problème. Vous ne contrôlez pas la taille de la police, non plus. Vous avez tout de même à votre disposition quelques effets : 8 couleurs pour le texte, 8 couleurs pour le fond, du gras, de la largeur fixe, du reverse video (on inverse temporairement couleur du fond et couleur de la police), et underlined, qui pour beaucoup d’interpréteurs veut dire italique, mais pour d’autres veut dire souligné, et même ça vous ne le contrôlez pas. Ah et bien sûr, comme la Z-machine est une machine à cracher du texte, vous ne pouvez pas revenir en arrière et changer le texte affiché à l’écran, bien sûr. Bref, niveau effets et présentation visuelle, c’est pauvre : cette limitation technique fait qu’on peut dire avec raison, comme dans le mémoire de Caroline Brun, que la présentation est archaïque et qu’on pourrait mieux faire.

Bien sûr, si il n’y a pas beaucoup d’effets visuels, c’est plutôt bien pour les gens qui utilisent des lecteurs d’écran ; à ce titre, Life on Mars? est sans doute une horreur pour les lecteurs d’écran (beaucoup moins si vous jouez à la version en ligne, avec moins d’effets visuels), et fait des trucs vraiment pas catholiques avec la Z-machine pour avoir des effets visuels intéressants.

Il y a un effet visuel sur la Z-machine, la commande box, qui permet d’afficher une citation dans une fenêtre flottante qui disparaît au tour suivant. C’est un effet utilisé la première fois dans Trinity, jeu de 1985 de Infocom sur la bombe atomique avec des citations solennelles. La façon dont c’est implanté est, ah, un poème très sale ; il n’est pas exclu que je vous raconte un jour comment c’est fait.

Les effets visuels sur la Z-Machine m’intéressent en tant que défi intellectuel ; je me sens comme un artiste de demoscene qui travaille avec des contraintes impossibles, ça flatte mon ego, c’est fou. En vérité, c’est tellement compliqué, technique, et peu fiable au niveau du résultat (ça change d’un interpréteur à l’autre, ça casse votre jeu sur certains, etc.) que tout le monde a abandonné, si tant est qu’il y ait eu des gens qui soient intéressés. Si jamais (une bouteille à la mer…) ça vous intéresse, regardez mon extension EffetsDeTexte sur mon Bitbucket…

Un mot maintenant sur Glulx. Avec Glulx, plus de limite de taille du code, ce qui est une bonne nouvelle. On a toujours les menus, c’est chouette (mais on n’a plus box – bah, pas très grave). On peut rajouter des hyperliens, ce qui est très intéressant. On peut découper l’écran en plusieurs fenêtres, ce qui est potentiellement chouette : regardez par exemple le rendu de Kerkerkruip. On peut ajouter des images, mais seulement entre du texte ou dans une fenêtre séparée (adieu images de fond derrière un texte par exemple). On peut mettre des son, mais beaucoup d’interpréteurs (dont Quixe et Lectrote, qui sont parmi les plus utilisés) ne les gèrent pas. (Et même pire, ces interpréteurs peuvent planter si l’implantation des sons a été mal codée dans votre jeu.) C’est mieux, même si c’est quand même très contraint, mais on peut faire de chouettes choses ; regardez nos jeux en français Ekphrasis ou Lieux Communs. Et niveau présentation du texte, c’est encore d’une certaine façon encore pire que la Z-machine : vous avez le droit à 8 styles différents, sachant que 6 sont déjà réservés. Donc si vous voulez un bout de texte en bleu, un autre en rouge, un autre en gras vert, et un autre en violet, c’est pas possible, à moins de tricher et d’utiliser des styles déjà réservé pour autre chose (alors que les styles de la Z-Machine se combinent sans problème).

Il y a quand même des jeux qui essaient d’avoir un rendu aussi chouette que possible en Glulx. On peut essayer de bien choisir les styles, de modifier la bibliothèque pour se libérer de la place, d’utiliser des polices de caractères en format image pour afficher des choses, etc. Il y a les extensions GLIMMR, utilisées notamment dans Kerkerkruip ; elles ont même réussi à ajouter des « vidéos » dans le jeu, formées de caractères qui dessinent quelque chose qui bouge. (Tout ça est un peu dépassé et ces extensions n’ont pas toutes été mises à jour pour la dernière version d’Inform.) Une autre approche est d’utiliser Quixe et de rajouter du code et du CSS par-dessus, comme ce qu’a fait Mathbrush pour Swigian.

Voooorpleeeeee

Je viens de vous dire tout ce qu’on ne pouvait pas faire avec la Z-machine et Glulx. Tout cela vient des limitations inhérentes au format, et les gens s’en sont accommodé. Certains ont essayé de contourner tout ça, de repousser les limites, mais c’est compliqué et beaucoup de travail pour des améliorations modestes. Et quand quelqu’un qui fait du design, comme Caroline Brun, dit que les fictions interactives sont restées avec un design archaïque (dans la partie « S’inscrire dans un type de jeux archaïques »), on ne peut qu’être d’accord. On adore Inform, parce que son parser et son modèle physique sont très pratiques, mais niveau design on est très limités ; même s’il y en a que ça dérange pas (gnagnagna le bon vieux temps), la plupart des joueurs ne veulent pas d’un jeu où aucun effort ne semble avoir été fait pour le rendre joli ou lisible.

J’irai même plus loin en disant que c’est aussi une des raisons pour lesquelles Twine a eu beaucoup de succès : non seulement les jeux sont plus faciles à jouer, mais ils sont surtout plus beaux, avec du JavaScript et du CSS qui a de la gueule ! Regardez Even Cowgirls Bleed ! Birdland ! SPY INTRIGUE !

C’est là qu’intervient Vorple ! <3

Le concept de Vorple est simple : c’est un interpréteur de fictions interactives Inform, qui tourne dans un navigateur, et qui peut aussi lancer du code JavaScript et utiliser du CSS. Donc on peut avoir plus de styles différents, personnalisables à l’infini avec le CSS. Donc on peut ajouter des balises HTML (du texte centré qui reste centré, oh mon Dieu !). Donc on peut ajouter des images en plein milieu du texte (oh !). Donc on peut rajouter des GIF, ou des cinématiques avec des vidéos (provenant de YouTube ou d’autre part). Donc on peut ajouter du son — c’est compris dedans ! Des hyperliens. De tout !! Toutes les limites d’Inform sont repoussées ; tout ce qu’il est possible de faire en JavaScript (c’est-à-dire absolument tout ! Il y a des jeux entiers en JavaScript !) est intégrable dans un jeu Inform.

Une petite vidéo vaut mieux qu’un long discours : voilà une vidéo de ce qu’on peut faire avec un petit peu de Vorple. Et ça n’est que le début ! C’est révolutionnaire, dans le sens où toutes les contraintes du format de sortie d’Inform sont explosées. On perd en portabilité, certes, mais on y gagne absolument partout ailleurs.

Alors, bien sûr, il faut apprendre à domestiquer Vorple ; le mettre en place, changer ses habitudes, apprendre à l’utiliser, etc. Sans compter que des connaissances en JavaScript peuvent s’avérer nécessaires si on veut faire des choses compliquées. Nous aurons bientôt plusieurs tutoriels sur ce site qui vous permettront d’utiliser ses possibilités. C’est le futur, et on a envie que tout le monde s’y mette ! Pour l’heure, nous vous laissons avec une petite galerie de ce qu’il est possible de faire avec Vorple, pour vous mettre l’eau à la bouche !

Comment installer Vorple

Hugo Labrande

On vous parlait récemment de Vorple, cet outil qui permet d’incorporer du JavaScript et du CSS à des fictions interactives écrites en Inform. Les fonctionnalités apportées sont très intéressantes, et ouvrent de vastes horizons en termes de gameplay et de présentation. Malgré cela, les auteurs qui utilisent Vorple sont relativement rares… Peut-être à cause de la nouveauté, et du manque de tutoriels et de documentation. Qu’à cela ne tienne ! Voici un tutoriel pour apprendre à mettre en place Vorple pour Inform 6 et Inform 7, que j’espère aussi clair que possible : n’hésitez pas à nous dire en commentaire si vous avez le moindre souci, ou si je n’ai pas été clair dans l’une de mes explications !

Créer son jeu, c’est bien, mais il faut pouvoir aussi le tester… La procédure pour jouer à votre jeu est un peu plus complexe que d’habitude quand on utilise Vorple ; mais n’ayez crainte, mon prochain tutoriel sera sur cet aspect-là !

Petite note sur Borogove

Depuis l’écriture de ce tutoriel, Juhana Leinonen, auteur de Vorple, a créé un service en ligne qui permet d’écrire son code et le tester en direct : Borogove. Ceci ne vous dispense pas du reste du tutorial, puisqu’il faut savoir quoi inclure dans votre code, mais c’est un outil potentiellement intéressant, qui rend le test du jeu instantané. Par contre, vu que c’est un service en ligne, l’inclusion d’images, de multimédia, et d’autres extensions est plus lente, et il y a toujours le risque que le navigateur plante. Je dirais que c’est un bon outil pour commencer, mais qu’à un moment donné vous trouverez sans doute le travail hors ligne plus pratique !

Utiliser Vorple avec Inform 6

Dans un premier temps, il faut télécharger les fichiers à cette adresse. Il y a plusieurs types de fichiers : de la documentation (dans le dossier « doc »), les fichiers « .h » (les extensions/bibliothèques Vorple pour Inform 6), l’interpréteur Vorple (le fichier « play.html » et le dossier « interpreter »), le dossier où vont les fichiers multimédias (« resources ») et, enfin, le dossier contenant des exemples.

Pour commencer votre projet, prenez un début de jeu Inform 6 typique (Constant title, Include "parser" , Include "verblib" , Include FrenchG , etc.) et copiez-le dans le répertoire de « play.html ». Renommez-le pour l’instant « test.inf ». Il vous faut ensuite faire deux choses : inclure les bibliothèques Vorple, puis compiler. Pour l’inclusion des bibliothèques, c’est un peu étrange : il faut inclure Vorple deux fois, de la façon suivante :

Include "vorple.h"; ! 1re fois.

Include "parser";

Include "verblib";

Include "vorple.h"; ! 2e fois.

Alternativement, si vous avez besoin d’une autre extension Vorple (par exemple, « vorple-notifications »), vous pouvez simplement faire :

Include "vorple.h"; ! 1re fois.

Include "parser";

Include "verblib";

Include "vorple-notifications.h"; ! Ça compte comme la 2e fois.

L’étape suivante est d’initialiser Vorple ; pour ceci il faut appeler la fonction VorpleInitialise dans votre Initialise :

[ Initialise ;

   VorpleInitialise();

   ...

Ensuite, il faut compiler. J’ai inclus dans le dossier un fichier nommé « makefile », qui contient la commande suivante :

@inform-633/src/inform '$MAX_STATIC_DATA=30000' '$MAX_LABELS=12000' -s~S -e -f -G test.inf

Le premier bout, « @inform-633/src/inform », contient l’adresse sur mon ordinateur du compilateur inform ; le plus simple est que vous copiez l’exécutable du compilateur (« inform.exe » ou « inform ») dans le répertoire de votre fichier .inf, puis que vous remplaciez ce bout par « @inform ». Ensuite copiez vos bibliothèques Inform (« parser », « verblib », « FrenchG », etc.) dans un dossier « bibliotheques », et ajoutez « +include_path=bibliotheques ». Enfin, juste avant test.inf, ajoutez « +Language_name=French ». Bref, la commande devrait ressembler à

@inform '$MAX_STATIC_DATA=30000' '$MAX_LABELS=12000' -s~S -e -f -G +include_path=bibliotheques +Language_name=French test.inf

Croisez les doigts… Si ça compile, mais que vous obtenez des avertissements (variable not used, etc.), c’est bon !

Si vous êtes sur Windows, supprimez toutes les lignes de « makefile » à part celle-ci, et renommez le fichier en « makefile.bat » ; si vous double-cliquez, ça devrait marcher, et créer pour vous le fichier test.ulx.

Si vous avez déjà votre commande de compilation, et pourquoi pas déjà votre jeu, une précision : Vorple ne fonctionne qu’avec des fichiers Glulx (la Z-Machine étant moins utilisée de nos jours). Il faut donc vous assurer que vous avec inclus une bibliothèque comme infglk, et que vous avez bien ajouté -G dans votre commande de compilation. Il y a quelques autres différences entre la Z-Machine et Glulx (notamment sur la taille des mots machine ou la gestion des styles), et vous aurez peut-être des erreurs si vous avez utilisé des opcodes Z-Machine comme @read, mais des équivalents Glulx existent. Si vous avez besoin d’aide, regardez ce texte d’Andrew Plotkin, ou demandez-moi !

Utiliser Vorple avec Inform 7

Si vous utilisez Inform 7, la procédure est un peu plus simple. Tout d’abord, il faut que vous téléchargiez les fichiers sur le site de Vorple, qu’il faudra par la suite mettre au bon endroit !

Mais avant ça, vous aurez besoin d’une autre chose. En effet, Vorple requiert la dernière version d’Inform 7 pour fonctionner, la 6M62. Problème : l’extension française ne fonctionne que sur la 6L38, qui est la version précédente. Mais Nathanaël Marion (Natrium729), qui maintient cette extension, a pensé à tout et vous a préparé une extension qui effectue quelques modifications à Vorple pour que ça marche avec la 6L38. Elle est disponible là, et se nomme, en toute simplicité, « Vorple for 6L38 ».

Vous avez maintenant le choix : soit vous installez les extensions globalement (elles seront accessibles à tous vos projets Inform), soit vous ne les installez que pour un seul projet. Cette dernière option est recommandée car vous pourrez utiliser une version de Vorple différente pour plusieurs projets. (En effet, si jamais une nouvelle version modifie beaucoup de choses, vous pourrez continuer à utiliser la précédente.) Il vous suffit de glisser le dossier « Extensions » provenant du téléchargement de Vorple dans le dossier « .materials » de votre projet. Vous devrez aussi créer un dossier « Nathanael Marion » dans « Extensions » et y glisser Vorple pour 6L38.

Si vous voulez installer les extensions globalement, faites comme avec n’importe quelle extension téléchargée : aller dans le menu « File » et cliquer sur « Install Extension » pour chacune des extensions (un peu long et rébarbatif, certes).

Il vous faut ensuite installer le template qui contient l’interpréteur Vorple ; comme pour les extensions, il suffit de glisser le dossier « Templates » du téléchargement Vorple dans le dossier « .materials ».

Il est aussi possible d’installer le template globalement, mais c’est plus compliqué (il faut le faire manuellement) et c’est moins recommandé : il y a des chances que vous y effectuerez des modifications spécifiques à votre projet (pour modifier l’apparence où le comportement de la page du jeu).

À présent, vous pouvez écrire votre premier projet Vorple ! Incluez les extensions comme d’habitude en faisant simplement attention d’utiliser « Vorple for 6L38 » de Nathanaël Marion à la place de Vorple de Juhana Leinonen ; de plus, il faudra dire à Inform d’utiliser l’interpréteur Vorple.

"Mon premier projet Vorple" by Moi (in French)

Include Vorple for 6L38 by Nathanael Marion.

Include Vorple Notifications by Juhana Leinonen.

Release along with the "Vorple" interpreter.

[Et on ajoute le reste du jeu : les autres extensions utilisées, les endroits, etc.]

Cliquez maintenant de cliquer sur le bouton « Release » ; s’il n’y a pas d’erreur, c’est que tout a été installé correctement ! (Si ce n’est pas le cas, n’hésitez pas à poster un commentaire ou à écrire sur notre forum ou sur Discord.)

La semaine prochaine…

Vous avez maintenant un fichier de jeu au format Glulx (.ulx ou .gblorb), que vous pouvez ouvrir avec un interpréteur quelconque, comme Lectrote. Étant donnée la façon dont les bibliothèques Vorple ont été codées, le jeu standard en .ulx est toujours jouable dans les interpréteurs normaux. Si vous vous apercevez qu’il y a quelque chose d’étrange dans le jeu en .ulx et que ça vous embête, il sera toujours possible de le corriger plus tard (avec un test dans votre code : si Vorple est pris en charge, faire ceci, sinon, faire quelque chose d’autre plutôt que d’afficher quelque chose de bizarre).

Il ne reste plus qu’à tester votre jeu, dans toute sa splendeur et avec tous ses effets : c’est le sujet du prochain article !

Tester votre jeu Vorple

Hugo Labrande

La semaine dernière, je vous ai montré où trouver les bibliothèques Vorple, où les mettre, et comment les intégrer à votre code. Vous allez ainsi obtenir un fichier .ulx (format Glulx standard), et un fichier HTML (« play.html »), qui va vous permettre de jouer à votre .ulx dans l’interpréteur Vorple et voir le résultat.

Pour Inform 6, il suffit de compiler l’histoire comme montré dans l’article précédent. Pour Inform 7, il faut cliquer sur le bouton « Release » (ou aller dans le menu « Release » et cliquer sur « Release for Testing » si on veut garder les commandes de tests comme « actions »).

Si vous utilisez Borogove, l’application en ligne qui fait à la fois éditeur de code, gestion des fichiers du projet, et test du rendu, cet article est inutile ! En effet, Borogove affiche le résultat de votre jeu dans la colonne de droite. Mais pour l’instant, c’est un service en ligne, avec toutes les contraintes (débit, pertes de données, etc) que ça peut entraîner ; je vous encourage à essayer, même si personnellement je trouve le travail « en local » sur un ordinateur plus pratique, surtout sur des projets plus complexes.

C’est donc l’heure de tester votre jeu ! Allez, on ouvre « play.html », et…

« You are currently viewing the page from the filesystem… »

Ah bon.

En fait, il y a des bouts de code dans l’interpréteur de Vorple (et pas des petits) qui nécessitent de passer par le protocole HTTP. Pour faire simple, si vous voulez accéder à un site Internet, les informations sont transmises depuis un serveur HTTP (par ce même protocole) jusqu’à votre ordinateur. Mais si les infos démarrent de votre ordi et vont sur votre ordi, ce protocole n’est pas utilisé, et donc il y a un problème ; d’où l’erreur que vous voyez.

Il y a essentiellement deux solutions : mettre votre jeu sur Internet, ou lancer un serveur HTTP local sur votre ordinateur, pour que ce soit lui qui lance le jeu Vorple. Si vous mettez votre jeu sur Internet, c’est facile, vous n’avez rien à installer, mais vous devez le remettre sur le bon site à chaque fois que vous changez quelque chose si vous voulez tester les changements. Si vous utilisez un serveur local, il faut installer quelque chose, mais l’actualisation du jeu est immédiate. De manière générale, on favorisera le serveur local lors de l’écriture du projet, et on le mettra en ligne pour que le reste du monde puisse jouer. Mais vous voyez ce qui vous convient le mieux !

Installer un serveur HTTP local

Les outils que vous pouvez utiliser dépendent de votre système d’exploitation (Windows, macOS ou Linux). C’est relativement simple, mais il faut savoir où chercher… Le site de Vorple nous explique comment.

La liste ci-dessous présente la méthode par défaut la plus facile pour chaque système. Cependant, si vous avez Python 2 installé sur votre machine, vous pouvez très bien utiliser la méthode macOS, même si vous êtes sur Windows ou Linux. De façon similaire, si vous avez Python 3, vous pouvez utiliser la méthode Linux. Il existe bien sûr de nombreuses autres façons non présentées ici (avec Node.js par exemple). Si vous savez déjà installer un serveur local, faites le comme à votre habitude. Sinon, lisez ce qui suit !

Sur Windows : Il faut télécharger le logiciel Nginx (le lien « nginx/Windows » dans la section « stable »). Dézippez le fichier pour obtenir plusieurs fichiers, dont « nginx.exe », et un dossier « html ». Déplacez votre jeu Vorple (« play.html », le dossier « interpreter », « media », etc.) dans le dossier « html » de Nginx. Lancez nginx.exe : un serveur HTTP local se lance et voit tous les fichiers dans le dossier « html ».

Sur macOS : Ouvrez d’abord l’application Terminal (commande + espace, puis tapez « terminal »). Il faut ensuite se placer dans le même répertoire que votre jeu Vorple : tapez cd dans la fenêtre du terminal, suivi d’une espace puis, avant d’appuyer sur entrée, faites glisser avec la souris le dossier de votre jeu (avec Inform 7, c’est le « Release » dans le .materials de votre projet) sur la fenêtre : la commande se remplira toute seule avec le chemin de votre dossier (par exemple cd /Users/Hugo/Documents/MonProjetVorple.materials/Release). Ensuite, tapez python -m SimpleHTTPServer. Si tout va bien, vous aurez le message Serving HTTP on 0.0.0.0 port 8000 ...

Sur Linux : ouvrez un terminal et mettez-vous (avec cd, comme pour Mac) dans le dossier de votre jeu. (Certaines distributions vous proposent directement l’option « ouvrir un terminal dans ce dossier » si vous faites un clic droit dans le dossier de votre jeu.) Il vous faut le package python3 (tapez sudo apt-get install python3 dans le terminal pour l’obtenir). Puis entrez la commande python3 -m http.server ; le message Serving HTTP on 0.0.0.0 port 8000 ... devrait là encore s’afficher.

Vous pouvez ensuite ouvrir un navigateur et taper dans la barre d’adresse http://localhost (sur Windows) ou http://localhost:8000 (sur macOS et Linux). Si tout va bien, votre jeu se lance ! Il vous suffit maintenant de recompiler votre jeu et rafraîchir la page à chaque fois que vous effectuez une modification.

Mettre votre jeu sur Internet

Il y a plusieurs solutions, allant de la plus simple à la plus compliquée.

1) Utiliser itch.io

Itch.io est, en gros, un magasin de jeux vidéo indépendants, qui se veut de concurrencer Steam ; mais au contraire de Steam, itch.io est bien plus orienté vers les petits développeurs/auteurs, et offre beaucoup d’outils assez puissants pour mettre en valeur votre jeu. Concrètement, vous pouvez ouvrir un compte sur itch.io, créer un nouveau projet, et téléverser les fichiers de votre jeu sur le site ; c’est gratuit, et immédiat. Et vous avez de la chance : Adrien a écrit un tuto dans ces colonnes il y a quelques semaines pour vous expliquer comment faire !

L’ennui, c’est qu’il faut refaire un zip et le remettre sur le site à chaque fois que vous changez votre jeu ; au bout d’un moment, c’est lourd, même si on s’en sort. Il y a un outil pour aller plus loin, mais dont l’usage est un petit peu avancé : il s’appelle « butler », et voici sa documentation. Il faut l’installer, puis l’utiliser pour téléverser votre projet ; par la suite, il suffit de le lancer (avec la commande butler push nom-du-dossier pseudo/jeu), et il s’occupera de mettre à jour sur le site les fichiers qui en ont besoin. (Il fonctionne comme un gestionnaire de versions, pour ceux qui connaissent.)

2) Utiliser un service de cloud

Si vous avez un service de stockage de fichiers dans le cloud, comme Google Drive ou Dropbox, vous pouvez également vous en servir pour votre jeu Vorple. Commencez par mettre tout le dossier dans le service de cloud ; par la suite, vous pourrez vous contenter de ne mettre que les fichiers qui ont changé. (Malheureusement, tout comme pour itch.io, il faut remettre les fichiers sur le site à chaque fois que vous voulez tester une nouvelle version de votre jeu ; contrairement à itch.io, je ne connais pas de moyen simple pour le faire.) Pour tester votre jeu, il suffit d’ouvrir le fichier HTML dans un navigateur, non pas en cliquant dessus, mais en trouvant l’URL de la page dans Google Drive (option « Partager… » dans le menu) ou dans Dropbox.

3) Utiliser votre site Web

Si vous avez un site web chez un hébergeur, il vous suffit de mettre les fichiers sur votre site. Pour cela, rendez-vous sur le site de votre hébergeur, et cherchez l’adresse du serveur FTP (par exemple, ftp.ovh.net). Ensuite, utilisez un client FTP comme FileZilla ou Cyberduck pour vous connecter sur le serveur FTP de votre site, en spécifiant l’adresse du serveur, votre identifiant et mot de passe chez l’hébergeur. Vous n’avez plus qu’à déposer les fichiers sur votre serveur ; ensuite, ouvrez simplement votre navigateur à la bonne adresse.

4) Utiliser les pages de GitHub ou GitLab

Les services GitHub et GitLab sont des dépôts en ligne où vous pouvez mettre votre code au fur et à mesure du développement de votre projet ; à chaque fois que vous faites une mise à jour (un « commit »), vous pouvez mettre un petit message décrivant les changements et la « pousser » sur le dépôt, et le site vous permet de voir la différence entre la version précédente et la version que vous venez d’envoyer. C’est un gestionnaire de versions (pour gérer les différentes versions de votre jeu), ainsi qu’un hébergement gratuit de votre projet. Pour les utiliser, il faut avoir le logiciel Git, téléchargeable gratuitement, ou alors télécharger le logiciel de gestion de versions de GitHub (ou un autre), peut-être un peu plus simple d’utilisation pour les débutants.

Si vous utilisez directement GitHub ou GitLab, le fichier HTML ne peut pas être ouvert, et donc votre jeu n’est pas jouable. Ce qu’il faut faire, c’est utiliser leur service « Pages » (celui de GitHub, ou celui de GitLab), qui fonctionne de la même façon mais qui doit être initialisé différemment. Une fois que c’est fait, il vous suffit de continuer à utiliser le gestionnaire de versions Git, et à « pousser » votre code de temps en temps. Je tiens à dire que je n’ai jamais essayé les services « Pages » mais il n’y a aucune raison que ça ne marche pas !

Il s’agit néanmoins d’un sujet vaste qui mériterait son propre article donc je ne m’étendrai pas plus.

Empaqueter son jeu dans une application

Le défaut dans tout ce qu’on vient de voir, c’est que votre fiction interactive ne sera jouable qu’en ligne. Ou alors il faut expliquer comment installer un serveur local à vos joueurs, mais ce n’est pas très pratique !

Heureusement, il existe une façon d’empaqueter son jeu dans une application qui sera jouable hors-ligne. Il faut pour cela utiliser Electron, qui permet de transformer des pages web en exécutable. Cela devient rapidement très technique, mais ne vous en faites pas : le gros du travail a déjà été fait pour vous. Nathanaël Marion a créé un projet Electron nommé Vorplectron, dans lequel il vous suffira d’ajouter votre jeu et de lancer une commande. Ça reste toutefois non trivial, alors ça fera sûrement l’objet d’un prochain tutoriel !

Voilà, vous pouvez maintenant commencer à expérimenter avec Vorple ! N’hésitez pas à lire sa documentation, ou bien attendez nos prochains articles !

Modifier le CSS d’un jeu Vorple

Hugo Labrande

C’est décembre, et c’est toujours le mois Vorple — la surcouche d’Inform qui permet d’exécuter le jeu dans une page web, et d’utiliser des fonctions JavaScript et du CSS pour ajouter des fonctionnalités. Et justement, l’article d’aujourd’hui porte sur ce que vous pouvez faire en CSS avec Vorple de façon très basique.

Avec le même avertissement que pour l’article sur Twine et le CSS : CSS est un outil puissant et on peut faire des choses très avancées, mais ma connaissance du CSS est limitée, alors je ne peux vous montrer que les choses de base ! (Et un cours de CSS complet ne serait pas pertinent ici. Il en existe déjà beaucoup sur la toile.) Ça suffit par contre pour donner une certaine esthétique à votre jeu ; voyez par exemple Neon Vertex pour une idée du résultat.

Préparatifs

Tout d’abord, il vous faudra créer un fichier CSS afin d’y mettre, vous l’aurez deviné, votre CSS. Créez un fichier avec l’extension « .css » (par exemple, « styleperso.css »). Si vous utilisez Inform 6, il faudra le sauver dans le dossier de votre projet (celui qui contient « play.html ») et ajouter à « play.html » ceci :

<link rel="stylesheet" type="text/css" href="styleperso.css">

juste en dessous de :

<link rel="stylesheet" type="text/css" href="interpreter/vorple.css">

Si vous êtes sur Inform 7, il vous faudrait normalement placer le fichier CSS dans le dossier « .materials » de votre projet et écrire la ligne suivante dans votre source :

Release along with the style sheet "styleperso.css".

Malheureusement, à cause d’un bug, cela ne fonctionne pas avec 6L38. Dans ce cas, il faut placer votre fichier CSS directement dans le template Vorple : monprojet.materials/Templates/Vorple. Il faut ensuite ouvrir le fichier « (manifest).txt » situé au même endroit et ajouter la même ligne qu’avec Inform 6, au même endroit. Il vous faudra aussi ajouter « styleperso.css » à la fin du fichier manifeste, là où tous les autres sont listés.

Quand une nouvelle version de Vorple sort et vous mettez votre projet à jour, vous remplacerez l’ancien template Vorple par le nouveau. N’oubliez pas de garder votre fichier CSS de côté et de le remettre après avoir mis à jour ! Sinon, vous risquez de perdre votre CSS personnalisé.

Si vous avez du mal à ajouter votre propre fichier CSS, vous pouvez aussi directement modifier les règles par défaut dans « vorple.css ». Cependant, le même avertissement que ci-dessus est valable : si vous remplacer le template par une nouvelle version, il ne faudra pas oublier vos modifications et les reporter à la main dans le nouveau « vorple.css ».

Enfin, avant de commencer avec les quelques effets que j’ai pu glaner, une technique qui permet de voir quelles règles CSS s’appliquent à tel ou tel élément de la page. C’est très simple, et vous permettra d’avancer par vous-même.

Ouvrez votre jeu Vorple dans un navigateur (à partir d’un site ou en lançant votre serveur local, comme on vous l’expliquait la semaine dernière), et passez la souris sur une zone que vous voulez changer. Faites un clic droit et, normalement, votre navigateur vous propose une option pour regarder de plus près l’élément HTML correspondant. sur Chrome, c’est « Inspecter » ; sur Firefox, c’est « Examiner l’élément ». Un panneau s’affiche avec la structure HTML du document, avec à côté la liste des règles CSS qui s’appliquent à l’élément que vous avez choisi et qui font qu’il a cet aspect. Ainsi, si vous voulez changer l’apparence d’un élément, examinez-le, localisez la règle qu’il faut changer, puis ajoutez-la dans votre fichier CSS !

Changer la police de caractères

Si vous utilisez la technique précédente, vous pourrez voir que la police est définie sur l’élément body.

Pour remplacer la police, il vous faut donc écrire une nouvelle règle pour cet élément dans votre fichier CSS. SI l’on voulait du Georgia, par exemple :

body {

 font-family: Georgia, serif;

}

Le problème est que l’on est de base limité à des polices communes, comme le Georgia, le Times New Roman ou le Verdana.

Une première solution à ça est d’utiliser les Google Fonts, des polices de caractère que Google met à disposition gratuitement et librement pour tout le monde. Pour les utiliser, allez dans « play.html » (I6) ou dans « (manifest).txt » (I7) et ajoutez avant les autres CSS une ligne du type :

<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>

Le navigateur ira chercher la police (ici, « Aldrich ») sur le site de Google et le chargera dans la page de votre jeu. Il ne vous reste plus qu’à l’utiliser dans votre CSS.

body {

 font-family: "Aldrich", sans-serif;

}

Cependant, le calcul de Google n’est pas désintéressé : avec un tel lien, Google sait qu’un utilisateur a besoin d’une police sur votre page, et peut essayer de reconnaître l’utilisateur (avec son adresse IP, etc.) et savoir qu’il est sur votre page… Pas forcément la meilleure solution, donc !

Il est également possible d’utiliser une police que vous avez téléchargée sur l’internet. Après avoir mis les fichiers dans votre projet (il faut les ajouter au template et à la fin du manifeste pour Inform 7), il vous faudra ajouter une directive @font-face dans le CSS. Un bon site où trouver des polices est Font Squirrel (vérifiez bien que la licence de la police autorise son utilisation dans le CSS et dans les applications). Généralement, le CSS nécessaire est inclus dans le téléchargement et vous n’avez plus qu’à le recopier. Sinon, vous pouvez utiliser le générateur. C’est un sujet compliqué, je m’arrête donc ici.

Finalement, il est souhaitable que la commande du joueur utilise aussi la nouvelle police. Ajoutez la même règle à « input » pour que les caractères tapés par le joueur aient le même aspect :

input {

 font-family: "Aldrich", sans-serif;

}

Changer la couleur des caractères

Pour changer la couleur des caractères, revenez dans « body » et dans « input », et ajoutez :

 color: #03d4c3;

Bien sûr, remplacez #03d4c3 par ce que vous voulez ; tapez « color picker » dans un moteur de recherche et vous trouverez des dizaines de sites qui vous permettent de trouver ce qu’il faut mettre pour avoir la bonne couleur.

Changer la couleur des liens

Si comme moi vous utilisez pas mal d’hyperliens à l’intérieur de votre jeu, vous aurez peut-être envie de changer leur couleur afin qu’ils se mélangent harmonieusement aux autres couleurs (fond et reste du texte). Pour cela, ajoutez dans votre fichier CSS un règle pour a (un lien hypertexte est <a href="…">) :

a {

 color: #e3b4db;

}

Vous pouvez également créer des règles pour a:visited à la place de a (pour le style appliqué aux liens qui ont été cliqués) et a:hover (pour le style appliqué quand la souris survole l’hyperlien) pour les adapter au style de votre jeu.

Changer la couleur du fond

La zone principale de Vorple est découpée en plusieurs parties, et si vous voulez avoir un fond uniforme avec la même couleur, il faut changer plusieurs valeurs à la fois. Ceci est fait avec la règle suivante :

#output, label, body, input {

background-color: #000;

}

Cette règle fait un fond tout noir ; changez le « #000 » pour obtenir une autre couleur.

Changer la taille de la zone principale

Vous pouvez modifier la taille de la zone où apparaît la zone principale pour qu’elle prenne plus ou moins de place. En réalité, il s’agit d’un sujet compliqué car il faut prendre en compte les différentes tailles d’écran possibles ; les marges devraient être plus petites sur mobile afin qu’il y ait plus de place pour le contenu, par exemple. En revanche, une chose simple que l’on peut faire est de spécifier une largeur maximale de la zone de texte pour empêcher qu’elle soit trop grande (ou au contraire autoriser une taille plus grande que par défaut). Il suffit d’ajouter la règle suivante :

#output {

 max-width: 550px;

}

Notez que si vous voulez changer l’aspect de la zone principale, par exemple pour ajuster les marges ou rajouter un cadre, vous pouvez le faire avec les mêmes outils (margin, padding, border, box-shadow, etc.) que dans le tutoriel de CSS pour Twine 2 : je vous y renvoie donc !

Mettre une image de fond

Il peut être intéressant de mettre une image de fond à votre jeu, derrière la zone où le joueur tape le texte, afin de créer une certaine ambiance. Il est recommandé de choisir une image suffisamment grande pour pouvoir s’adapter à tous les écrans ! Pour changer le fond, ajoutez la règle suivante (ou bien complétez la règle body de tout à l’heure) :

body {

 background-image: url("bg.jpg");

 background-repeat: no-repeat;

 background-position: center center;

 background-attachment: fixed;

 background-size:cover;

}

La première ligne donne l’adresse de l’image, en chemin relatif par rapport à votre fichier CSS (encore une fois, il faut l’ajouter au template et à la fin du manifeste) ; la deuxième dit que vous ne voulez pas que l’image soit répétée (si l’écran est plus grand que l’image, le navigateur répète l’image pour remplir tout l’espace) ; la troisième dit que vous la voulez centrée horizontalement et verticalement ; la quatrième dit que l’image ne doit pas bouger si vous faites défiler la page (de sorte à ce que la zone centrale avec le texte soit la seule à bouger si vous descendez plus bas dans la page) ; la cinquième, enfin, dit que votre image doit toujours être adaptée de sorte à ce qu’elle soit plus grande que la fenêtre.

La dernière option veut dire que si votre image n’a pas le même format que le navigateur, elle sera coupée dans le sens qui est trop long afin de recouvrir tout la fenêtre ; mais comme vous l’avez centrée, ça revient à couper les bords de l’image, ce qui je pense est acceptable. Si vous voulez au contraire que l’image remplisse toujours tout l’espace, même si ça veut dire l’étirer dans un sens, écrivez plutôt background-size : 100% 100%;, ce qui assurera que les bords de l’image remplissent entièrement l’espace.

Mettre une image de fond à la zone de texte

Il peut être intéressant de mettre une image de fond derrière votre zone de texte — par exemple, un parchemin, ou des étoiles, ou un bord fleuri, ou une image qui se voit relativement peu (pour ne pas gêner la lecture). Pour cela, revenez dans votre élément #output, et écrivez une règle similaire à celle écrite précédemment :

#output {

 ...

 background-image: url("parchemin.jpg");

 background-repeat: no-repeat;

 background-position: center center;

 background-attachment: fixed;

 background-size: 100% 100%;

}

Ici, il me semble que background-size ne devrait pas être cover (ou contain, qui refuse de couper l’image et la réduit plutôt, ce qui crée une zone blanche) ; en effet, si vous avez une image de parchemin, les rebords sont importants et vous voulez qu’ils soient bien alignés avec votre zone de texte centrale. Ainsi, le réglage « 100% 100% », qui assure que l’image est étirée pour bien coller à la zone de texte, me semble plus judicieux ; à vous de faire une image de parchemin suffisamment grande pour que l’étirement ne se voie pas. Sinon, il existe d’autres moyens plus compliqués (comme avoir une image différente pour les bords du parchemin et pour son corps). Je vous laisse chercher sur le sujet !

C’est tout pour le moment !

N’hésitez pas à aller plus loin que ce tutoriel, en examinant les éléments par exemple ! Le meilleur moyen de commencer en CSS, c’est d’expérimenter ! J’espère que vous arriverez à donner à votre jeu l’aspect qu’il mérite, qui en jette et qui donne envie d’y jouer. Et vous pouvez toujours poster des captures d’écran de votre projet en commentaire ! 😉

Faire un jeu à embranchements dans Vorple

Hugo Labrande

Traditionnellement, on oppose les jeux à analyseur syntaxique, où tout se passe au clavier, et les jeux à embranchements, où on ne fait que cliquer. Mais la frontière n’est pas si étanche que ça ; il y a plein de jeux à parser avec des choix multiples (par exemple, les conversations), des jeux Twine où on explore des lieux, parfois avec des directions nord-sud-est-ouest, des jeux Inform avec des hyperliens, des Twine où on tape des choses au clavier, etc. Dans l’article d’aujourd’hui, on va faire un jeu à embranchements à la Twine, à l’intérieur de Vorple, la surcouche JavaScript/CSS pour Inform !

« Pourquoi ferait-on ça ? demandez-vous avec un regard hébété. Pourquoi ne pas utiliser Twine pour faire un Twine ? » Pour moi, une des grandes forces d’Inform, c’est la modélisation du monde et des actions de base. Déjà codés dans Inform, vous trouverez : un système d’inventaire sophistiqué, une géographie, des personnages qui peuvent bouger de pièce en pièce, des tests de visibilité d’objets, des choses sur d’autres choses, et j’en passe. Twine n’a que des variables : si vous voulez tous ces systèmes, il va falloir les recoder, et c’est pas évident ; alors si on peut marier la modélisation du monde par Inform avec une façon de jouer à la Twine, c’est génial.

Un excellent exemple de jeu écrit en Vorple mais sans utiliser l’analyseur syntaxique est Re: Dragon, de Jack Welch, qui se passe en grande partie dans une interface rappelant une application de messagerie — un tour de force, et encore un exemple de la puissance de Vorple ! Si ça vous intéresse, le code Inform 7 est sur le dépôt GitHub de Jack ; la démarche est sensiblement la même que celle dans cet article !

Message personnel adressé à Stéphane F., que je sens que je vais interviewer bientôt pour le site : le système d’Azthath est génial, la liste des actions proposées est organique et super flexible, c’est un plaisir de voir tout ce qui est généré par le jeu aussi intelligemment. Dépêche-toi de publier ça, potentiellement en version Vorple, ça fera un carton.

Liens correspondant à une action

Commençons par la base : pour faire une interface à la Twine, il faut des hyperliens et pas d’invite de commande. C’est impossible à faire en Glulx : bien qu’il soit possible de ne pas afficher la commande résultant d’un lien quand on clique sur ce dernier, impossible d’enlever le champ où le joueur tape sa commande. Mais bien sûr, Vorple sait faire !

Pour cacher l’invite de commande, il suffit de dire VorpleHidePrompt() en I6 ou hide the prompt en I7. Reste à créer des hyperliens vers une commande, en spécifiant bien qu’il faut cacher la commande exécutée (pour ne rien afficher à part le résultat de la commande). En I6, ça serait :

print "Voulez-vous ";

VorpleLinkCommandText("la flûte", "acheter la flûte", DONT_SHOW_COMMAND);

print " ou ";

VorpleLinkCommandText("la baguette", "acheter la baguette", DONT_SHOW_COMMAND);

print ", ou ";

VorpleLinkCommand("sortir", DONT_SHOW_COMMAND);

print " ?"

Et en I7, ça donnerait :

say "Voulez-vous ";

place a link to command "acheter la flûte" reading "la flûte", without showing the command;

say " ou ";

place a link to command "acheter la baguette" reading "la baguette", without showing the command;

say ", ou ";

place a link to command "sortir", without showing the command;

say "[_]?";

Vous n’avez plus qu’à coder le résultat de chacune de ces commandes pour spécifier ce qui doit se passer si on clique sur un des liens.

Et n’oubliez pas de sortir l’invite de commande de l’ombre quand vous voulez revenir en mode parser ; c’est VorpleUnhidePrompt(); en I6 et unhide the prompt en I7.

Des choix plus complexes

Si vous voulez maintenant avoir des choix plus complexes, qui ne correspondent pas forcément à des actions, on peut adopter une autre tactique. Ça n’est pas forcément la plus maline, et il y a peut-être plus propre, mais c’est un début. Nous allons créer un faux verbe, et attribuer un numéro interne à chaque choix, de sorte à ce que lorsque le joueur clique sur le choix, le jeu exécute en secret une commande de la forme « choix 12 ». Le code en Inform 6 pour ceci serait :

[ ChoixSub n ;

 switch(n) {

 1: consequencesChoix1(); rtrue;

 ...

 87: consequencesChoix87(); rtrue;

 default: print "Bug !";

 }

];

Verb 'choix'

*number ->Choix;

Vous n’avez plus qu’à écrire les conséquences de chacun des choix, que j’ai mis chacun dans leur petite fonction pour plus de lisibilité.

Vous pouvez sans doute découper ce gros switch en plusieurs petits : écrivez une fonction avec un switch correspondant aux choix proposés au 1er étage du château, une autre pour le 2e étage, etc. ; puis et faites en sorte que le switch de ChoixSub vous envoie sur la bonne fonction.

Le code I7 est similaire. Il faut créer une action s’appliquant à un nombre (ou à un topic, au choix), puis écrire des règles carry out pour cette action (carry out choosing 1, carry out choosing 2 et ainsi de suite, avec optionnellement des conditions avec when). Si vous voulez une idée d’un code complet, vous pouvez regarder le code source de Re:Dragon par Jack Welsh (après la ligne 184) : une action qu’il appelle linkaging, et chaque conséquence est mise dans une règle séparée, de la forme after Linkaging when topicDuJour is "blablabla".

Pour finir, un petit raffinement important : la joueuse ne connaît pas a priori l’existence du verbe choix, mais si jamais elle le découvre, elle peut le taper la prochaine fois qu’elle a accès à l’invite de commandes, et ça peut lui donner accès à des choix interdits et casser le jeu ! Une solution est de bloquer ChoixSub si le prompt est visible ; pour savoir s’il l’est, il faut utiliser une commande JavaScript spéciale. Pour I6, le code devient :

[ ChoixSub n ;

 VorpleExecuteJavaScriptCommand("return $('#lineinput').hasClass('force-hidden')");

 if (~~VorpleWhatBooleanWasReturned()) return false; ! S'il n'est pas caché, ne pas lancer le reste du code

 switch(n) {...

Pour I7, une règle check semble tout à propos :

Check choosing:

 execute JavaScript command "return $('#lineinput').hasClass('force-hidden')";

 if the JavaScript command returned false, stop the action.

Et voilà : le switch ou les règles carry out/after(et l’exécution des conséquences) ne sera jamais regardé si le prompt est visible (ce qui veut dire que la joueuse a tapé « choix 12 », ce qu’elle n’est pas censée faire).

Il est aussi possible d’utiliser la convention de faire débuter toutes les commandes qui ne sont pas destinées à être tapées (et qui ne peuvent  donc résulter que d’un lien)  par deux tirets bas. On écrirait donc Verb '__choix' en I6 et Understand "__choix [number]" as choosing. D’une part, cela permet de bien différencier les commandes venant de liens ; d’autre part, il sera plus difficile de deviner une telle commande. (Bien sûr, vous connaissez désormais cette astuce si vous venez de lire ce paragraphe…)

Je termine en rappelant cet article de Corax, qui expliquait comment il avait écrit sa FI hypertexte avec Vorple et I7. Cela pourra donner plus d’idées concernant l’utilisation de liens avec Inform 7.

Voilà ! Si vous suivez cette voie pour votre projet, n’hésitez pas à écrire un commentaire pour montrer comment vous avez fait !

Le mois Vorple, c’est fini ! J’espère que ces articles vous auront donné des idées et envie d’utiliser cet outil ! Nous continuerons à écrire sur cet outil de temps en temps. Je tiens à remercier Nathanaël Marion pour son aide dans la préparation de ces articles, notamment pour tout ce qui touche à Inform 7 !

Créer un jeu d’aventure des années 80, maintenant !

Hugo Labrande

SRAM, Orphée, Les passagers du temps, Kikekankoi, Le pacte… La fiction interactive francophone dans les années 80, c’était bien particulier : des illustrations en haut de l’écran, quelques lignes de description, et un analyseur syntaxique qui répondait aux insultes (je ne sais pas pourquoi, mais c’était important apparemment). La tradition s’est perdue, et les raisons sont multiples ; notamment, les formats qui ont permis l’éclosion d’une communauté amateur sont issus de la communauté anglophone, où la référence reste Infocom et ses jeux sans images. Mais depuis quelques temps, on a des outils qui vont plus loin, et qui permettent de faire exactement ce qu’on veut : l’un de ces outils, c’est Vorple (mon chouchou), et voici un tutoriel pour vous lancer.

Avant tout, posons les choses

Puisque je pense que cet article va intéresser pas mal de monde hors de nos lecteurs habituels, un petit propos liminaire.

Bonjour ! Nous sommes Fiction-interactive.fr, une communauté qui fait des aventures textuelles en amateur depuis 2002 ! Nous faisons des jeux à choix multiples, qui vont encore plus loin que les livres dont vous êtes le héros, mais aussi (et surtout, historiquement) des jeux d’aventure avec analyseur syntaxique, ceux où on doit taper une commande pour avancer. Nous utilisons principalement deux langages : Inform 6 et Inform 7, qui, malgré leurs noms, sont très différents dans leur approche et leur syntaxe. Le format de sortie de ces langages spécialisés a des contraintes spécifiques (par exemple, voir cet article) ; mais récemment, une extension nommée Vorple, qui marche aussi bien avec l’un qu’avec l’autre, permet de s’affranchir de ces contraintes et d’aller beaucoup plus loin, et c’est ce qu’on utilisera dans ce tutoriel !

Si vous avez une question sur I6 ou I7, demandez, mais sinon, vous pouvez aller sur notre Discord ou notre forum !

Que va-t-on faire aujourd’hui ? On va faire des jeux en Inform, qui peuvent être joués dans un navigateur Internet, et qui ressemblent à ça :

D’ailleurs, je vous ai fait un tout petit exemple pour cet article ! Cliquez ici pour y jouer et ici pour consulter le code source ! Et pour commencer à bidouiller, je vous ai mis tout ce qu’il faut pour commencer (et le code source du jeu ci-dessus) dans un kit de démarrage !

Si vous voulez en faire des applications pour les mettre sur Steam ou itch.io, c’est possible, mais un peu complexe ; on aura un tutoriel sur le sujet bientôt, mais pour l’instant ça ne marchera que dans un navigateur. Par contre, autant annoncer la couleur : ces jeux ne tourneront pas sur un CPC ou un Amiga, on n’a pas moyen de les compiler et ils seraient trop gros ; faux rétro diront les uns, une chance de pouvoir faire un jeu aussi gros que vous voulez dans ce style-là diront les autres ! 😉

Prêts ? C’est parti.

Le code Inform 6 qui a inspiré cet article a été développé pour le jeu Panoptique, que j’ai écrit avec Nighten Dushi. Si vous voulez voir à quoi peut ressembler un code complet, voici le fichier source.

La barre de statut de Vorple

Dans le format de sortie des jeux Inform, il y a un petit espace dédié à la barre de statut : une ou deux lignes qui restent en permanence en haut de l’écran (le texte défile dessous) et qui affiche quelques informations comme le nom de la salle, le score, etc. La dernière version de Vorple permet de prendre cela en charge, et le système est même plus puissant et flexible que dans Inform de base. Bien sûr, ceci veut dire qu’il faut installer Vorple et faire les bonnes choses pour que ça marche : je vous renvoie aux tutoriels que l’on a écrits sur notre site pour démarrer.

Concrètement, dans Vorple, la barre de statut est un objet HTML qui contient quatre choses différentes : la partie gauche (status-line-left), la partie du milieu (status-line-middle), la partie droite (status-line-right ), et un conteneur spécial, status-line-mobile, qui est utilisé dans le cas où l’espace de jeu est petit (quand on rapetisse la fenêtre ou sur mobile). Si vous voulez, par exemple, écrire le nom du lieu en haut de l’écran, centré, et qu’il soit mis à jour à chaque tour, il vous faut juste dire à Vorple de changer le focus d’écriture pour le placer dans status-line-middle, écrire le nom du lieu, et relâcher le focus ; ce bout de code devra être mis dans le livre des règles de mise à jour de la barre de statut, qui est exécuté à chaque tour. En Inform 6, ça donnerait tout simplement

Object MyStatusLineRule "" StatusLineRulebook,

 with description [;

 VorpleStatusLineClear();

 VorpleSetOutputFocus("status-line-middle");

 print location;

 VorpleSetOutputFocusMainWindow();

 ];

Et en Inform 7, quelque chose comme :

For constructing the Vorple status line:

 clear the Vorple status line;

 set the output focus to the element called "status-line-middle";

 say "[the player's surroundings]";

 set the output focus to the main window;

 rule succeeds.

Et on peut mettre n’importe quoi dans une barre de statut… Vous me voyez venir : mettons-y nos images ! Ceci permet aussi, automatiquement, d’avoir le texte qui défile en dessous de l’image.

En vérité, il existe un moyen plus facile de modifier la barre de statut quand on ne veut qu’afficher du texte, mais comme notre but est d’afficher des images, on ne va voir que cette méthode « compliquée ».

Il y a seulement un petit problème : la barre de statut va recouvrir le haut du texte, donc on ne verra pas le début. On peut remédier à cela en ajoutant de la marge au texte. Avec I6, il faudra ajouter VorpleExecuteJavaScriptCommand("$('#window0').css('margin-top', '320px');"); après VorpleInitialise() dans Initialise. Avec I7, ce sera execute JavaScript command "$('#window0').css('margin-top', '320px');"; dans une règle Vorple Interface Setup. (Bien entendu, il faut remplacer le 320px par la hauteur de vos images.) Il est aussi possible d’ajouter ce CSS directement dans la feuille de style.

Une première solution

Avant tout, il faut dire à Vorple qu’on veut une barre de statut, avec une seule colonne (c’est la colonne centrale, centrée, par défaut). En Inform 6, il faut mettre les lignes suivantes à la fin de votre fonction habituelle Initialise :

VorpleInitialise();

VorpleConstructStatusLine(1);

Et ne pas oublier d’inclure vorple-status-line.h. En Inform 7, il faut écrire Include Vorple Status Line by Juhana Leinonen, et ensuite écrire la règle :

When play begins:

 construct a Vorple status line with 1 column.

Ensuite, on construit notre règle de mise à jour de l’image. On peut se dire que l’image va dépendre du lieu dans lequel on est. Dans votre code, vous aurez des lieux définis ainsi :

Object pyramide_azteque "Pyramide aztèque"

 with description "Vous gravissez les dernières marches en transpirant, et regardez autour de vous. La jungle, à perte de vue.";

Object jungle "Dans la jungle"

 ! etc.

Vous pouvez alors construire une règle sous cette forme :

Object MyStatusLineRule "" StatusLineRulebook,

 with description [;

 VorpleStatusLineClear(); ! pour effacer l’ancienne

 VorpleSetOutputFocus("status-line-middle"); ! on se met au milieu

 if (location == pyramide_azteque)

 VorpleImage("pyramide.png", "", IMAGE_CENTERED);

 if (location == jungle)

 VorpleImage("jungle.png", "", IMAGE_CENTERED);

 !etc.

 VorpleSetOutputFocusMainWindow(); ! on rend la main

 ];

Chichén Itzá) est tout à fait voulue.

Pour Inform 7, les lieux seront définis par :

La Pyramide aztèque est un endroit. "Vous gravissez les dernières marches en transpirant, et regardez autour de vous. La jungle, à perte de vue.".

Et votre règle devrait être :

Rule for constructing the Vorple status line:

 clear the Vorple status line;

 set the output focus to the element called "status-line-middle";

 if the location is the Pyramide azteque:

 place an image "pyramide.png", centered;

 set the output focus to the main window;

 rule succeeds.

Il vous suffit de rajouter un test pour chaque image. Et c’est tout bon !

Une deuxième solution

L’inconvénient de la solution précédente, c’est qu’on fini par avoir une grosse succession de if, et ça n’est pas très facile à déboguer. Il y a une autre manière, un peu plus dans l’esprit « orienté objet », d’organiser les choses : on va donner à chaque lieu le nom de son image, et dire dans la fonction de mise à jour d’afficher l’image associée au lieu actuel. En Inform 6 ça revient à déclarer une propriété dans les objets, comme ceci :

Object pyramide_azteque "Pyramide aztèque"

 with description "Vous gravissez les dernières marches en transpirant, et regardez autour de vous. La jungle, à perte de vue",

 nom_image "pyramide.png";

Object jungle "Dans la jungle"

 with description "Une chaleur étouffante.",

 nom_image "jungle.png";

Votre règle est alors simplement

Object MyStatusLineRule "" StatusLineRulebook,

 with description [;

 VorpleStatusLineClear(); ! pour effacer l’ancienne

 VorpleSetOutputFocus("status-line-middle"); ! on se met au milieu

 VorpleImage(location.nom_image, "", IMAGE_CENTERED);

 VorpleSetOutputFocusMainWindow(); ! on rend la main

 ];

On peut même raffiner ceci : vous pouvez écrire des choses comme nom_image [ ; if (il_fait_nuit) { return "jungle_nuit.png";} else { return "jungle_jour.png";} ];Ceci vous permet d’adapter l’image en fonction d’autres conditions, au plus près de l’objet lui-même.

En Inform 7, ça devrait donner quelque chose comme ça :

Un endroit has a text called illustration. L' illustration de la pyramide est "pyramide.png".

Et la règle :

Rule for constructing the Vorple status line:

 clear the Vorple status line;

 set the output focus to the element called "status-line-middle";

 place an image "[illustration of la location]", centered;

 set the output focus to the main window;

 rule succeeds.

Pour aller plus loin

Il y a de nombreuses façons d’aller plus loin, que vous découvrirez en jouant avec le système ! Pour l’heure, voici quelques pistes d’amélioration.

Vorple a une fonction qui permet de précharger les images (VorplePreloadImages en Inform 6, preload image avec Inform 7) : elles seront téléchargées silencieusement lorsque le jeu démarre, puis affichées instantanément. À vous de voir si vous voulez faire ceci (après tout, vous voulez peut-être qu’il y ait un temps de chargement, pour l’effet old school) ; si vous voulez le faire, il faut mettre tous les noms d’image dans une liste, puis les précharger (voir par exemple l’objet Preload dans le code de Panoptique).

Vous pouvez aller beaucoup plus loin en termes de présentation, notamment en travaillant sur le CSS du jeu : changez la police de caractères pour la remplacer par une police de micro-ordinateur, mettez un cadre autour de vos images, changez la couleur de fond, etc. ! On trouve des tutoriels CSS un peu partout, mais notre tutoriel pour le CSS et Vorple vous permettra de mettre le pied à l’étrier.

N’oubliez pas que vous pouvez aussi adapter votre jeu aux navigateurs mobiles en utilisant status-line-mobile : mettez-y des images plus petites pour plus de lisibilité !

Même les pommes de terre ont des yeux compile encore, et voilà le résultat rapidement avec les réglages par défaut de Vorple ! À continuer peut-être, douze ans après…

Si vous avez des questions sur ce tutoriel, n’hésitez pas ! J’espère qu’il vous aura stimulé et donné envie de vous mettre à programmer votre propre jeu old school ! Revenez-nous-en parler !

Forcer le joueur à taper une commande précise

Hugo Labrande

C’est la rentrée ! Contents de vous retrouver, et soyez prêts pour une année de plus d’articles sur la fiction interactive !

Dans l’article d’aujourd’hui, je voudrais évoquer un effet intéressant, qui apparaît dans plusieurs fictions interactives à analyseur syntaxique. Cet effet n’a pas vraiment de nom officiel, en français comme en anglais, mais je l’aime beaucoup et je trouve qu’il peut être très intéressant s’il est judicieusement utilisé.

La première fois que j’ai rencontré cet effet, c’était dans Filaments — qui est un jeu excellent, avec beaucoup de bonnes idées et une atmosphère vraiment chouette — pas étonnant que son créateur soit maintenant une figure célèbre du jeu vidéo indépendant français. Posons la scène : nous sommes chez le disquaire « Le Cinquième Disque », rue Mouffetard, à Paris ; l’héroïne, Margot, est accompagnée de son ami un peu lourd, Jonas. On essaie de parler au vendeur :

Jonas tire sur la manche du vendeur : "Yo, Boris. C'est soirée disco ce soir?".

Boris le foudroie d'un regard injecté de sang : "Quelle plaisanterie amusante. Que puis-je faire pour vous?"

D'un air qui feint la profondeur d'esprit, Jonas poursuit : "Notre ami, qui répond au nom de...D-J-S-H-A-D-O-W, (hé oui), nous a dit qu'un certain "Boris" ici présent aurait un enregistrement unique de 1453 d'un certain Dan The LadyBird. Ah, et laissez moi vous présenter mon assistante. Assistante ! Viens par ici."

Oula. Cela va se payer dans le sang.

>

Alors moi, bien entendu, je veux « insulter Jonas », alors, i…
>e
n…
>et
s…
>etr
u…
>etra
l…
>etran
t…
>etrang
e…
>etrangl
Hein ?! Ça y est, j’ai compris ! Je finis par taper au hasard sur le clavier :

>etrangler jonas

Vous passez nerveusement vos mains autour du coup de Jonas et vous le secouez comme un prunier. Ca soulage !

Alors bien entendu, l’action n’est pas réellement faite ; Margot est en train de rêver, mais se reprend et traite Jonas d’imbécile. Cet effet très chouette est utilisé pour donner les pensées et les envies (de meurtre, ici) du personnage que l’on contrôle ; c’est un moment très drôle, et le jeu avec l’interface donne plus de poids à la blague.

On retrouve le même effet dans plusieurs autres jeux – en fait, j’ai fait une liste sur l’IFDB (la base de donnée des fictions interactives) avec les jeux qui utilisent cet effet. Apparemment, le premier à l’avoir utilisé est Adam Cadre, auteur majeur de l’époque 1995-2005, dans Shrapnel, un jeu assez particulier et expérimental, qui vous fait mourir un nombre conséquent de fois pour aller au bout : cet effet est utilisé sur l’écran final (« Vous êtes mort ! »), et quoi que le joueur tape, c’est « restart » (recommencer) qui s’affiche et on revient au début du jeu. Depuis, l’effet a été utilisé de plusieurs façons : dans des séquences de rêve, dans des sortes de « cinématiques », ou dans des séquences où le personnage n’a plus le contrôle de ses mouvements ; par exemple, il est utilisé dans Sourire de bois, de Nathanaël Marion (notre Natrium729 préféré), un jeu où l’on incarne une marionnette de bois !

Techniquement, la mise en place de ce genre d’effets est relativement simple, bien que fastidieuse. L’invite de commandes (« > ») qui est affiché n’en est en fait pas un : c’est simplement le caractère >, après lequel on a fait une pause dans le jeu, et le joueur a l’impression d’avoir la main car c’est la convention usuelle. Un petit bout de code vaut mieux qu’un long discours : voici ce qui se trouve dans le code (Inform 6) de Filaments :

print ">";

attend();

print "e";

attend();

print "t";

attend();

print "r";

attend();

print "a";

attend();

print "n";

attend();

print "g";

attend();

print "l";

attend();

print "e";

attend();

print "r";

etc. La fonction attend() est une fonction faite maison permettant d’attendre que l’on appuie sur une touche.

En fait, il y a plus simple : utilisez mon extension EffetsDeTexte.h, qui contient tout un tas de fonctions Inform 6 pour faire des effets chouettes sur votre texte ! Cet effet là peut-être utilisé avec la fonction « LettreParLettre ». Donc ici, vous auriez juste besoin d’écrire « LettreParLettre(« etrangler jonas ») ». Ne me remerciez pas !
Et avec Inform 7, l’exemple The High Note de l’extension Basic Screen Effects vous mettre sur la voie. (Vous pouvez également voir la source de Sourire de bois, qui montre une façon de faire avec un tableau contenant les commandes simulées).

Enfin, mentionnons un effet un peu similaire, qu’il est possible de faire sur Vorple, et que sur Vorple ! Vorple est un outil qui permet d’étendre les fonctionnalités de votre jeu, notamment avec du code JavaScript ; c’est le futur de la FI à parser, et il faudrait vraiment qu’on fasse un tuto. (Ça va venir très bientôt !) Parmi les fonctionnalités nouvelles apportées par Vorple, certaines permettent de contrôler l’invite de commande directement, et faire un effet encore plus étrange. Regardez dans l’exemple The Mandchurian Candidate :

Vous voyez la voiture du président s’approcher.

>

Là, le jeu laisse le joueur taper une commande, qui s’affiche comme d’habitude, mais quelle que soit la commande, une fois qu’on a appuyé sur Entrée, voici ce qui se passe ensuite :

>tirer

Sans aucune hésitation, vous visez et appuyez sur la gâchette…

Le joueur peut taper une commande, mais celle-ci est remplacée automatiquement par le jeu par une commande prédéfinie – et le jeu se comporte exactement comme si c’est cette commande qui avait été tapée ! Un effet pour le moins surprenant, et qui fait vraiment douter le joueur, qui ne s’aperçoit pas forcément tout de suite de ce qui vient de se passer !

Je n’ai pas encore vu cet effet dans un jeu, mais j’ai hâte de voir comment il peut être utilisé et l’effet que ça peut créer ! À vous, donc !

Faites votre propre invite de commande dans Inform 6

Hugo Labrande

Le personnage central de la fiction interactive à parser, c’est l’invite de commande, ou pour faire en anglais, le prompt. Ah, le prompt. Si on a l’habitude, c’est un ami que l’on attend impatiemment pour taper notre idée suivante ; pour un débutant, c’est un symbole arbitraire et déconcertant, dont on a du mal à comprendre ce qu’il nous veut. Par sa forme, le plus souvent un chevron (>), il rappelle les invites de commandes classiques que les programmeurs, notamment sous Linux, connaissent très bien. Naturel dans les années 1970, car c’était la seule interface connue, il a été supplanté par des interfaces graphiques plus intuitives, si bien que, pour beaucoup de joueurs modernes, c’est sans doute la première fois qu’ils voient ce genre de choses.

Cet article vous apprendra diverses façons, dans divers contextes, de modifier le prompt ; bien souvent, vous ferez ces modifications dans un souci d’ergonomie, et pour rendre plus intuitive l’interface, même si vous aurez peut-être des idées pour d’autres modifications. Les possibilités sont illimitées ! Voici cependant quelques choses assez classiques.

En Inform 6, les réponses par défaut sont spécifiées dans la fonction LanguageLM, qui regroupe toutes les réponses de la bibliothèque à des actions (et c’est la partie qu’on traduit pour faire des bibliothèques Inform 6 en français, en allemand, en slovène, etc.). On modifie ces réponses par défaut avec l’objet spécial LibraryMessages, plutôt que d’aller trifouiller dans LanguageLM. Pour ce qui est de l’invite de commandes, ça a été implanté comme une fausse action, Prompt ; ce qui fait que, comme toutes les réponses par défaut, le texte de l’invite de commande est stocké dans LanguageLM, et est modifiable par LibraryMessages.

Concrètement : je veux faire un jeu original où l’invite de commande est à l’envers (waouh). Il suffit d’écrire le bout de code suivant, et de le mettre entre l’inclusion de Parser et celle de Verblib :

Object LibraryMessages

 with before [ ; Prompt: "^< "; ];

Si je veux le changer pour qu’il demande de taper une commande (ce qui est quand même plus explicite, tout de même) :

Object LibraryMessages

 with before [ ; Prompt: "^Tapez votre commande ici : "; ];

Le seul avertissement que je donnerais, c’est qu’il y a des cas particuliers qui ne seront pas remplacés par ce message (enfin, vu les bibliothèques à l’heure actuelle) : les prompts de YesOrNo(), de LowKeyMenu() et celui de la fin (« Voulez-vous RECOMMENCER… »), par exemple. Mais ce sont des cas mineurs, qui se règlent en modifiant directement la bibliothèque.

Le plus beau, c’est que vous pouvez mettre n’importe quel bout de code à cet endroit-là ! Par exemple, vous pouvez faire varier le message de prompt pendant la partie. L’exemple donné dans le Designer’s Manual 4 (exercice 59) est celui d’une invite de commande qui demande « Qu’est-ce que vous, le détective, faites maintenant ? » au premier tour, puis « Et ensuite ? » aux tours suivants ; on peut même dire au joueur au bout d’un certain temps que l’on raccourcit le message. Ça donne :

Object LibraryMessages

 with before [; Prompt: switch (turns) {

 1: print "^Qu’est-ce que vous, le détective, faites maintenant ?^>";

 2 to 9: print "^Et ensuite ?^>";

 10: print "^(Ça ne serait pas fatiguant, les @<< Et ensuite ? @>> à chaque fois ? À partir de maintenant le prompt sera plus court.)^^>";

 default: print "^>";

 } rtrue; ];

À vous de voir comment adapter ce bout de code, sachant que vous pouvez utiliser n’importe quelle condition pour faire varier votre message — à vous de jouer !

Bonus pour les fans de Vorple

Vorple ajoute des possibilités intéressantes, notamment dans l’extension « Vorple command prompt control ». Vous pouvez par exemple préremplir le prompt, ce qui peut être utile par exemple pour faire une section « tutoriel » à votre jeu : lorsque vous laissez la main au joueur, il y a déjà écrit « ouvrir la porte » dans l’invite de commande, et le joueur n’a pas à se demander comment taper la commande. Vous pouvez aussi le cacher, en faisant attention : le jeu n’avance que si des commandes sont exécutées, donc il faut avoir des hyperliens prêts, mais ça rend possible de faire une section (ou un jeu) « à la Twine » très facilement ; pour plus de précisions, vous pouvez voir le message de Corax sur le forum.

Vous pouvez aussi ajouter un un infobulle sur l’invite de commande, par exemple pour un message de bienvenue, ou une indication discrète de ce que le joueur devrait faire ; ce sont des outils plutôt chouettes pour cet effet, car ils sont visuellement distincts du monde décrit dans le jeu, s’adressent directement au joueur et disparaissent au bout de quelques secondes. Par exemple, on peut mettre une bulle sur l’invite de commande pendant le premier tour, en écrivant dans Initialise :

VorpleTooltipPrompt("Si vous n’avez jamais joué à une fiction interactive, tapez TUTORIEL.");

Enfin, une dernière possibilité offerte par Vorple est de mettre un hyperlien sur le prompt ; j’ai déjà utilisé ceci dans mes jeux (par exemple dans Tipelau), pour qu’un clic sur l’invite de commande soit équivalent à l’action « regarder ». Le souci dans Vorple est que le prompt doit être une chaîne de caractères, et donc on ne peut pas rajouter d’hyperliens directement (et c’est dommage ; le prompt est quelque chose de spécial, pris en compte séparément par Vorple). Je vous livre alors mon secret : on peut rajouter un peu de code JavaScript au bon endroit dans le jeu pour remplacer le prompt habituel par une version avec un hyperlien :

Object linkOnPrompt "hyperlink on prompt" VorpleInterfaceUpdate

 with description [; VorpleExecuteJavaScriptCommand("$($(haven.prompt.get()).find('#lineinput-prefix').contents()[0]).replaceWith('

<a class="~vorple-link" href="~#~" data-command="~regarder~" data-silent="~false~">&gt;</a>')"); ];

Avec tout cela, plus d’excuses pour se contenter d’une invite de commande classique !