Outils pour utilisateurs

Outils du site


godot_scenes_et_scripts

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édentes Révision précédente
godot_scenes_et_scripts [2018/10/24 14:28]
serge [Code final]
godot_scenes_et_scripts [2020/02/07 17:35]
serge ↷ Liens modifiés en raison d'un déplacement.
Ligne 21: Ligne 21:
 Allez dans l'​onglet **"​Scène"​ et cliquez "​Nouvelle Scène"​**. Allez dans l'​onglet **"​Scène"​ et cliquez "​Nouvelle Scène"​**.
  
-{{:​godot_instance_a.png?​600|godot_instance_a.png}}+{{media_04:​godot_instance_a.png?​600|godot_instance_a.png}}
  
 Dans l'​onglet "​Scène",​ **ajoutez un nouveau nœud**. Cette fois-ci, **servez-vous de la barre de recherche pour sélectionner "​Sprite"​**. C'est le type de nœud qui permet de manipuler des images. Renommez-le "​flocon"​ et sauvegardez-le dans le dossier "​core",​ à côté de la scène "​pluie"​. Dans l'​onglet "​Scène",​ **ajoutez un nouveau nœud**. Cette fois-ci, **servez-vous de la barre de recherche pour sélectionner "​Sprite"​**. C'est le type de nœud qui permet de manipuler des images. Renommez-le "​flocon"​ et sauvegardez-le dans le dossier "​core",​ à côté de la scène "​pluie"​.
  
-{{:​godot_instance_b.png?​600|godot_instance_b.png}}+{{media_04:​godot_instance_b.png?​600|godot_instance_b.png}}
  
 Vous pouvez maintenant alterner, dans l'​éditeur,​ entre les deux scènes facilement. Vous pouvez maintenant alterner, dans l'​éditeur,​ entre les deux scènes facilement.
  
-{{:​godot_instance_c.png?​400|godot_instance_c.png}}+{{media_04:​godot_instance_c.png?​400|godot_instance_c.png}}
  
 Mais nous restons pour l'​instant sur la scène "​flocon"​. Nous pourrions utiliser les différents onglets pour changer les paramètres du Sprite, par exemple l'​image qu'il affiche, mais ce ne serait pas tout à fait une bonne idée. Ces onglets sont faits pour travailler plus rapidement, et permettent, dirons-nous,​ de manipuler du code en cliquant sur des boutons. Mais développer un jeu vidéo passe nécessairement par du code, et l'​idée ici est justement de se faire la main sur les principes de base du code. Le **code est contenu dans un script**, et nous allons ici en attacher un au Sprite "​flocon",​ en **cliquant sur le petit parchemin surmonté d'un plus**, en haut à droite de l'​onglet scène, en ayant sélectionné "​flocon"​. Mais nous restons pour l'​instant sur la scène "​flocon"​. Nous pourrions utiliser les différents onglets pour changer les paramètres du Sprite, par exemple l'​image qu'il affiche, mais ce ne serait pas tout à fait une bonne idée. Ces onglets sont faits pour travailler plus rapidement, et permettent, dirons-nous,​ de manipuler du code en cliquant sur des boutons. Mais développer un jeu vidéo passe nécessairement par du code, et l'​idée ici est justement de se faire la main sur les principes de base du code. Le **code est contenu dans un script**, et nous allons ici en attacher un au Sprite "​flocon",​ en **cliquant sur le petit parchemin surmonté d'un plus**, en haut à droite de l'​onglet scène, en ayant sélectionné "​flocon"​.
  
-{{:​godot_instance_d.png?​400|godot_instance_d.png}}+{{media_04:​godot_instance_d.png?​400|godot_instance_d.png}}
  
 On nous propose de créer un nouveau fichier nommé "​flocon.gd",​ dans le dossier "​core"​. Ce fichier est le script en lui-même : il déterminera comment se comporte la scène "​flocon"​. Appuyez sur "​Créer"​. On nous propose de créer un nouveau fichier nommé "​flocon.gd",​ dans le dossier "​core"​. Ce fichier est le script en lui-même : il déterminera comment se comporte la scène "​flocon"​. Appuyez sur "​Créer"​.
  
-{{:​godot_instance_e.png?​400|godot_instance_e.png}}+{{media_04:​godot_instance_e.png?​400|godot_instance_e.png}}
  
 Vous voilà dans le code en lui-même ! Vous voilà dans le code en lui-même !
  
