Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Avez-vous perdu votre e-mail d'activation ?

Auteur Sujet: Comment provoquer une "action" en cliquant sur une image ?  (Lu 4685 fois)

0 Membres et 1 Invité sur ce sujet

Virapho

  • Newbie
  • *
  • Messages: 6
    • Voir le profil
Comment provoquer une "action" en cliquant sur une image ?
« le: Mars 31, 2018, 06:38:22 pm »
Bonjour !  :)

Je voudrais faire un jeu en 2D de plateforme, et j'en suis au menu,
J'ai mis 4 boutons (Jouer, Option(s), Crédits et Quitter).
J'aimerais faire en sorte que lorsque je clique sur une image, il se passe une action.
Exemple : Cliquer sur le bouton "JOUER" fera en sorte que le menu disparaisse, il se passe un "fondu", puis se lance un prochain plan (personnage, etc..)
Hors, je ne connais pas de commande, ou je ne sais pas lesquelles mettre, et comment afin qu'il se passe une action lorsque je clique sur une image.
J'ai cherché sur Google, et trouvé quelques résultats mais ils sont en anglais et je n'arrives pas très bien à les comprendre (et je ne vois pas les topics résolus :S).
Merci d'avance pour vos réponses.
 ;)

Laurent

  • Administrator
  • Hero Member
  • *****
  • Messages: 32498
    • Voir le profil
    • SFML's website
    • E-mail
Re: Comment provoquer une "action" en cliquant sur une image ?
« Réponse #1 le: Mars 31, 2018, 06:40:58 pm »
Tu y as un peu réflechi quand même ? Qu'est-ce que tu as essayé ? Tu coinces sur quoi ?
Laurent Gomila - SFML developer

Milerius

  • Newbie
  • *
  • Messages: 23
    • Voir le profil
Re: Comment provoquer une "action" en cliquant sur une image ?
« Réponse #2 le: Avril 18, 2018, 03:16:45 pm »
Bonjour,

Une première approche qui pourrait t'être utile et en français sans te donner des indications de code: http://www.goprod.bouhours.net/?page=pattern&pat_id=16

Avec ce design pattern, tu arriveras a faire ce que tu essayes sans aucun souçis !

Virapho

  • Newbie
  • *
  • Messages: 6
    • Voir le profil
Re: Comment provoquer une "action" en cliquant sur une image ?
« Réponse #3 le: Avril 18, 2018, 07:09:00 pm »
Merci ^^ Mais je penses que je n'ai pas encore le niveau pour comprendre ce design pattern :S

Ce que j'ai fais, c'est qu'au lieu de faire une "action" (exemple : Lorsque je passes la souris par dessus un bouton, celui-ci " s'enfonce "),  j'ai mis des flêches à côté du bouton sur lequel je suis avec le clavier.

Au lancement du programme, les flêches sont déja en haut, à côté du bouton "jouer". Puis, lorsque j'appuie sur la touche "Down", la flêche descend de X pixels pour se retrouver à côté du bouton en dessous, et inversément pour la touche "Up".

Après, pour la souris, je vais faire en sorte que lorsque la souris soit entre "tel position X Y", il se passe une action (comme le bouton qui s'enfonce si la souris est entre les points X Y de l'image).

dm67x

  • Newbie
  • *
  • Messages: 5
    • Voir le profil
Re: Comment provoquer une "action" en cliquant sur une image ?
« Réponse #4 le: Avril 19, 2018, 04:28:37 pm »
Tu peux utiliser des pointeurs de fonction pour déclencher une action lors d'un click.

Par exemple :

class X {
    private:
        void (*action)();

    public:
      void setAction(void (*action)());
      void update();
}

void X::update() {
      if (sf::Mouse::isButtonPressed(sf::Mouse::Left))
         action();
}
 

Par contre il faut que tu définisses l'action avant de faire le click sinon tu auras un segfault ;)

christophedlr

  • Full Member
  • ***
  • Messages: 153
    • Voir le profil
    • E-mail
Re: Comment provoquer une "action" en cliquant sur une image ?
« Réponse #5 le: Juin 01, 2018, 11:23:01 am »
Merci ^^ Mais je penses que je n'ai pas encore le niveau pour comprendre ce design pattern :S

Ce que j'ai fais, c'est qu'au lieu de faire une "action" (exemple : Lorsque je passes la souris par dessus un bouton, celui-ci " s'enfonce "),  j'ai mis des flêches à côté du bouton sur lequel je suis avec le clavier.

Au lancement du programme, les flêches sont déja en haut, à côté du bouton "jouer". Puis, lorsque j'appuie sur la touche "Down", la flêche descend de X pixels pour se retrouver à côté du bouton en dessous, et inversément pour la touche "Up".

