Interaction clic sur une image

Posez vos questions pour obtenir de l'aide sur Ren'Py

Interaction clic sur une image

Message par crazypen » 24 Avril 2014, 17:37

Bonjour ! :D

J'ai une petite question qui me titille depuis quelques jours : Comment faire pour ajouter une interaction en cliquant sur un objet ?
Je m'explique un peu mieux, par exemple si dans le visual novel vous voulez mettre des indices à trouver. Imaginons une hache située au sol dans une certaine scène du VN, pour pouvoir cliquer dessus et ainsi avancer dans l'enquête. Je n'ai pas trouvé de réponse à mon problème sur internet. De plus je n'ai pas énormément cherché sur les sites anglophones parce que je ne comprends pas tout ce qui est dit...

Voilà si vous pouvez m'aider ce serait génial ! :) Cette fonction me serait vraiment utile parce que je me suis lancée dans un visual novel d'horreur où il faut trouver le meurtrier avant de se faire tuer. Donc c'est pour cela que j'ai pensé à l'idée des indices cliquables. (Et si vous voulez plus d'infos sur mon VN je serais heureuse de vous le présenter :P Surtout que pour l'instant j'en suis à des heures et des heures de travail pour pas énormément de résultats : interface graphique personnalisée, personnages neutres, décors, bulle de parole et commencement du premier chapitre !)

Bref, merci d'avance pour vos peut-être futures réponses à mon sujet :D
crazypen
 
Message(s) : 5
Inscription : 23 Février 2014, 15:00

Re: Interaction clic sur une image

Message par Antoine » 24 Avril 2014, 19:31

Bonsoir et bienvenue. :)

Pour permettre d'avoir des endroits cliquables dans l'image, on peut utiliser des imagemaps (par contre, on ne clique pas sur des objets mais sur des rectangles que l'on place où on veut).

Un exemple simple est donné ici : http://www.renpy.org/wiki/renpy/doc/ref ... y.imagemap

Code : Tout sélectionner
$ result = renpy.imagemap("fond.png", "fond_selectionne.png", [
                           (100, 100, 300, 400, "hache"),
                           (500, 100, 700, 400, "autre")
                          ])

if result == "hache":
    e "Vous avez trouvé la hache !"

elif result == "autre":
    e "Vous avez trouvé autre chose..."


Une "nouvelle" façon de faire est également disponible ici : http://www.renpy.org/doc/html/screens.h ... statements (mais je trouve que c'est un peu plus compliqué personnellement).

Ce n'est pas forcément simple, alors si ce n'est pas clair il faut pas hésiter à poser d'autres questions.
Antoine
 
Message(s) : 77
Inscription : 28 Avril 2013, 17:47
Localisation : Nanterre, France

Re: Interaction clic sur une image

Message par crazypen » 24 Avril 2014, 23:08

Merci d'avoir répondu :) Bon vu que j'ai un peu de mal encore j'ai plein de questions.

Alors si j'ai bien compris on a deux choix possibles pour la première version : trouver un objet ou trouver un autre objet. Ou alors on peut laisser qu'un seul "hotspot", ou bien en rajouter ? Pour la zone sélectionnée (la deuxième de la parenthèse), l'objet ne s'affiche que quand on passe dessus ou alors constamment ? A moins qu'il faut utiliser la fonction de zone non sélectionnée ("unselected"). Par contre je n'ai pas compris à quoi servaient les deux dernières fonctions...

Pour la deuxième version, j'ai encore moins compris. C'est une méthode plus avancée non ? Sur l'exemple donné ça nous montre les actions suivant un clic sur les préférences. Mais si c'est une image avec des coordonnées ça marche comment ?

Et aussi une dernière question pour la route : comment est-ce qu'on fait pour trouver les coordonnées des points d'une image ? J'ai cherché sur internet au moment de réaliser mon interface graphique et ils ont conseillé Inkscape mais je me suis rendue compte que rien ne correspondait... C'est d'ailleurs après des heures et des heures d'essais que je me suis rendue compte à quoi correspondaient exactement x1-y1-x2-y2. Apparemment c'est possible de trouver les coordonnées avec Ren'py... Bref si il y a une méthode à me proposer je suis partante :)
crazypen
 