-{{:​godot_instance_f.png?​600|godot_instance_f.png}}+{{media_04:​godot_instance_f.png?​600|godot_instance_f.png}}
  
 Les **lignes en blanc sont des commentaires** pour rappeler aux débutants comment le script s'​organise. Comme vous êtes avec moi, **commencez par les enlever**, pour ne garder que les éléments utiles. Le code ressemble maintenant à ça : Les **lignes en blanc sont des commentaires** pour rappeler aux débutants comment le script s'​organise. Comme vous êtes avec moi, **commencez par les enlever**, pour ne garder que les éléments utiles. Le code ressemble maintenant à ça :
  
-{{:​godot_instance_g.png?​600|godot_instance_g.png}}+{{media_04:​godot_instance_g.png?​600|godot_instance_g.png}}
  
 La première ligne, **  extends ​  ​Sprite,​ indique que le script est attaché à un nœud de type Sprite** et, en tant que tel, contient des fonctionnalités préconçues qui lui sont adaptées, par exemple la possibilité de lui attribuer une image. La première ligne, **  extends ​  ​Sprite,​ indique que le script est attaché à un nœud de type Sprite** et, en tant que tel, contient des fonctionnalités préconçues qui lui sont adaptées, par exemple la possibilité de lui attribuer une image.
Ligne 59: Ligne 59:
 Retournez maintenant dans l'​éditeur. Elle apparaît dans l'​onglet **"​Système de fichiers",​ qui représente le dossier du projet**. Vous pouvez si vous le souhaitez copier le chemin qui permet d'y accéder. Retournez maintenant dans l'​éditeur. Elle apparaît dans l'​onglet **"​Système de fichiers",​ qui représente le dossier du projet**. Vous pouvez si vous le souhaitez copier le chemin qui permet d'y accéder.
  
