Tag: gamedev

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.

 

 

 

Tests à la Miller

En ce moment je mets un peu Clinamen de côté pour faire des tests. Je ne développe pas trop pour l’instant, ça reste des balbutiements, mais je bosse !

Page de Pretium Doloris

Pour ces tests j’essaie d’invoquer mon moi de 16 ans qui avait fait Pretium Doloris, une BD bien violente et graphique avec mon père au scénario. L’influence majeure est évidemment Miller, mais c’était un très bon exercice à l’époque, réfléchir à la lumière et aux valeurs de manière à faire ressortir les objets, sans contour. Ca a durablement marqué ma manière d’ombrer et d’encrer, et depuis j’ai une affinité pour les “ombres de brutasse” avec de forts contrastes. C’est aussi une facilité pour avoir un bon rendu… Mais mine de rien ça m’a demandé un temps d’adaptation pour me “remettre” dedans et j’ai complètement foiré ma première tentative d’encrage !

Au final après avoir douillé un peu je suis arrivée à ça. L’exécution n’est pas bien finie, le rendu manque de visibilité et y’a des trucs bien foireux au niveau de l’ombre des stores ; mais pour le test prévu, ça devrait être représentatif…

La différence avec les illustrations que je faisais pour Pretium Doloris, c’est que pour la BD il “suffisait” de faire le rendu final. Là (comme c’est pour un projet de jeu) je dois construire le décor proprement avec des calques. Ca m’a pris plus de temps que ce que j’imaginais. D’un côté je prends déjà du temps pour la conception du rendu final (réfléchir aux lumières et ombres pour avoir un rendu sympa) et ensuite je dois déconstruire ce rendu final pour savoir comment atteindre ce rendu grâce à une superposition d’ombres et de lumières.

Et c’est en faisant le gif que tu te rends compte que deux de tes calques ne vont pas

J’espère pouvoir vous en dire plus bientôt. Clinamen reste au chaud, je ne suis pas loin de la fin du premier jour dans le jeu (sur trois) et je voudrais finaliser cela pour avoir un bloc jouable et représentatif du rendu final. Ca devra sûrement attendre des vacances ici ou là cela dit.

Clinamen #15 : à la découverte des imagemaps

J’ai pu faire tester Clinamen à de nouveaux cobayes cette semaine et une chose qui m’a frappée a été le réflexe des joueurs à aller fouiner partout avec leur souris sur le décor, comme s’ils pouvaient aller sélectionner des zones, à la manière d’un point-and-click. A la base j’avais forcément prévu de faire ça comme ça (ça prend plus de temps que de coder 5 choix dans un menu…), mais c’était pas une mauvaise idée, surtout que ma navigation est lourdingue par moments (qui a envie de se taper un menu avec 5 choix dont 4 choix sont des “Examiner tel objet” ?). Et puis bon, je suis là pour découvrir, alors j’étais curieuse de mettre la main à la pâte, et d’améliorer la fluidité de l’expérience de jeu en même temps.

La découverte de la semaine a donc été de paramétrer ce qui s’appelle apparemment des imagemaps (ça réveille quelques souvenirs de html effectivement). Une imagemap, c’est quand on paramètre plusieurs zones au sein d’une image et que ces zones deviennent interactives (changement de visuel quand on passe la souris dessus, action particulière quand on clique dessus, etc).

Voilà à quoi ça ressemble mais c’est pas très intéressant, et un connaisseur de RenPy/Python criera probablement en voyant mon bricolage et mes redites inutiles

Comme un gif vaut mieux qu’un grand discours, voici les résultats :

 

Au passage, j’aurai aussi appris comment faire des .gif

Inconvénient de la chose qui m’a obligée à retoucher mes visuels / truander de manière peu subtile, c’est que les hotspots (les zones sensibles définies au sein de l’image) sont forcément rectangulaires. Du coup j’ai du changer le visuel de l’ordinateur d’Ester pour que les boutons puissent se caser dans des zones rectangulaires. Et étrangement, dans la cabine à explorer, seuls une partie du bureau et de l’ordinateur s’illuminent au passage de la souris… car sinon les hotspots s’entrecroisent, ce qui n’est pas jouable non plus.

Je ne sais pas si c’est une limitation inhérente à  Ren’Py ou si c’est juste moi qui suis une quiche qui ne va pas plus loin que les imagemaps, mais j’en reste là pour l’instant. Et j’en suis pas mécontente, c’est clair que ça rend le tout plus intuitif / fluide :

Sinon, sur le front de la productivité, j’ai clairement un gain ces derniers temps. Le fait d’avoir (quasi) fini les visuels du jour 1 me permet de voir l’horizon de la fin de la première partie du jeu et ça booste. J’ai encore de gros aspects à pondre (j’aimerais animer la cinématique d’intro, y’a l’interface et le sound design auxquels je n’ai pas encore touchés…) mais la majeure partie du boulot consiste à tester, affiner, tester, affiner… Ce que j’aime faire ! Je trouve ça jouissif de jouer, de rencontrer un élément qui vous fait grincer des dents, passer sur le script, modifier, retour au jeu et… magie, l’amélioration est là et peut être vécue.

Enregistrer

Enregistrer

Enregistrer