Labomedia Ressources

Outils pour utilisateurs

Outils du site

Piste :
godot_listes_et_boutons

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
godot_listes_et_boutons [2018/09/04 13:48] – [Préparation] sergegodot_listes_et_boutons [2020/12/02 14:52] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. serge
Ligne 18: Ligne 18:
 Commencez par **[[godot_creer_un_projet|Créer un projet]]**, aux dimensions 600*600 et intitulé Diaporama. Commencez par **[[godot_creer_un_projet|Créer un projet]]**, aux dimensions 600*600 et intitulé Diaporama.
  
-[[trombines.zip|Téléchargez le dossier d'image]] et extrayez le dans le dossier data.+{{media_13:trombines.zip|Téléchargez le dossier d'image}} et extrayez le dans le dossier data.
  
 Enfin, **attachez un script à la scène "main"**. Enfin, **attachez un script à la scène "main"**.
Ligne 36: Ligne 36:
 **Créez une variable pour chacune de vos idoles** et le code devrait ressembler à ça : **Créez une variable pour chacune de vos idoles** et le code devrait ressembler à ça :
  
-{{:godot_diapo_a.png?600|godot_diapo_a.png godot_diapo_a.png}}+{{media_04:godot_diapo_a.png?600|godot_diapo_a.png godot_diapo_a.png}}
  
 Il s'agit maintenant de **créer un Sprite** qui va pouvoir afficher ces images. Plutôt que de créer une nouvelle scène, nous allons cette fois créer le Sprite **directement via la code**. Premièrement, nous allons **créer une variable** qui permettra de le stocker. Nous pouvons la laisser vide pour l'instant. Elle s'appellera s (pour Sprite). Il s'agit maintenant de **créer un Sprite** qui va pouvoir afficher ces images. Plutôt que de créer une nouvelle scène, nous allons cette fois créer le Sprite **directement via la code**. Premièrement, nous allons **créer une variable** qui permettra de le stocker. Nous pouvons la laisser vide pour l'instant. Elle s'appellera s (pour Sprite).
  
-{{:godot_diapo_b.png?600|godot_diapo_b.png godot_diapo_b.png}}+{{media_04:godot_diapo_b.png?600|godot_diapo_b.png godot_diapo_b.png}}
  
 Nous allons maintenant nous occuper de la régler. Dans la fonction _ready():, nous allons d'abord indiquer à Godot qu'il s'agit d'un Sprite, en utilisant la commande **  Sprite.new()**.   .new() permet de rajouter des nœuds à l'intérieur même du code. Nous la réutiliserons tout-à-l'heure. Nous allons maintenant nous occuper de la régler. Dans la fonction _ready():, nous allons d'abord indiquer à Godot qu'il s'agit d'un Sprite, en utilisant la commande **  Sprite.new()**.   .new() permet de rajouter des nœuds à l'intérieur même du code. Nous la réutiliserons tout-à-l'heure.
Ligne 60: Ligne 60:
 Le code ressemble désormais à cela (n'oubliez pas d'indenter !) : Le code ressemble désormais à cela (n'oubliez pas d'indenter !) :
  
-{{:godot_diapo_c.png?600|godot_diapo_c.png godot_diapo_c.png}}+{{media_04:godot_diapo_c.png?600|godot_diapo_c.png godot_diapo_c.png}}
  
 Et le programme affiche bien la trombine de l'homme le plus classe du monde : Et le programme affiche bien la trombine de l'homme le plus classe du monde :
  
-{{:godot_diapo_wayne.png?600|godot_diapo_wayne.png godot_diapo_wayne.png}}+{{media_04:godot_diapo_wayne.png?600|godot_diapo_wayne.png godot_diapo_wayne.png}}
  
 Si vous **changez la variable à l'intérieur de   set_texture()**, par exemple en mettant   s.set_texture(   image4   ), le programme change également : Si vous **changez la variable à l'intérieur de   set_texture()**, par exemple en mettant   s.set_texture(   image4   ), le programme change également :
  