-{{:​godot_instance_h.png?​400|godot_instance_h.png}}+{{media_04:​godot_instance_h.png?​400|godot_instance_h.png}}
  
 Un petit mot sur les chemins. **Les chemins dans Godot sont toujours représentés sous forme de string**, c'​est-à-dire une suite de caractères. En tant que tels, ils commencent et terminent par des guillemets ( " ). Le chemin commence toujours par <​nowiki>​res://</​nowiki>,​ qui fait référence au dossier du jeu. Ensuite viennent le nom du ou des dossiers, puis le nom du fichier, chacun séparés par un slash ( / ). Donc pour accéder au fichier flocon.png, situé dans le dossier data, situé dans le dossier du projet, nous utilisons le chemin suivant: ​ Un petit mot sur les chemins. **Les chemins dans Godot sont toujours représentés sous forme de string**, c'​est-à-dire une suite de caractères. En tant que tels, ils commencent et terminent par des guillemets ( " ). Le chemin commence toujours par <​nowiki>​res://</​nowiki>,​ qui fait référence au dossier du jeu. Ensuite viennent le nom du ou des dossiers, puis le nom du fichier, chacun séparés par un slash ( / ). Donc pour accéder au fichier flocon.png, situé dans le dossier data, situé dans le dossier du projet, nous utilisons le chemin suivant: ​
Ligne 66: Ligne 66:
 Nous allons d'​abord le stocker dans une variable, c'​est-à-dire demander à l'​ordinateur de créer, dans une petite partie de sa mémoire, un endroit où la stocker afin qu'il puisse aller la chercher : Nous allons d'​abord le stocker dans une variable, c'​est-à-dire demander à l'​ordinateur de créer, dans une petite partie de sa mémoire, un endroit où la stocker afin qu'il puisse aller la chercher :
  
-{{:​godot_instance_i.png?​600|godot_instance_i.png}}+{{media_04:​godot_instance_i.png?​600|godot_instance_i.png}}
  
 **  var** signifie que nous créons une nouvelle variable, **  image** est son nom, **  preload()** permet de lui attribuer un fichier externe, et nous lui indiquons le **chemin** où la trouver. **  var** signifie que nous créons une nouvelle variable, **  image** est son nom, **  preload()** permet de lui attribuer un fichier externe, et nous lui indiquons le **chemin** où la trouver.
Ligne 72: Ligne 72:
 Très bien, maintenant que nous avons mis en place le chargement de l'​image,​ nous allons **l'​attribuer au Sprite** lorsque celui-ci arrive dans l'​application. Pour cela, une fonction a déjà été mise en place au sein de Godot : **  set_texture()**. Elle est disponible puisque le script commence par la ligne   ​extends ​  ​Sprite. Si la scène avait été un Node2D, cela n'​aurait pas été permis. Entre parenthèses,​ nous indiquons la variable que nous souhaitons lui attribuer, ici   image : Très bien, maintenant que nous avons mis en place le chargement de l'​image,​ nous allons **l'​attribuer au Sprite** lorsque celui-ci arrive dans l'​application. Pour cela, une fonction a déjà été mise en place au sein de Godot : **  set_texture()**. Elle est disponible puisque le script commence par la ligne   ​extends ​  ​Sprite. Si la scène avait été un Node2D, cela n'​aurait pas été permis. Entre parenthèses,​ nous indiquons la variable que nous souhaitons lui attribuer, ici   image :
  
-{{:​godot_instance_j.png?​600|godot_instance_j.png}}+{{media_04:​godot_instance_j.png?​600|godot_instance_j.png}}
  
 Puisque la fonction ​  ​_ready():​ doit effectuer une action, la ligne   pass n'est plus utile, nous l'​avons remplacée. Puisque la fonction ​  ​_ready():​ doit effectuer une action, la ligne   pass n'est plus utile, nous l'​avons remplacée.
Ligne 78: Ligne 78:
 Petite précision : nous en parlerons un peu plus tard, mais vous pouvez apercevoir une petite flèche avant certaines lignes de code dans mes exemples. Il s'agit de **l'"​indentation",​ que l'on ajoute en appuyant sur tabulation**. Si elle est absente, elle empêchera votre programme de fonctionner,​ veillez-donc à la respecter selon mon modèle. Petite précision : nous en parlerons un peu plus tard, mais vous pouvez apercevoir une petite flèche avant certaines lignes de code dans mes exemples. Il s'agit de **l'"​indentation",​ que l'on ajoute en appuyant sur tabulation**. Si elle est absente, elle empêchera votre programme de fonctionner,​ veillez-donc à la respecter selon mon modèle.
  
-{{:​godot_instance_indent.png?​400|godot_instance_indent.png}}+{{media_04:​godot_instance_indent.png?​400|godot_instance_indent.png}}
  
 Appuyer maintenant sur **F6**, cela lancera la **scène active**, dans notre cas "​flocon.tscn"​. Petit rappel : **F5 lance la scène principale, F6 lance la scène active**, celle en cours d'​édition. Voici ce qui apparaît : Appuyer maintenant sur **F6**, cela lancera la **scène active**, dans notre cas "​flocon.tscn"​. Petit rappel : **F5 lance la scène principale, F6 lance la scène active**, celle en cours d'​édition. Voici ce qui apparaît :
  
-{{:​godot_instance_flocon00.png?​400|godot_instance_flocon00.png}}+{{media_04:​godot_instance_flocon00.png?​400|godot_instance_flocon00.png}}
  
 Le flocon apparaît bien, mais est **situé en haut à gauche de l'​écran**. Pourquoi donc ? La position de base d'un Sprite est la suivante : **Vector2(0,​0)**. Vector2 indique le type de données dont il s'​agit. **Un Vector2 contient deux données qui correspondent l'une à l'​espace horizontal ( x ), l'​autre à l'​espace vertical ( y )**. La position du Sprite est donc actuellement de 0 sur l'axe x, 0 sur l'axe y. **Ces coordonnées sont relatives au coin haut/gauche de l'​écran**,​ il est donc normal qu'il se trouve là. Le flocon apparaît bien, mais est **situé en haut à gauche de l'​écran**. Pourquoi donc ? La position de base d'un Sprite est la suivante : **Vector2(0,​0)**. Vector2 indique le type de données dont il s'​agit. **Un Vector2 contient deux données qui correspondent l'une à l'​espace horizontal ( x ), l'​autre à l'​espace vertical ( y )**. La position du Sprite est donc actuellement de 0 sur l'axe x, 0 sur l'axe y. **Ces coordonnées sont relatives au coin haut/gauche de l'​écran**,​ il est donc normal qu'il se trouve là.
Ligne 88: Ligne 88:
 Mon projet étant configuré en 600 pixels par 600 pixels, le centre de l'​écran se trouve à la position Vector2(300,​300). Plaçons y notre Sprite, en rajoutons une nouvelle ligne de code : **  set_pos(Vector2(300,​300))**. Mon projet étant configuré en 600 pixels par 600 pixels, le centre de l'​écran se trouve à la position Vector2(300,​300). Plaçons y notre Sprite, en rajoutons une nouvelle ligne de code : **  set_pos(Vector2(300,​300))**.
  
-{{:​godot_instance_set_pos.png?​600|godot_instance_set_pos.png}}+{{media_04:​godot_instance_set_pos.png?​600|godot_instance_set_pos.png}}
  
 Une vérification en appuyant sur F6 nous permet de voir que **la position a bien été modifiée** ! Une vérification en appuyant sur F6 nous permet de voir que **la position a bien été modifiée** !
  
-{{:​godot_instance_mid.png?​400|godot_instance_mid.png}}+{{media_04:​godot_instance_mid.png?​400|godot_instance_mid.png}}
  
 Bien. C'est là que les choses sérieuses commencent. Nous souhaiterions que le flocon soit affiché au hasard sur l'​écran. Puisque l'​écran fait 600 pixels de large, il faudrait que nous puissions obtenir un nombre au hasard entre 0 et 600. Il existe déjà une fonction qui permet de l'​obtenir : **  randi() ​  ​% ​  n**. **Assigné à une variable, cette formule donnera a cette variable un nombre au hasard entre 0 et n-1**. Nous allons donc créer une nouvelle variable, ​  ​position_x,​ que nous mettrons égale à   ​randi() ​  ​% ​  601. Comme cela : Bien. C'est là que les choses sérieuses commencent. Nous souhaiterions que le flocon soit affiché au hasard sur l'​écran. Puisque l'​écran fait 600 pixels de large, il faudrait que nous puissions obtenir un nombre au hasard entre 0 et 600. Il existe déjà une fonction qui permet de l'​obtenir : **  randi() ​  ​% ​  n**. **Assigné à une variable, cette formule donnera a cette variable un nombre au hasard entre 0 et n-1**. Nous allons donc créer une nouvelle variable, ​  ​position_x,​ que nous mettrons égale à   ​randi() ​  ​% ​  601. Comme cela :
  
-{{:​godot_instance_randi1.png?​600|godot_instance_randi1.png}}+{{media_04:​godot_instance_randi1.png?​600|godot_instance_randi1.png}}
  
 Qu'il suffit de **dupliquer avec Ctrl-C Ctrl-V** pour créer une autre variable :   ​position_y. Qu'il suffit de **dupliquer avec Ctrl-C Ctrl-V** pour créer une autre variable :   ​position_y.
  
-{{:​godot_instance_randi2.png?​600|godot_instance_randi2.png}}+{{media_04:​godot_instance_randi2.png?​600|godot_instance_randi2.png}}
  
 Enfin il suffit maintenant de **remplacer les valeurs de   ​set_pos()** par nos nouvelles variables. Enfin il suffit maintenant de **remplacer les valeurs de   ​set_pos()** par nos nouvelles variables.
  
-{{:​godot_instance_randi3.png?​600|godot_instance_randi3.png}}+{{media_04:​godot_instance_randi3.png?​600|godot_instance_randi3.png}}
  
 Appuyez sur F6, et contemplez le résultat ! Le flocon est maintenant situé au hasard ! Appuyez sur F6, et contemplez le résultat ! Le flocon est maintenant situé au hasard !
  
-{{:​godot_instance_random.png?​400|godot_instance_random.png}}+{{media_04:​godot_instance_random.png?​400|godot_instance_random.png}}
  
 Mais si vous fermez la fenêtre, et refaites F6, le flocon reste à la même position. Fichtre. En fait, la formule **  randi() n'est pas complètement aléatoire**. Il est nécessaire de la rafraîchir régulièrement pour qu'​elle fonctionne. Avant vos variables, insérez la fonction **  randomize()** qui permet à l’aléatoire d'​être remis à jour. Mais si vous fermez la fenêtre, et refaites F6, le flocon reste à la même position. Fichtre. En fait, la formule **  randi() n'est pas complètement aléatoire**. Il est nécessaire de la rafraîchir régulièrement pour qu'​elle fonctionne. Avant vos variables, insérez la fonction **  randomize()** qui permet à l’aléatoire d'​être remis à jour.
  
-{{:​godot_instance_randomize.png?​600|godot_instance_randomize.png}}+{{media_04:​godot_instance_randomize.png?​600|godot_instance_randomize.png}}
  
 Faîtes plusieurs essais avec F6 : le flocon est maintenant distribué aléatoirement sur l'​écran ! Faîtes plusieurs essais avec F6 : le flocon est maintenant distribué aléatoirement sur l'​écran !
Ligne 122: Ligne 122:
 Retournez sur la **scène "​pluie.tscn",​ et attachez lui un script**. Enlevez les commentaires. Bien. Premièrement,​ nous allons **importer le flocon dans la pluie**. Pour cela, il faut le charger. Rien de compliqué : une variable nommée flocon, qui charge le chemin de la scène ( donc   <​nowiki>​res://​core/​flocon.tscn</​nowiki>​). Cependant, comme il s'agit d'une scène, il faut l'​instancier pour qu'​elle fonctionne, en rajoutant la commande **  .instance()** à la fin. Le code ressemble désormais à cela : Retournez sur la **scène "​pluie.tscn",​ et attachez lui un script**. Enlevez les commentaires. Bien. Premièrement,​ nous allons **importer le flocon dans la pluie**. Pour cela, il faut le charger. Rien de compliqué : une variable nommée flocon, qui charge le chemin de la scène ( donc   <​nowiki>​res://​core/​flocon.tscn</​nowiki>​). Cependant, comme il s'agit d'une scène, il faut l'​instancier pour qu'​elle fonctionne, en rajoutant la commande **  .instance()** à la fin. Le code ressemble désormais à cela :
  
-{{:​godot_instance_soloflocon.png?​600|godot_instance_soloflocon.png}}+{{media_04:​godot_instance_soloflocon.png?​600|godot_instance_soloflocon.png}}
  
 Pour l'​instant,​ nous n'​avons fait que charger la scène. Dans la fonction **  _ready():, nous allons maintenant l'​ajouter,​ grâce à la fonction ​  ​add_child()** : Pour l'​instant,​ nous n'​avons fait que charger la scène. Dans la fonction **  _ready():, nous allons maintenant l'​ajouter,​ grâce à la fonction ​  ​add_child()** :
  
-{{:​godot_instance_l.png?​600|godot_instance_l.png}}+{{media_04:​godot_instance_l.png?​600|godot_instance_l.png}}
  
 Appuyez maintenant sur F5, et non sur F6. Cela va **lancer la scène "​pluie",​ qui est la scène principale**. Et pouf ! Le flocon apparaît ! Appuyez maintenant sur F5, et non sur F6. Cela va **lancer la scène "​pluie",​ qui est la scène principale**. Et pouf ! Le flocon apparaît !
Ligne 132: Ligne 132:
 C'est assez chouette, mais loin d'​être une pluie en bonne et due forme. Il faudrait qu'il y ait d'​autres flocons qui apparaissent. Nous allons d'​abord essayer d'en ajouter plusieurs à la fois. Pour cela, **supprimons le   ​.instance()**. Lorsque celui-ci est présent à la fin d'une scène (plus précisément d'une variable qui contient une scène), il permet de l'​ajouter à la scène actuellement active. Lorsqu'​il en est absent, **il permet d'​utiliser la scène comme un modèle** pour créer plusieurs copies de cette scène. C'est assez chouette, mais loin d'​être une pluie en bonne et due forme. Il faudrait qu'il y ait d'​autres flocons qui apparaissent. Nous allons d'​abord essayer d'en ajouter plusieurs à la fois. Pour cela, **supprimons le   ​.instance()**. Lorsque celui-ci est présent à la fin d'une scène (plus précisément d'une variable qui contient une scène), il permet de l'​ajouter à la scène actuellement active. Lorsqu'​il en est absent, **il permet d'​utiliser la scène comme un modèle** pour créer plusieurs copies de cette scène.
  
-{{:​godot_instance_m.png?​600|godot_instance_m.png}}+{{media_04:​godot_instance_m.png?​600|godot_instance_m.png}}
  
 Une fois le modèle prêt, **créons une nouvelle variable et utilisons là pour copier la scène** avant de l'​ajouter. Le code sera plus simple à appréhender : Une fois le modèle prêt, **créons une nouvelle variable et utilisons là pour copier la scène** avant de l'​ajouter. Le code sera plus simple à appréhender :
  
-{{:​godot_instance_flocon1.png?​600|godot_instance_flocon1.png}}+{{media_04:​godot_instance_flocon1.png?​600|godot_instance_flocon1.png}}
  
 Pour l'​instant nous n'en avons créé qu'un. **Ajoutons en un deuxième**. Pour l'​instant nous n'en avons créé qu'un. **Ajoutons en un deuxième**.
  
-{{:​godot_instance_n.png?​600|godot_instance_n.png}}+{{media_04:​godot_instance_n.png?​600|godot_instance_n.png}}
  
 Lancez la scène principale : Lancez la scène principale :
  
-{{:​godot_instance_o.png?​400|godot_instance_o.png}}+{{media_04:​godot_instance_o.png?​400|godot_instance_o.png}}
  
 Et voilà ! Nous avons maintenant deux flocons qui s'​affichent. Nous pourrions aisément créer de nombreuses variables pour ajouter autant de flocons que nous le souhaitons, mais ce serait fastidieux. Regardons plutôt le code suivant : Et voilà ! Nous avons maintenant deux flocons qui s'​affichent. Nous pourrions aisément créer de nombreuses variables pour ajouter autant de flocons que nous le souhaitons, mais ce serait fastidieux. Regardons plutôt le code suivant :
  
-{{:​godot_instance_q.png?​600|godot_instance_q.png}}+{{media_04:​godot_instance_q.png?​600|godot_instance_q.png}}
  
 La ligne de code **  for   ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):** permet d'​exécuter un bout de code 8 fois. C'est là que nous faisons une petite pause pour parler d**'​indentation**. L'​indentation est la petite flèche qui apparaît au début de certaines lignes de codes. **Elle permet d'​indiquer à quel fonction ce code appartient**. Avant la fonction ​  ​_ready():,​ il n'y a pas d'​indentation. Après la fonction ​  ​_ready():,​ dans nos codes précédents,​ il y a une indentation pour les lignes de code à l'​intérieur de la fonction ​  ​_ready():​. Cela signifie que toute ligne de code qui a une indentation sera exécutée lorsque la fonction ​  ​_ready():​ sera exécutée (au moment où la scène est lancée). Nous remarquons qu**'​il y a une deuxième indentation après la ligne   ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):** dans le code ci-dessus. **Ces lignes de codes seront donc toutes exécutées 8 fois**, puisque l'​indentation signifie qu**'​elles font partie de la fonction ​  ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):**. Pour ajouter une indentation,​ il faut appuyer sur la touche tabulation. Cependant, Godot les ajouté automatiquement. La ligne de code **  for   ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):** permet d'​exécuter un bout de code 8 fois. C'est là que nous faisons une petite pause pour parler d**'​indentation**. L'​indentation est la petite flèche qui apparaît au début de certaines lignes de codes. **Elle permet d'​indiquer à quel fonction ce code appartient**. Avant la fonction ​  ​_ready():,​ il n'y a pas d'​indentation. Après la fonction ​  ​_ready():,​ dans nos codes précédents,​ il y a une indentation pour les lignes de code à l'​intérieur de la fonction ​  ​_ready():​. Cela signifie que toute ligne de code qui a une indentation sera exécutée lorsque la fonction ​  ​_ready():​ sera exécutée (au moment où la scène est lancée). Nous remarquons qu**'​il y a une deuxième indentation après la ligne   ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):** dans le code ci-dessus. **Ces lignes de codes seront donc toutes exécutées 8 fois**, puisque l'​indentation signifie qu**'​elles font partie de la fonction ​  ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ):**. Pour ajouter une indentation,​ il faut appuyer sur la touche tabulation. Cependant, Godot les ajouté automatiquement.
