La Fête de Zeus est une histoire interactive réalisée avec le logiciel Twine. C'est une histoire qui possède 61 passages, avec plusieurs embranchements et fins possibles. Twine est un logiciel qui permet de créer des histoires non linéaires où le lecteur peut faire ses propres choix. Chaque choix redirige vers un nouveau passage de l'histoire. Des variables et conditions peuvent être mises en place pour mémoriser les choix et adapter le déroulé de l'histoire en fonction des choix effectués. Il existe plusieurs formats d'histoire avec des syntaxes différentes. La fête de Zeus est basé sur le format Harlowe, le format par défaut de Twine. Il existe également le format Snowman, basé sur JavaScript, ou encore SugarCube, format plus avancé, qui permet de créer des histoires plus proches du jeu vidéo. J'ai choisi d'utiliser Harlowe pour pouvoir explorer pleinement le système de variables et de conditions avec une syntaxe que je ne connaissais pas. Une variable sert à stocker une information pendant l'histoire, avec la macro (set:). Il est par exemple possible d'entrer son nom au début de l'histoire, qui sera alors stocké dans la variable $name. Lorsque $name est utilisé dans un passage, c'est donc le prénom du lecteur qui apparaitra. Le système de points de vie est également géré avec une variable, appelée $pv. Ces deux variable sont déclarées dans le premier passage de l'histoire.

Il devient donc très simple de gérer les points de vie pour en ajouter...

...ou en enlever.

Les variables peuvent également être booléennes, en les définissant comme true ou false. Cela permet de définir si le lecteur a accompli une action précise ou s'il possède un objet. Par exemple, si le joueur récupère une gourde, la variable est déclarée ainsi : (set: $gourde to true). Elle peut ensuite être utilisée avec les conditions. Les conditions permettent d'afficher du contenu en fonction de si une action a été accomplie ou non. Reprenons notre exemple de gourde. Une fois la variable booléenne définie, il est alors simple de l'utiliser, avec un (if:), parfois (else-if:) ou encore (else:) :

Les conditions permettent également de gérer les points de vie. Si le lecteur a plus d'un point de vie, il en perd un. En revanche, lorsqu'il n'a plus de point de vie, il doit alors recommencer l'histoire. La condition se fait donc avec (if:) et un (else-if:) :

C'est en combinant plusieurs variables et conditions que l'histoire devient pleinement interactive, grâce à plusieurs embranchements et ainsi plusieurs fins. Le format Harlowe offre une mise en page de l'histoire par défaut. Il est possible de modifier cette mise en page avec du CSS et du JavaScript. Il est à noter que le HTML étant généré par Harlowe, il est impossible à modifier. Cela peut donc apporter des limites au style de l'histoire, bien qu'il existe des moyens de le contourner, grâce au JavaScript notamment. Il est également possible de choisir un format d'histoire qui offre plus de libertés, comme SugarCube. Le moyen le plus simple d'ajouter du CSS en Harlowe est d'utiliser la macro (hook:), comme pour le titre par exemple.
Dans le passage :

Dans la feuille de style :

Harlowe offre des éléments HTML spécifiques qui peuvent être manipulés en CSS et JavaScript, comme tw-story, tw-dialog, tw-link et tw-passage, qui servent à structurer respectivement l'histoire, les fenêtres de dialogue, les liens d'interactions et les passages. Il est également possible d'ajouter des tags aux passages, afin de tous les mettre en style d'un coup. J'ai utilisé des tags pour chaque lieu de l'histoire, afin de changer l'image de fond et les couleurs en fonction de ce lieu. Les tags sont ajoutés dans les réglages du passage, puis manipulés en CSS. Pour le temple par exemple, le CSS prend cette forme :

Tout le code CSS est disponible ici. Ce projet découle directement de mon intérêt pour les Livres dont vous êtes le Héros, des livres à choix où le lecteur se rend au passage numéroté du choix qu'il souhaite faire en tournant les pages directement. Avec Twine, cette approche est encore plus poussée avec l'ajout des variables et conditions. La frontière entre lecture et jeu devient floue et permet au lecteur de plonger pleinement dans l'histoire qu'il dirige.

L'histoire est remplie de références cinématographiques, culturelles et historiques qui me tenaient à coeur d'ajouter. Athènes, il y a très, très longtemps.

Vous menez une vie tranquille dans la capitale de la Grèce depuis la fin de la guerre, de laquelle vous êtes revenu en véritable héros. Les dieux eux-mêmes reconnaissent votre valeur, et vous tiennent en haute estime. Votre repos ne va cependant pas durer, car Zeus pourrait bien avoir d'autres plans pour vous...