-{{:godot_diapo_d.png?600|godot_diapo_d.png godot_diapo_d.png}}+{{media_04:godot_diapo_d.png?600|godot_diapo_d.png godot_diapo_d.png}}
  
-{{:godot_diapo_gable.png?600|godot_diapo_gable.png godot_diapo_gable.png}}+{{media_04:godot_diapo_gable.png?600|godot_diapo_gable.png godot_diapo_gable.png}}
  
 C'est grâce à ce principe que nous allons créer notre diaporama. Pour cela, nous n'allons pas directement nous servir des variables, mais **les stocker dans une liste**, comme ceci : C'est grâce à ce principe que nous allons créer notre diaporama. Pour cela, nous n'allons pas directement nous servir des variables, mais **les stocker dans une liste**, comme ceci :
  
-{{:godot_diapo_e.png?600|godot_diapo_e.png godot_diapo_e.png}}+{{media_04:godot_diapo_e.png?600|godot_diapo_e.png godot_diapo_e.png}}
  
 **Une liste permet de stocker une suite de variable, puis d'y accéder en utilisant un index**. **Une liste permet de stocker une suite de variable, puis d'y accéder en utilisant un index**.
Ligne 94: Ligne 94:
 Revenons à nos moutons et essayons de modifier notre fonction   set_texture() : Revenons à nos moutons et essayons de modifier notre fonction   set_texture() :
  
-{{:godot_diapo_f.png?600|godot_diapo_f.png godot_diapo_f.png}}+{{media_04:godot_diapo_f.png?600|godot_diapo_f.png godot_diapo_f.png}}
  
-{{:godot_diapo_redford.png?600|godot_diapo_redford.png godot_diapo_redford.png}}+{{media_04:godot_diapo_redford.png?600|godot_diapo_redford.png godot_diapo_redford.png}}
  
 Haha, sacré Robert ! Bon, plus qu'une étape avant que vous ne compreniez l'intérêt de la méthode. **Créez une nouvelle variable,   image_n**, égale à 0, et **remplacez   set_texture(   image_list[2]   ) par   set_texture(   image_list[image_n]   )**. Haha, sacré Robert ! Bon, plus qu'une étape avant que vous ne compreniez l'intérêt de la méthode. **Créez une nouvelle variable,   image_n**, égale à 0, et **remplacez   set_texture(   image_list[2]   ) par   set_texture(   image_list[image_n]   )**.
  
-{{:godot_diapo_g.png?600|godot_diapo_g.png godot_diapo_g.png}}+{{media_04:godot_diapo_g.png?600|godot_diapo_g.png godot_diapo_g.png}}
  
 Lancez la scène principale pour retrouver **l'homme le plus classe du monde**, bien vivant. Lancez la scène principale pour retrouver **l'homme le plus classe du monde**, bien vivant.
  
-{{:godot_diapo_wayne.png?600|godot_diapo_wayne.png godot_diapo_wayne.png}}+{{media_04:godot_diapo_wayne.png?600|godot_diapo_wayne.png godot_diapo_wayne.png}}
  
 Je pense que vous avez saisi : nous n'avons maintenant plus qu'à **modifier   image_n pour changer l'image** du Sprite. En modifiant image_n, cela modifiera également l'index que nous allons chercher en tapant   liste_image[image_n], ce qui modifiera donc l'image que nous attachons au Sprite en faisant   set_texture(   liste_image[image_n]   ). **Les deux boutons ne servirons donc qu'à augmenter ou diminuer   image_n de 1**. Je pense que vous avez saisi : nous n'avons maintenant plus qu'à **modifier   image_n pour changer l'image** du Sprite. En modifiant image_n, cela modifiera également l'index que nous allons chercher en tapant   liste_image[image_n], ce qui modifiera donc l'image que nous attachons au Sprite en faisant   set_texture(   liste_image[image_n]   ). **Les deux boutons ne servirons donc qu'à augmenter ou diminuer   image_n de 1**.