Ligne 154: Ligne 154:
 Si le concept n'est pas encore clair, pas de panique. Pour l'​instant,​ regardons ce qui se passe lorsque nous lançons la scène principale. Si le concept n'est pas encore clair, pas de panique. Pour l'​instant,​ regardons ce qui se passe lorsque nous lançons la scène principale.
  
-{{:​godot_instance_p.png?​400|godot_instance_p.png}}+{{media_04:​godot_instance_p.png?​400|godot_instance_p.png}}
  
 Parfait, il y a maintenant bien huit flocons qui apparaissent à l'​écran. Malgré tout, cela reste beaucoup trop statique. Nous allons maintenant voir comment **Godot permet d'agir dans le temps**, en utilisant le pendant de la fonction ​  ​_ready():,​ la fonction **  _fixed_process(delta):​** . Parfait, il y a maintenant bien huit flocons qui apparaissent à l'​écran. Malgré tout, cela reste beaucoup trop statique. Nous allons maintenant voir comment **Godot permet d'agir dans le temps**, en utilisant le pendant de la fonction ​  ​_ready():,​ la fonction **  _fixed_process(delta):​** .
Ligne 160: Ligne 160:
 Avant tout, il faut l'​activer et la créer, comme cela : Avant tout, il faut l'​activer et la créer, comme cela :
  