Message(s) : 5
Inscription : 23 Février 2014, 15:00

Re: Interaction clic sur une image

Message par Antoine » 25 Avril 2014, 09:07

Alors si j'ai bien compris on a deux choix possibles pour la première version : trouver un objet ou trouver un autre objet.


Oui, dans l'exemple donné il y a deux zones cliquables. A chaque fois, la zone est indiquée sous la forme (x0, y0, x1, y1, result) avec (x0,y0) le point en haut à gauche du rectangle, et (x1,y1) le point en bas à droite.

Exemple :

Code : Tout sélectionner
(0,0)---------------------------------------------------------------------------------------(0,800)
|                                                                                                 |
|       (x0,y0)----------------+                                                                  |
|       |                      |                                                                  |
|       |                      |                                                                  |
|       +----------------(x1,y1)                                                                  |
|                                                                                                 |
|                                                                                                 |
|                                                                                                 |
(600,0)-----------------------------------------------------------------------------------(600,800)


On peut en effet mettre un seul hotspot ou en ajouter d'autres.

En ce qui concerne les paramètres ground, selected et unselected, il s'agit de trois images de même dimension que l'écran. La première est le fond par défaut. Quand on survole un hotspot, la zone correspondant à ce hotspot va être emprunté à l'image "selected", et les autres hotspot vont prendre l'apparence emprunté à l'image "unselected" (à vérifier, mais c'est comme ça que je le comprend) ou, si unselected est à None, à l'image "ground".

Il y a un exemple dans le tutoriel (mais avec la nouvelle méthode) : on peut voir dans "User interaction" un exemple d'imagemap. Ça se passe dans demo_ui.rpy (mais avec une façon de faire un peu complexe), et les images (là en revanche ça donnera une bonne idée de la façon de faire) sont imagemap_ground.jpg et imagemap_hover.jpg.

Par contre je n'ai pas compris à quoi servaient les deux dernières fonctions...


overlays et with_none je suppose ?

Ce sont deux booléens, il faut pas hésiter à tester les deux valeurs possibles pour voir ce que ça fait. Il semblerais qu'overlays serve à recouvrir (mais avec quoi ?) les hotspot lorsque ils sont survolés (ou l'inverse ?). Pour with_none, je ne suis pas sûr, il semblerait que cela serve à supprimer les transitions.

Pour la deuxième version, j'ai encore moins compris. C'est une méthode plus avancée non ? Sur l'exemple donné ça nous montre les actions suivant un clic sur les préférences. Mais si c'est une image avec des coordonnées ça marche comment ?


La deuxième version change un peu : les hotspot sont pas donné par exemple sous le forme (x0,y0, x1, y1) mais sous la forme (x0, y0, largeur, longueur). Dans tous les cas, si on est plus à l'aise avec la première version, on peut s'en contenter. En fait la grande différence est que la première version est l'appel à la fonction en Python, la deuxième version est du Ren'Py.

comment est-ce qu'on fait pour trouver les coordonnées des points d'une image ?


The GIMP fait très bien l'affaire pour ça (et pour bien d'autres choses aussi, du reste).
Antoine
 
Message(s) : 77
Inscription : 28 Avril 2013, 17:47
Localisation : Nanterre, France

Re: Interaction clic sur une image

Message par crazypen » 25 Avril 2014, 11:34

Merci beaucoup maintenant je comprends beaucoup mieux ! C'est normal que rien ne correspondait avec mes coordonnées : je voyais l'origine en bas à gauche... Va falloir que j'essaie tout ça. En tout cas si j'ai une autre question je n'hésiterais pas à la poser :D
crazypen
 
Message(s) : 5
Inscription : 23 Février 2014, 15:00


Retour vers Entraide

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité

cron