Ligne 114: Ligne 114:
 Le plus simple est généralement de **regrouper tous les contrôles dans une fenêtre** dédiée à ceux-ci. Il existe un nœud pour ce faire : Panel. Commençons par en créer un dans la fonction   _ready(): : Le plus simple est généralement de **regrouper tous les contrôles dans une fenêtre** dédiée à ceux-ci. Il existe un nœud pour ce faire : Panel. Commençons par en créer un dans la fonction   _ready(): :
  
-{{:godot_diapo_h.png?600|godot_diapo_h.png godot_diapo_h.png}}+{{media_04:godot_diapo_h.png?600|godot_diapo_h.png godot_diapo_h.png}}
  
 Si nous lancions la scène maintenant, il n’apparaîtrait pas, car nous ne lui avons pas assigné de dimensions. Les contrôles sont tous des rectangles, qui se positionnent à l'aide de la fonction   set_margin(). **  set_margin() prend deux arguments**, c'est-à-dire qu'il y aura deux nombres entre parenthèses : **le premier définit le bord du rectangle que nous souhaitons positionner, le deuxième sa position en pixel**. Le premier nombre peut être 0 pour le bord gauche, 1 pour le bord haut, 2 pour le bord droit et 3 pour le bord gauche. Si nous lancions la scène maintenant, il n’apparaîtrait pas, car nous ne lui avons pas assigné de dimensions. Les contrôles sont tous des rectangles, qui se positionnent à l'aide de la fonction   set_margin(). **  set_margin() prend deux arguments**, c'est-à-dire qu'il y aura deux nombres entre parenthèses : **le premier définit le bord du rectangle que nous souhaitons positionner, le deuxième sa position en pixel**. Le premier nombre peut être 0 pour le bord gauche, 1 pour le bord haut, 2 pour le bord droit et 3 pour le bord gauche.
Ligne 134: Ligne 134:
 panel.set_margin( 3, 590 )<html></code></html> panel.set_margin( 3, 590 )<html></code></html>
  
-{{:godot_diapo_i.png?600|godot_diapo_i.png godot_diapo_i.png}}+{{media_04:godot_diapo_i.png?600|godot_diapo_i.png godot_diapo_i.png}}
  
 Lorsque nous lançons le programme, celle-ci apparaît maintenant aux bonnes positions ! Lorsque nous lançons le programme, celle-ci apparaît maintenant aux bonnes positions !
  
-{{:godot_diapo_j.png?600|godot_diapo_j.png godot_diapo_j.png}}+{{media_04:godot_diapo_j.png?600|godot_diapo_j.png godot_diapo_j.png}}
  
 Nous allons maintenant **rajouter un premier bouton**,   bouton_gauche. Nous n'allons cependant pas l'ajouter à la scène. **Nous allons l'ajouter à l'intérieur de panel** : Nous allons maintenant **rajouter un premier bouton**,   bouton_gauche. Nous n'allons cependant pas l'ajouter à la scène. **Nous allons l'ajouter à l'intérieur de panel** :
  
-{{:godot_diapo_k.png?600|godot_diapo_k.png godot_diapo_k.png}}+{{media_04:godot_diapo_k.png?600|godot_diapo_k.png godot_diapo_k.png}}
  
 Lançons le programme sans avoir précisé la position du bouton. Lançons le programme sans avoir précisé la position du bouton.
  
-{{:godot_diapo_l.png?600|godot_diapo_l.png godot_diapo_l.png}}+{{media_04:godot_diapo_l.png?600|godot_diapo_l.png godot_diapo_l.png}}
  
 Celui-ci n'apparaît pas en haut à gauche de la fenêtre, mais en haut à gauche de panel ! En effet, **rajouter un contrôle à l'intérieur d'un autre contrôle rend sa position relative au contrôle auquel il a été ajouté**. Plus précisément, elle la rend relative au coin haut/gauche du contrôle parent. Celui-ci n'apparaît pas en haut à gauche de la fenêtre, mais en haut à gauche de panel ! En effet, **rajouter un contrôle à l'intérieur d'un autre contrôle rend sa position relative au contrôle auquel il a été ajouté**. Plus précisément, elle la rend relative au coin haut/gauche du contrôle parent.