-{{:​godot_instance_r.png?​600|godot_instance_r.png godot_instance_r.png}}+{{media_04:​godot_instance_r.png?​600|godot_instance_r.png godot_instance_r.png}}
  
 Plusieurs choses sont importantes ici. Tout d'​abord,​ pour revenir au concept d'​indentation,​ **regardez la ligne 11. Il n'y a pas d'​indentation**. Cela permet d'​indiquer à Godot que **la fonction ​  ​_ready():​ est terminée**. C'est pour la même raison que la ligne de code **  set_fixed_process(true) n'a qu'une seule indentation** : elle ne fait pas partie de   ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ): car elle ne doit être exécutée qu'une seule fois. Plusieurs choses sont importantes ici. Tout d'​abord,​ pour revenir au concept d'​indentation,​ **regardez la ligne 11. Il n'y a pas d'​indentation**. Cela permet d'​indiquer à Godot que **la fonction ​  ​_ready():​ est terminée**. C'est pour la même raison que la ligne de code **  set_fixed_process(true) n'a qu'une seule indentation** : elle ne fait pas partie de   ​for ​  ​i ​  ​in ​  ​range ​  ​( ​  ​8 ​  ): car elle ne doit être exécutée qu'une seule fois.
Ligne 168: Ligne 168:
 La fonction **  _fixed_process(delta):​** est particulièrement utile : c'est une fonction qui, si elle est activée, **s'​exécutera à chaque frame du jeu**, c'​est-à-dire,​ par défault, 25 fois par seconde. Faisons un essai, et utilisons là pour ajouter un nouveau flocon. Lancez ensuite l'​application. La fonction **  _fixed_process(delta):​** est particulièrement utile : c'est une fonction qui, si elle est activée, **s'​exécutera à chaque frame du jeu**, c'​est-à-dire,​ par défault, 25 fois par seconde. Faisons un essai, et utilisons là pour ajouter un nouveau flocon. Lancez ensuite l'​application.
  
