Tag: coding

Clinamen #16 : combiner ImageMap et ConditionSwitch

Wouh, ça faisait longtemps qu’il n’y avait pas eu de news sur Clinamen ! Et pour cause, un projet secret me prend du temps (en plus de mon taf’, mais ça, c’est accessoire).

Et pour le retour du blog, le titre vend la mèche : on est partis pour un billet plus technique que d’habitude.

La dernière fois, je vous disais donc avoir découvert les ImageMaps, une image avec plusieurs zones interactives. J’avais utilisé cet outil pour créer des scènes où le joueur pouvait choisir d’examiner telle ou telle chose en cliquant dessus (plutôt qu’avec un menu constitué d’options telles que “Examiner le lit”, “Examiner l’ordinateur”… comme c’était le cas avant)

J’avais d’autres scènes du genre à créer et du coup je me disais que ça allait être du gâteau ! Je connaissais l’outil, ne restait plus qu’à “exécuter”.

 Et en une heure de travail cet écran sera prêt !” (me disais-je naïvement en début de soirée)

Bon, vous vous doutez, ça ne s’est pas exactement déroulé comme ça.

Mon but était de créer une image avec 3 boutons. Chaque bouton devait permettre de déclencher une action. Nickel, l’ImageMap est parfaite pour ça. Sauf que je voulais aussi que le visuel du bouton change en fonction de si le joueur a activé ou non ce bouton. J’ai vu passer des options “selected” dans l’imagemap qui auraient pu correspondre à ce que je souhaitais, sauf que je voulais que cet état soit mémorisé d’une scène à l’autre (ex : le joueur appuie sur un bouton, part dans une autre salle, revient sur les boutons), et que je ne pensais pas que cette option permettait de le faire (je me trompe peut-être ?)

 

Du coup j’ai fait appel à des ConditionSwitch, autrement dit des “interrupteurs conditionnels”, autrement dit (dans mon cas) une image qui change en fonction d’une variable enregistrée dans le jeu (la variable dans le cas présent est de savoir si oui ou non le bouton 1, 2 ou 3… est activé)

Je me suis donc attelée à une formidable bidouille qui ferait sûrement saigner les yeux de tout codeur qui se respecte. J’ai superposé deux choses :

– une ImageMap : elle permet au joueur de cliquer sur les boutons et d’être envoyé sur une autre scène. Elle permet aussi aux boutons de “briller” quand le joueur passe la souris dessus.

Voic l’image qui sert de “base” à l’ImageMap (ground)

Et l’image qui s’active lorsque le joueur passe sa souris sur un bouton

– les ConditionSwitch : ils sont au nombre de 3 sur l’image, un pour chaque bouton. Si le bouton est activé alors c’est la face A du bouton qui est montrée, si le bouton n’est pas activé alors c’est la face B qui s’affiche.

Les images A et B pour chaque ConditionSwitch

 

Donc au final dans le jeu je configure une ImageMap, à laquelle je rajoute les 3 conditionswitch, un pour chaque bouton :

Le code de l’ImageMap…

… et le code des 3 boutons.

Et on arrive à ce résultat final fortement bricolé.

 

J’ai utilisé le même principe pour cet autre écran :

 

Prochain objectif : m’initier à un semblant d’animation (emphase sur le “semblant”) pour l’écran de game over et pour améliorer l’introduction du jeu ! Même si le projet secret dont je parlais en début de post aura la priorité sur mon temps, j’espère bien trouver quelques moments pour avancer.