Ligne 156: Ligne 156:
 bouton_gauche.set_margin( 1, 10 )<html></code></html> bouton_gauche.set_margin( 1, 10 )<html></code></html>
  
-{{:godot_diapo_m.png?600|godot_diapo_m.png godot_diapo_m.png}}+{{media_04:godot_diapo_m.png?600|godot_diapo_m.png godot_diapo_m.png}}
  
-{{:godot_diapo_n.png?600|godot_diapo_n.png godot_diapo_n.png}}+{{media_04:godot_diapo_n.png?600|godot_diapo_n.png godot_diapo_n.png}}
  
 Le bord gauche du bouton est maintenant situé à 10 pixels du bord gauche du panel, et son bord haut à 10 pixel du bord haut du panel. Bien. Maintenant, élargissons le : Le bord gauche du bouton est maintenant situé à 10 pixels du bord gauche du panel, et son bord haut à 10 pixel du bord haut du panel. Bien. Maintenant, élargissons le :
Ligne 164: Ligne 164:
   bouton_gauche.set_margin(   2,   195   )   bouton_gauche.set_margin(   2,   195   )
  
-{{:godot_diapo_o.png?600|godot_diapo_o.png godot_diapo_o.png}}+{{media_04:godot_diapo_o.png?600|godot_diapo_o.png godot_diapo_o.png}}
  
 Le bord droit du bouton est maintenant situé à 195 pixel du bord gauche du panel. Le bord droit du bouton est maintenant situé à 195 pixel du bord gauche du panel.
  
-{{:godot_diapo_p.png?600|godot_diapo_p.png godot_diapo_p.png}}+{{media_04:godot_diapo_p.png?600|godot_diapo_p.png godot_diapo_p.png}}
  
 Nous pourrions faire la même chose pour son bord bas mais **il existe une meilleure méthode**. Par défaut, les bords bas et haut d'un contrôle sont situés relativement au bord haut de leur contrôle parent. Mais **la fonction   set_anchor() permet de changer ce réglage** : Nous pourrions faire la même chose pour son bord bas mais **il existe une meilleure méthode**. Par défaut, les bords bas et haut d'un contrôle sont situés relativement au bord haut de leur contrôle parent. Mais **la fonction   set_anchor() permet de changer ce réglage** :
Ligne 180: Ligne 180:
 Nous mettons maintenant le bord bas du bouton ( 3 ) à 10 pixels de décalage. Nous mettons maintenant le bord bas du bouton ( 3 ) à 10 pixels de décalage.
  
-{{:godot_diapo_q.png?600|godot_diapo_q.png godot_diapo_q.png}}+{{media_04:godot_diapo_q.png?600|godot_diapo_q.png godot_diapo_q.png}}
  
 En lançant la scène principale, on remarque que le bouton est maintenant aux bonnes dimensions ! Quel est l'intérêt de cette méthode ? Eh bien **si nous changions maintenant la taille du panel, cela redimensionnerai également le bouton**, puisque la taille du bouton est définie en fonction de la taille du panel ! En lançant la scène principale, on remarque que le bouton est maintenant aux bonnes dimensions ! Quel est l'intérêt de cette méthode ? Eh bien **si nous changions maintenant la taille du panel, cela redimensionnerai également le bouton**, puisque la taille du bouton est définie en fonction de la taille du panel !
  