-{{:​godot_instance_process.png?​600|godot_instance_process.png godot_instance_process.png}}+{{media_04:​godot_instance_process.png?​600|godot_instance_process.png godot_instance_process.png}}
  
 On ne saurait être plus clair ! **25 fois par seconde, une copie de la scène flocon est ajoutée à la scène pluie**. Cela commence à ressembler à quelque chose. Mais l'​écran est rapidement rempli. Le mieux serait de faire disparaître le flocon peu à peu, comme s'il fondait. Pour cela, ce n'est pas la pluie qu'il faut modifier, mais le flocon lui-même. Cliquez sur "​flocon.gd",​ dans le menu à gauche du script. On ne saurait être plus clair ! **25 fois par seconde, une copie de la scène flocon est ajoutée à la scène pluie**. Cela commence à ressembler à quelque chose. Mais l'​écran est rapidement rempli. Le mieux serait de faire disparaître le flocon peu à peu, comme s'il fondait. Pour cela, ce n'est pas la pluie qu'il faut modifier, mais le flocon lui-même. Cliquez sur "​flocon.gd",​ dans le menu à gauche du script.
  
-{{:​godot_instance_gd.png?​400|godot_instance_gd.png godot_instance_gd.png}}+{{media_04:​godot_instance_gd.png?​400|godot_instance_gd.png godot_instance_gd.png}}
  
 Rajoutez lui une variable **  opacite** (sans accent) égale à 1, et activez sa fonction **  _fixed_process(delta):​**. Rajoutez lui une variable **  opacite** (sans accent) égale à 1, et activez sa fonction **  _fixed_process(delta):​**.
  