Dungeon est un jeu vidéo 2D réalisé avec le moteur Godot Engine. Godot est un moteur de jeu open source qui permet de créer des jeux 2D et 3D. Un jeu Godot est organisé autour de nœuds et de scènes. Un nœud est un élément qui représente une fonction précise. Une scène est un ensemble de nœuds qui peut représenter un personnage ou encore un objet. C'est cet ensemble qui forme le jeu.

Godot utilise son propre langage pour fonctionner : GDScript. Il permet de programmer toutes les fonctionnalités du jeu, comme les déplacements du personnage, les interactions et la physique. Il est possible de créer des variables et constantes afin de gérer des évènements et de rendre le jeu interactif. La première chose que le personnage doit faire est bouger : aller à gauche, à droite et sauter. Pour bouger, le joueur appuie sur des touches. C'est ensuite le script qui définit les mouvements du personnage.

Ici, une variable appelée direction est créée afin de savoir si le joueur appuie sur la touche pour aller à gauche (avec move_left) ou à droite (avec move_right). Cette variable peut renvoyer -1 (touche gauche), 0 (pas de touche) ou 1 (touche droite). On peut ensuite établir une condition : Si une touche est pressée, le personnage se déplace. Sinon, il s'arrête. Pour que le personnage s'oriente dans la direction où il va, une nouvelle condition peut être créée. Sachant que le sprite du personnage est orienté de base vers la droite, si la variable direction renvoie une valeur supérieure à 0, le sprite ne bouge pas. Si la valeur renvoyée est inférieure à 0, le sprite est retourné horizontalement.
La même méthode est appliquée pour les sauts. Dans le jeu, le personnage peut sauter et double sauter.

La condition est telle que si la touche de saut est pressée, et si le joueur est sur le sol, une vitesse verticale est appliquée pour que le personnage aille vers le haut. Pour le double saut, une variable can_doublejump est utilisée en plus. Elle est définie comme vraie si le personnage est au sol. Si la touche de saut est pressée alors qu'il n'est pas au sol, le script vérifie si can_doublejump est vraie. Si c'est le cas, le personnage effectue un deuxième saut et la variable can_doublejump est mise à fausse pour empêcher un double jump infini. Chaque mouvement a sa propre animation. Par exemple, le personnage possède en tout 6 animations, définies avec des trames.

Ici, l'animation idle possède 8 trames pour faire bouger la queue du chat, qui sont jouées en boucle et de manière automatique au chargement.
Les animations sont contrôlées par le script. La plupart des animations du personnage sont gérées ici :

Dans Dungeon, il est possible de mourir si le personnage tombe dans des piques ou s'il s'aventure un peu trop près d'un ennemi. Dans ces deux cas, le personnage meurt car il est entré dans une zone qui le fait recommencer au début du jeu. Cette zone est ici appelée killzone. Elle est physiquement représentée par un Area2D : un type de nœud qui détecte quand d'autres corps entrent ou sortent de sa zone.

Dans le script de la killzone, une fonction se déclenche quand un nœud appelé Node2D y entre, comme l'est le personnage. Si le corps a la fonction die() (pour s'assurer que le corps en question peut mourir) alors on attend que le personnage meurt, puis 1 seconde avant que le jeu ne soit relancé. La fonction die() est définie dans le script du personnage.

Dans cette fonction, la variable is_dead est activée pour bloquer les actions du joueur et lancer l'animation et le bruitage de la mort. Le script attend que l'animation de mort soit terminée grâce à await, puis c'est le script de la killzone qui reprend le relais en attendant 1 seconde avant la relance du jeu. Le but du jeu est de trouver une clé pour pouvoir dévérouiller un coffre.
La clé est représentée par un Area2D et utilise le même principe que la mort : si un corps entre dans la zone de la clé, une variable appelée got_the_key est définie comme vraie, un bruitage est joué, et la clé disparait.
Le coffre est également un Area2D. Si le joueur est dans sa zone et appuie sur la touche E, la fonction interact(player) est appelée.

Dans cette fonction, si la variable got_the_key est définie comme vraie, donc si le joueur a la clé, alors la fonction open_chest() se lance. Elle permet de changer la trame du coffre, de jouer un bruitage et un message de fin apparait, avant de relancer le jeu. Si le joueur n'a pas la clé, c'est la fonction show_need_key_message() qui se lance : un message disant qu'une clé est nécessaire apparaitra.
L'arborescence des scènes du jeu est divisée en deux : une partie jeu et une partie interface. Cette dernière est visible en haut de l'écran de jeu.

A gauche, deux chronomètres sont présents : un qui démarre à chaque lancement du jeu, et l'autre qui enregistre le meilleur temps (Personal Best) sur la session de jeu.
A droite de l'écran se trouve un bouton redémarrer et un bouton pour fermer le jeu. Quand le bouton redémarrer est pressé, la scène du jeu et le timer appelent la fonction reset(). C'est une fonction définie dans le script global, qui va relancer la scène du jeu, sans relancer l'interface. Cela permet de garder le meilleur temps enregistré dans le deuxième chronomètre.

