J’étais un peu jaloux de Tipelau qui affichait des bulles d’aide avec Vorple, alors j’ai essayé de voir s’il n’y avait pas un moyen de faire un truc équivalent avec Quixe et du CSS. Le résultat que j’ai obtenu est sympa et je me suis dit que ça intéresserait sûrement quelqu’un.
Déjà, il faut utiliser deux styles Glulx, donc c’est un peu contraignant si on n’en a plus beaucoup de disponibles… Pour l’exemple, j’ai utilisé les deux styles personnalisés, mais on peut aussi utiliser le style de note (si le jeu n’a pas de score) ou le style de citation (si le jeu n’a pas de boxed quotations). L’un des styles va servir pour le texte à survoler, et l’autre pour la bulle en tant que tel. L’infobulle n’apparaîtra que si le premier style est suivi de second, donc il est possible d’utiliser un style qui est déjà utilisé.
When play begins:
say "Lorem ipsum dolor sit amet. [first special style]Passe le curseur ici ![second special style]Et voici une infobulle ![roman type] Blabla bla patati et patata.".
Il faut ensuite modifier le fichier glkote.css en ajoutant ces lignes à la fin (à adapter en fonction des styles choisis et de l’apparence que l’on veut) :
[code]/* L’apparence du texte à survoler */
.Style_user1 {
text-decoration: underline;
color: blue;
}
/* L’apparence de la bulle. */
.Style_user1 + .Style_user2 {
/* Pour la positionner « hors » du texte */
position: absolute;
margin-left: -5px;
margin-top: 5px;
/* Son apparence */
background: yellow;
border: solid black 1px;
/* Il faut la masquer */
opacity: 0;
}
/* Quand on passe le curseur sur le texte */
.Style_user1:hover + .Style_user2 {
opacity: 1;
}[/code]
J’ai attaché un petit exemple, qui montre ce que ça donne si on s’amuse à ajouter des transitions.
Le seul défaut pour l’instant, c’est que ça n’est pas beau si on joue sur autre chose que Quixe, puisque les deux textes seront affichés l’un après l’autre. Le seul moyen d’empêcher ça, c’est de compiler deux fois le jeu, l’une ayant une option activée qui affiche les infobulles d’une autre manière (entre parenthèses, par exemple).
J’imagine qu’on peut faire plein d’autres effets marrants juste Quixe et du CSS !