-{{:​godot_instance_t.png?​600|godot_instance_t.png godot_instance_t.png}}+{{media_04:​godot_instance_t.png?​600|godot_instance_t.png godot_instance_t.png}}
  
 **L'​opacité est la valeur de transparence d'une image.** À 1, elle est complètement opaque, à 0, elle devient complètement transparente. Nous allons effectuer une opération intéressante : **L'​opacité est la valeur de transparence d'une image.** À 1, elle est complètement opaque, à 0, elle devient complètement transparente. Nous allons effectuer une opération intéressante :
  
-{{:​godot_instance_u.png?​600|godot_instance_u.png godot_instance_u.png}}+{{media_04:​godot_instance_u.png?​600|godot_instance_u.png godot_instance_u.png}}
  
 **  if** est un outil très utilisé en code. Il permet d'​effectuer une opération **si et seulement si sa condition est respectée**. La condition qui lui est ici assignée est le fait qu**' ​ opacite soit supérieure à 0**. **Tant qu' ​ opacite sera supérieure à 0**, elle effectuera les deux opération qui suivent (et qui sont indentées puisqu'​elles appartiennent à   if). D'​abord ​  ​opacite est baissée de 0.05, puis l'​opacité du Sprite est changée pour la valeur actuelle d' ​ opacite, grâce à la fonction **  set_opacity()**. Ainsi, à chaque frame, l'​opacité du Sprite sera baissée de 0.05 jusqu'​à ce qu'il devienne transparent. Lancez la pluie avec F5. **  if** est un outil très utilisé en code. Il permet d'​effectuer une opération **si et seulement si sa condition est respectée**. La condition qui lui est ici assignée est le fait qu**' ​ opacite soit supérieure à 0**. **Tant qu' ​ opacite sera supérieure à 0**, elle effectuera les deux opération qui suivent (et qui sont indentées puisqu'​elles appartiennent à   if). D'​abord ​  ​opacite est baissée de 0.05, puis l'​opacité du Sprite est changée pour la valeur actuelle d' ​ opacite, grâce à la fonction **  set_opacity()**. Ainsi, à chaque frame, l'​opacité du Sprite sera baissée de 0.05 jusqu'​à ce qu'il devienne transparent. Lancez la pluie avec F5.
  