Le bouton quitter, lui, renvoie à une fonction qui ferme la fenêtre de jeu. Lorsque vous lancez ou redémarrez le jeu, il existe 1 chance sur 8192 pour que le chat ne soit pas blanc, mais noir.

Au lancement du jeu, un chiffre aléatoire est tiré entre 1 et 8192 et est stocké dans une variable chance. Si ce chiffre est 1, les trames chargées seront celles du chat noir, sinon, ce seront celles du chat blanc. Vous incarnez un petit aventurier à la recherche d'une clé pour dévérouiller un coffre... Mais serez-vous le plus rapide ?

Cette carte interactive a été réalisée dans le cadre de la création d'une campagne de jeu de rôle. Il me semblait important de permettre au joueur de se repérer et de s'orienter facilement grâce à une carte. Elle a été réalisée avec deux logiciels : Dungeondraft pour la création des cartes et Godot pour l'interactivité.
Plusieurs cartes représentant différents lieux ont été créées, puis reliées grâce à un système de zones interactives permettant au joueur de naviguer d'un endroit à l'autre. Dungeondraft est un logiciel qui permet de créer ses propres cartes, notamment dans le cadre d'une campagne de jeu de rôle. Il permet de concevoir des environnements détaillés tels que des villages, des grottes, des forêts ou encore des régions entières.

Le logiciel fonctionne grâce à un système d'éléments visuels appelés assets, qui correspondent aux différents objets et textures utilisés pour construire la carte : bâtiments, arbres, routes, rochers, mobilier ou encore éléments de décor.

Dungeondraft est fourni avec une bibliothèque d'assets de base permettant de créer rapidement des cartes complètes. Cependant, il est également possible d'ajouter de nombreux assets supplémentaires créés par la communauté, particulièrement active. Ces ressources permettent d'enrichir les cartes et de varier les styles visuels en fonction de l'univers souhaité. Plusieurs outils permettent de construire une carte :

L'outil Terrain permet de peindre le sol de la carte avec différentes textures, comme de l'herbe, du sable, de la roche ou de la terre. Il est possible de combiner plusieurs textures afin de créer des environnements variés et plus naturels.

L'outil Water sert à ajouter des éléments aquatiques tels que des rivières, des lacs ou la mer. Le logiciel génère automatiquement des effets visuels comme les vagues ou les reflets pour donner plus de réalisme à l'eau.

L'outil Path permet de tracer des routes, des chemins ou des rivières étroites. Ces chemins peuvent être ajustés en largeur et en texture afin de s'adapter à différents types d'environnements.

L'outil Walls est utilisé pour construire des bâtiments ou des structures. Il permet de tracer facilement les murs d'une maison, d'un château ou d'une ruine.

Enfin, l'outil Objects permet de placer les différents assets sur la carte. Il s'agit des objets de décor comme les arbres, les meubles, les rochers ou les éléments architecturaux. Ces objets peuvent être déplacés, redimensionnés et tournés pour s'intégrer au mieux dans l'environnement.
Dans Godot, la scène principale du projet repose sur un Node2D, qui sert de conteneur principal pour tous les éléments affichés à l'écran. Ce nœud possède deux éléments principaux : une Camera2D, qui définit la zone visible par le joueur et un CanvasLayer, qui contient les différentes cartes et les éléments interactifs.
Le CanvasLayer regroupe ensuite plusieurs Node2D, chacun contenant une carte différente du monde et les boutons nécessaires. Afin de rendre la carte interactive, plusieurs zones cliquables ont été placées sur les différents lieux importants de la carte. Ces zones sont en réalité des boutons invisibles. Chaque bouton correspond à un lieu spécifique : le village, la maison, les ruines et le campement. Lorsque le joueur clique sur l'une de ces zones, une fonction est déclenchée dans le script associé.

Cette fonction fait disparaitre la carte globale et fait au contraire apparaitre la carte en question. Ce système permet de transformer une simple image en carte interactive, où chaque lieu peut être sélectionné directement par le joueur.

Chaque carte a également un bouton qui renvoie vers la carte principale, ainsi qu'un bouton qui redirige vers des niveaux différents d'une même carte.
Par exemple, la carte de la maison possède trois niveaux : le toit, le rez-de-chaussée et la cave. Lorsque le joueur se situe au niveau du toit, il peut accéder directement au niveau du dessous.

Ce système permet donc de créer une carte avec plusieurs lieux et niveaux, ce qui facilite la compréhension et l'implication du joueur dans la campagne.

En plus des zones d'interaction visibles, certaines sont dissimulées afin que le joueur puisse pleinement explorer la carte. Par exemple, il est possible d'accéder à une carte via une trappe dissimulée.