Après, pour la souris, je vais faire en sorte que lorsque la souris soit entre "tel position X Y", il se passe une action (comme le bouton qui s'enfonce si la souris est entre les points X Y de l'image).

Tu as en effet trouver la bonne solution. Alors pour te faire l'analogie avec les systèmes de fenêtres de windows, Linux et autres OS, il faut savoir que même si nous on ne le fait, eux derrière ils calcule le clique justement sur la position du bouton.

Si ton bouton est positionné par exemple à 30 px du bord à gauche, 30 px du bord en haut, le point en haut à gauche est donc à une position 30x30.
Maintenant regarde sa taille, il fait par exemple 100 px de large et 40 px de haut, il s'étends de 30 px du bord gauche jusqu'à 130 px de ce même bord (soit donc une largeur de 100 px, on est bon).
Pour le haut, il fait 40 px de haut en démarrant à 30 px du haut, donc il part de 30 px à 70 px en partant du haut.

Pour résumer donc ton bouton fait dans mon exemple 100x40, il démarre en 30x30 et se termine (bord inférieur droit) en 130x70. Windows par exemple dans son système de gestion des fenêtres, va donc regarder quand tu cliques, si tu es sur une des coordonnées entre le point 30x30 et le point 130x70, puis si ton bouton à un événement de clique, si c'est le cas il le déclenche alors.


Dans le domaine du jeux vidéo, ce système n'est pas de base en place par l'OS, il faut donc le coder. A toi donc de coder une fonction qui va vérifier les coordonnées de ta souris, si tu es entre 30x30 et 130x70, alors tu es bien sur le bouton, a toi ensuite de gérer le clique, double clique, clique droit, clique du milieu, le "hover" (passer juste la souris sur le bouton) et j'en passe.



Le mieux, tu te fait un petit projet totalement séparé (un programme de test), où tu gères un bouton comme ça, puis tu regardes pour en gérer un second. A partir de là, tu verras de la redondance de code, ben tu regardes alors si tu n'as pas moyen de faire une fonction qui sera utilisée par les deux boutons, des informations seraient alors nécessaire comme la taille du bouton et sa position de départ (coin en haut à gauche).

Après tu peux faire évoluer, avec une classe pour gérer ton bouton. Cette dernière permettrait alors de créer visuellement le bouton, gérer la position de la souris donc savoir si on est sur le bouton ou non, et pourquoi pas le clique et autres.

Je reprends l'analogie avec les OS (exemple Windows ce qui est bien plus parlant pour la plupart d'entre vous qui êtes sous windows ;) ), l'API du système fournis déjà des fonctions pour la gestion du clic (ces fameux événements), mais derrière le code de windows fait exactement ce dont on vient de parler :

Dans la boucle principale du programme (car oui les programmes ont obligatoirement une boucle événementiel comme on le fait avec SFML), l'API gère l'affichage du bouton mais aussi la position de la souris, le clavier etc. et intercepte (comme SFML) les cliques et autres, le tout permettant au travers des "événements", de gérer le fait qu'on a cliquer, fait un clique droit, passer la souris dessus etc.

Du coup la première chose donc que je te propose : fait un truc à part pour gérer 1 bouton (cherche pas à faire une fonction pour l'instant), puis gère un second bouton dans ta fenêtre (en plus du premier avec éventuellement un autre événement genre un avec clique gauche, l'autre clique droit).

Puis relis ton code, tu constateras alors du code identique ou quasi identique, voit donc ensuite pour faire une fonction où tu as juste à fournir des infos en paramètres pour qu'il sache sur quoi travailler. Il ne reste donc de propre à tes deux boutons que les événements. Ben regarde alors si tu as pas une autre fonction possible pour cela.

Quand tu auras réussi à le faire, suffit juste de rassembler le tout dans une classe ; reste encore le fait que tu appels plusieurs fonctions : une pour vérifier les coordonnées et une pour déclencher une action (les paramètres indiques la fonction à appeler pour l'action). Ben à voir si tu n'as pas la possibilité alors de faire une autre fonction par-dessus, qui va elle prendre toutes les informations nécessaire, appeler la première pour vérifier les coordonnées, et appeler la seconde si on est dans le cas des coordonnées, pour vérifier si une action est associée.

Arrivée déjà aux deux fonctions totalement séparées, tu as un début d'API utilisable en C (ce qui cadre avec le cas de l'OS), quand tu le passes en tan que classe qui gère le tout, tu as un composant C++ qui va gérer à la fois le visuel, les coordonnées et les actions (les événements). Tu peux ensuite réutiliser ce composant dans tes autres projets et faire pareil pour les fenêtres, les combobox, les checkbox et j'en passe suivant tes besoins.

Le tout définissant alors au final une API de gestion des fenêtres en SFML, et tu as devant toi un projet intéressant à séparer de tes autres projets pour le montrer à la communauté (en plus ;) ).