-{{:godot_diapo_r.png?600|godot_diapo_r.png godot_diapo_r.png}}+{{media_04:godot_diapo_r.png?600|godot_diapo_r.png godot_diapo_r.png}}
  
 Maintenant que nous avons notre bouton, il est l'heure de le **connecter**. Comment cela fonctionne-t-il ? **Les contrôles**, lorsqu'ils reçoivent une commande, **émettent un signal**. Dans le cas d'un bouton, il émettra le signal   "button_down" lorsque l'on cliquera dessus. La ligne de commande suivante va permettre de connecter le signal   "button_down" à une fonction que nous appellerons   "photo_precedente" : Maintenant que nous avons notre bouton, il est l'heure de le **connecter**. Comment cela fonctionne-t-il ? **Les contrôles**, lorsqu'ils reçoivent une commande, **émettent un signal**. Dans le cas d'un bouton, il émettra le signal   "button_down" lorsque l'on cliquera dessus. La ligne de commande suivante va permettre de connecter le signal   "button_down" à une fonction que nous appellerons   "photo_precedente" :
  
-{{:godot_diapo_s.png?600|godot_diapo_s.png godot_diapo_s.png}}+{{media_04:godot_diapo_s.png?600|godot_diapo_s.png godot_diapo_s.png}}
  
 Cela signifie que **lorsque   bouton_gauche émettra le signal   "button_down"**, **le nœud   self** (qui fait référence ici à main.tscn) **exécutera la fonction   photo_precedente()** . Que nous allons maintenant créer : Cela signifie que **lorsque   bouton_gauche émettra le signal   "button_down"**, **le nœud   self** (qui fait référence ici à main.tscn) **exécutera la fonction   photo_precedente()** . Que nous allons maintenant créer :
  
-{{:godot_diapo_t.png?600|godot_diapo_t.png godot_diapo_t.png}}+{{media_04:godot_diapo_t.png?600|godot_diapo_t.png godot_diapo_t.png}}
  
 Comme nous l'avions dit, le but de ce bouton est de baisser   image_n de 1. Il y a cependant un risque. Si   image_n est à 0, elle passera à -1. Or, **il n'existe pas d'index -1** dans   liste_image, ce qui risque de générer une erreur. Dans le cas où   image_n serait égale à 0, nous aimerions qu'elle repasse à l'index maximum de   liste_image. Il existe une fonction qui permet de récupérer l'index maximum d'une list : **  .size()** .   liste_image.size() **donnera un nombre égal au nombre de variable dans   image_list**, en partant de 1. Comme l'index part de 0, il faudra donc, si   image_n est égale à 0 et que nous cliquons sur le bouton pour aller à l'image précédente, que **  image_n devienne égale à   liste_image.size()   -   1** . Dans le cas contraire, il faut baisser   image_n de 1 : Comme nous l'avions dit, le but de ce bouton est de baisser   image_n de 1. Il y a cependant un risque. Si   image_n est à 0, elle passera à -1. Or, **il n'existe pas d'index -1** dans   liste_image, ce qui risque de générer une erreur. Dans le cas où   image_n serait égale à 0, nous aimerions qu'elle repasse à l'index maximum de   liste_image. Il existe une fonction qui permet de récupérer l'index maximum d'une list : **  .size()** .   liste_image.size() **donnera un nombre égal au nombre de variable dans   image_list**, en partant de 1. Comme l'index part de 0, il faudra donc, si   image_n est égale à 0 et que nous cliquons sur le bouton pour aller à l'image précédente, que **  image_n devienne égale à   liste_image.size()   -   1** . Dans le cas contraire, il faut baisser   image_n de 1 :
  
-{{:godot_diapo_u.png?600|godot_diapo_u.png godot_diapo_u.png}}+{{media_04:godot_diapo_u.png?600|godot_diapo_u.png godot_diapo_u.png}}
  
 Enfin, comme l'image a changée, il faut **mettre à jour le Sprite** : Enfin, comme l'image a changée, il faut **mettre à jour le Sprite** :
  