-{{:​godot_instance_pluie.png?​400|godot_instance_pluie.png godot_instance_pluie.png}}+{{media_04:​godot_instance_pluie.png?​400|godot_instance_pluie.png godot_instance_pluie.png}}
  
 Bravo ! Le programme semble terminée, mais une dernière chose reste à régler. Si les Sprites disparaissent bien à l’œil, ils sont en fait gardés en mémoire. Comme ils ne servent plus à rien une fois qu'ils sont devenus transparents,​ nous allons les supprimer grâce à l'​outil **  else** : Bravo ! Le programme semble terminée, mais une dernière chose reste à régler. Si les Sprites disparaissent bien à l’œil, ils sont en fait gardés en mémoire. Comme ils ne servent plus à rien une fois qu'ils sont devenus transparents,​ nous allons les supprimer grâce à l'​outil **  else** :
  
-{{:​godot_instance_v.png?​600|godot_instance_v.png godot_instance_v.png}}+{{media_04:​godot_instance_v.png?​600|godot_instance_v.png godot_instance_v.png}}
  
 **  else ne s'​utilise qu'​après ​  if**. Il permet d'​effectuer une opération **si les conditions d' ​ if ne sont pas remplies**. Ici, si la valeur d' ​ opacite est supérieure à 0, la ligne de code   ​queue_free() ne sera pas exécutée. Mais **si   ​opacite devient égale ou inférieure à 0**, alors ce sont **les deux lignes de codes qui suivent ​  if qui ne seront pas exécuté, et   ​queue_free() sera exécuté à la place**. **  queue_free() est une fonction qui permet de supprimer une scène** lorsqu'​elle n'est plus utile. Ainsi, nous pourrions laisser la pluie tourner des heures durant, elle ne surchargerait pas la mémoire de l'​ordinateur. **  else ne s'​utilise qu'​après ​  if**. Il permet d'​effectuer une opération **si les conditions d' ​ if ne sont pas remplies**. Ici, si la valeur d' ​ opacite est supérieure à 0, la ligne de code   ​queue_free() ne sera pas exécutée. Mais **si   ​opacite devient égale ou inférieure à 0**, alors ce sont **les deux lignes de codes qui suivent ​  if qui ne seront pas exécuté, et   ​queue_free() sera exécuté à la place**. **  queue_free() est une fonction qui permet de supprimer une scène** lorsqu'​elle n'est plus utile. Ainsi, nous pourrions laisser la pluie tourner des heures durant, elle ne surchargerait pas la mémoire de l'​ordinateur.
Ligne 194: Ligne 194:
 Pour terminer, je vous laisse essayer le code suivant et comprendre par vous-même ce qu'il change au programme : Pour terminer, je vous laisse essayer le code suivant et comprendre par vous-même ce qu'il change au programme :
  
-{{:​godot_instance_final.png?​600|godot_instance_final.png godot_instance_final.png}}+{{media_04:​godot_instance_final.png?​600|godot_instance_final.png godot_instance_final.png}}
  
 ===== Conclusion ===== ===== Conclusion =====
godot_scenes_et_scripts.txt · Dernière modification: 2020/02/07 17:35 par serge