godot_listes_et_boutons
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
godot_listes_et_boutons [2018/09/04 13:46] – [Préparation] serge | godot_listes_et_boutons [2020/12/02 14:52] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. serge | ||
---|---|---|---|
Ligne 16: | Ligne 16: | ||
===== Préparation ===== | ===== Préparation ===== | ||
- | Commencez par **[[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' | + | {{media_13: |
Enfin, **attachez un script à la scène " | Enfin, **attachez un script à la scène " | ||
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 : | ||
- | {{: | + | {{media_04: |
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, | 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, | ||
- | {{: | + | {{media_04: |
Nous allons maintenant nous occuper de la régler. Dans la fonction _ready():, nous allons d' | Nous allons maintenant nous occuper de la régler. Dans la fonction _ready():, nous allons d' | ||
Ligne 60: | Ligne 60: | ||
Le code ressemble désormais à cela (n' | Le code ressemble désormais à cela (n' | ||
- | {{: | + | {{media_04: |
Et le programme affiche bien la trombine de l' | Et le programme affiche bien la trombine de l' | ||
- | {{: | + | {{media_04: |
Si vous **changez la variable à l' | Si vous **changez la variable à l' | ||
- | {{: | + | {{media_04: |
- | {{: | + | {{media_04: |
C'est grâce à ce principe que nous allons créer notre diaporama. Pour cela, nous n' | C'est grâce à ce principe que nous allons créer notre diaporama. Pour cela, nous n' | ||
- | {{: | + | {{media_04: |
**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 | Revenons à nos moutons et essayons de modifier notre fonction | ||
- | {{: | + | {{media_04: |
- | {{: | + | {{media_04: |
Haha, sacré Robert ! Bon, plus qu'une étape avant que vous ne compreniez l' | Haha, sacré Robert ! Bon, plus qu'une étape avant que vous ne compreniez l' | ||
- | {{: | + | {{media_04: |
Lancez la scène principale pour retrouver **l' | Lancez la scène principale pour retrouver **l' | ||
- | {{: | + | {{media_04: |
Je pense que vous avez saisi : nous n' | Je pense que vous avez saisi : nous n' | ||
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 | 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 | ||
- | {{: | + | {{media_04: |
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 | 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 | ||
Ligne 134: | Ligne 134: | ||
panel.set_margin( 3, 590 )< | panel.set_margin( 3, 590 )< | ||
- | {{: | + | {{media_04: |
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 ! | ||
- | {{: | + | {{media_04: |
Nous allons maintenant **rajouter un premier bouton**, | Nous allons maintenant **rajouter un premier bouton**, | ||
- | {{: | + | {{media_04: |
Lançons le programme sans avoir précisé la position du bouton. | Lançons le programme sans avoir précisé la position du bouton. | ||
- | {{: | + | {{media_04: |
Celui-ci n' | Celui-ci n' | ||
Ligne 156: | Ligne 156: | ||
bouton_gauche.set_margin( 1, 10 )< | bouton_gauche.set_margin( 1, 10 )< | ||
- | {{: | + | {{media_04: |
- | {{: | + | {{media_04: |
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( | bouton_gauche.set_margin( | ||
- | {{: | + | {{media_04: |
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. | ||
- | {{: | + | {{media_04: |
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 | 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 | ||
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. | ||
- | {{: | + | {{media_04: |
En lançant la scène principale, on remarque que le bouton est maintenant aux bonnes dimensions ! Quel est l' | En lançant la scène principale, on remarque que le bouton est maintenant aux bonnes dimensions ! Quel est l' | ||
- | {{: | + | {{media_04: |
Maintenant que nous avons notre bouton, il est l' | Maintenant que nous avons notre bouton, il est l' | ||
- | {{: | + | {{media_04: |
Cela signifie que **lorsque | Cela signifie que **lorsque | ||
- | {{: | + | {{media_04: |
Comme nous l' | Comme nous l' | ||
- | {{: | + | {{media_04: |
Enfin, comme l' | Enfin, comme l' | ||
- | {{: | + | {{media_04: |
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 | Maintenant, nous allons nous occuper du deuxième bouton. **Copiez-collez le premier bouton** et changez le nom de la variable par | ||
- | {{: | + | {{media_04: |
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 | Puis **intervertir les valeurs** de | ||
- | {{: | + | {{media_04: |
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. | ||
- | {{: | + | {{media_04: |
Maintenant, il s'agit de **changer la connexion du bouton droit** pour la fonction | Maintenant, il s'agit de **changer la connexion du bouton droit** pour la fonction | ||
- | {{: | + | {{media_04: |
Ensuite, **copier-coller | Ensuite, **copier-coller | ||
- | {{: | + | {{media_04: |
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.1536068819.txt.gz · Dernière modification : 2018/09/04 13:46 de serge