-{{:godot_diapo_v.png?600|godot_diapo_v.png godot_diapo_v.png}}+{{media_04:godot_diapo_v.png?600|godot_diapo_v.png godot_diapo_v.png}}
  
 Lancez le programme et appuyez sur le bouton : vous pouvez maintenant, dans un sens, naviguer entre les images ! Lancez le programme et appuyez sur le bouton : vous pouvez maintenant, dans un sens, naviguer entre les images !
Ligne 206: Ligne 206:
 Maintenant, nous allons nous occuper du deuxième bouton. **Copiez-collez le premier bouton** et changez le nom de la variable par   bouton_droite: Maintenant, nous allons nous occuper du deuxième bouton. **Copiez-collez le premier bouton** et changez le nom de la variable par   bouton_droite:
  
-{{:godot_diapo_w.png?600|godot_diapo_w.png godot_diapo_w.png}}+{{media_04:godot_diapo_w.png?600|godot_diapo_w.png godot_diapo_w.png}}
  
 Les bords haut et bas sont aux bonnes positions, mais les bords gauche et droit sont aux mêmes endroits que ceux du côté gauche. Pourtant, il n'est quasiment pas nécessaire de toucher aux dimensions du bouton. **Plutôt que de positionner ses côtés par rapport au côté gauche du panel, nous allons les positionner par rapport au côté droit du panel** : Les bords haut et bas sont aux bonnes positions, mais les bords gauche et droit sont aux mêmes endroits que ceux du côté gauche. Pourtant, il n'est quasiment pas nécessaire de toucher aux dimensions du bouton. **Plutôt que de positionner ses côtés par rapport au côté gauche du panel, nous allons les positionner par rapport au côté droit du panel** :
Ligne 216: Ligne 216:
 Puis **intervertir les valeurs** de   set_margin(   0,   a   ) et   set_margin(   2,   b   ) : Puis **intervertir les valeurs** de   set_margin(   0,   a   ) et   set_margin(   2,   b   ) :
  
-{{:godot_diapo_x.png?600|godot_diapo_x.png godot_diapo_x.png}}+{{media_04:godot_diapo_x.png?600|godot_diapo_x.png godot_diapo_x.png}}
  
 Quand nous lançons le programme, les deux boutons sont correctement placés. Quand nous lançons le programme, les deux boutons sont correctement placés.
  
-{{:godot_diapo_y.png?600|godot_diapo_y.png godot_diapo_y.png}}+{{media_04:godot_diapo_y.png?600|godot_diapo_y.png godot_diapo_y.png}}
  
 Maintenant, il s'agit de **changer la connexion du bouton droit** pour la fonction   "photo_suivante". Maintenant, il s'agit de **changer la connexion du bouton droit** pour la fonction   "photo_suivante".
  
-{{:godot_diapo_z.png?600|godot_diapo_z.png godot_diapo_z.png}}+{{media_04:godot_diapo_z.png?600|godot_diapo_z.png godot_diapo_z.png}}
  
 Ensuite, **copier-coller   photo_precedente()**, changer son nom par   photo_suivante(), et **inverser sa logique** : si   image_n est égale à   liste_image.size()   -   1, alors   image_n   =   0. Sinon, on augmente   image_n de 1. Puis on met à jour l'image ! Ensuite, **copier-coller   photo_precedente()**, changer son nom par   photo_suivante(), et **inverser sa logique** : si   image_n est égale à   liste_image.size()   -   1, alors   image_n   =   0. Sinon, on augmente   image_n de 1. Puis on met à jour l'image !
  
-{{:godot_diapo_aa.png?600|godot_diapo_aa.png godot_diapo_aa.png}}+{{media_04:godot_diapo_aa.png?600|godot_diapo_aa.png godot_diapo_aa.png}}
  
 Voilà, vous pouvez maintenant lancer le programme et admirer **le trombinoscope de vos rêves** ! Voilà, vous pouvez maintenant lancer le programme et admirer **le trombinoscope de vos rêves** !
godot_listes_et_boutons.1536068911.txt.gz · Dernière modification : 2018/09/04 13:48 de serge