Infobulles avec Quixe

Pour discuter des langages que nous utilisons pour réaliser nos jeux : problèmes, solutions, suggestions...

Modérateurs: Stormi, Otto Grimwald

Infobulles avec Quixe

Messagepar Natrium le Lun Juin 20, 2016 2:28 am

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é.
Code: Tout sélectionner
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: Tout sélectionner
/* 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;
}

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 !
Fichiers joints
infobulle.zip
(462.51 Kio) Téléchargé 101 fois
Avatar de l’utilisateur
Natrium
Grand Ancien
 
Messages: 1165
Inscription: Mar Oct 04, 2011 11:18 pm

Re: Infobulles avec Quixe

Messagepar Mule hollandaise le Mer Juin 22, 2016 12:31 pm

Ah, cool ! C'est chouette d'arriver à faire ça ! Et c'est marrant de voir que c'est juste un petit peu de CSS, c'est quand même super puissant ce truc :)
Mule hollandaise
Grand Ancien
 
Messages: 1124
Inscription: Mar Aoû 29, 2006 10:57 pm

Re: Infobulles avec Quixe

Messagepar Otto Grimwald le Mer Juin 22, 2016 2:41 pm

C'est intéressant... bravo !

Avatar de l’utilisateur
Otto Grimwald
Très Ancien
 
Messages: 3028
Inscription: Mar Aoû 24, 2004 12:02 pm


Retourner vers Questions techniques et aide pour votre code

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités

cron