Labomedia Ressources

Outils pour utilisateurs

Outils du site

Piste :
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édentesRévision précédente
Prochaine révision		Révision précédente
Prochaine révisionLes deux révisions suivantes
godot_scenes_et_scripts [2018/08/07 09:26] – sergegodot_scenes_et_scripts [2018/10/24 12:28] – [Code final] serge
Ligne 62: Ligne 62:
  
 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: 
-<nowiki>[[res://data/flocon.png|res://data/flocon.png]]</nowiki>+<nowiki>res://data/flocon.png</nowiki>
  
 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 godot_instance_i.png}}+{{: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 godot_instance_j.png}}+{{: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 godot_instance_indent.png}}+{{: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 godot_instance_flocon00.png}}+{{: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 godot_instance_set_pos.png}}+{{: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 godot_instance_mid.png}}+{{: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 godot_instance_randi1.png}}+{{: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 godot_instance_randi2.png}}+{{: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 godot_instance_randi3.png}}+{{: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 godot_instance_random.png}}+{{: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 godot_instance_randomize.png}}+{{: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 120: Ligne 120:
 ===== Mise en place de la pluie ===== ===== Mise en place de la pluie =====
  
-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|  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}} {{:godot_instance_soloflocon.png?600|godot_instance_soloflocon.png}}
Ligne 150: Ligne 150:
 {{:godot_instance_q.png?600|godot_instance_q.png}} {{: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 ajoute 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.
  
 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 godot_instance_p.png}}+{{: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 272: Ligne 272:
 </code> </code>
  
-{{tag>moteur_de_jeux}}+{{tag>moteur_de_jeux sb}}
godot_scenes_et_scripts.txt · Dernière modification : 2020/10/28 12:14 de serge