Labomedia Ressources

Outils pour utilisateurs

Outils du site

Piste : • Godot • Smartcitizen • MoveNet • FoldaRap
godot

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 [2018/09/05 07:08] – [Noeud/Node] sergegodot [2020/12/01 17:43] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. serge
Ligne 6: Ligne 6:
 ===== Présentation ===== ===== Présentation =====
  
-{{:icon.png?100|icon.png icon.png}}+{{media_07:icon.png?100|icon.png icon.png}}
  
 **[[https://godotengine.org/|Godot]]** est un **moteur de jeu** (en anglais 'game engine') **open-source** disponible sur Linux, Windows et OS X **qui permet de réaliser facilement des applications interactives**. Développé dans un souci d'accessibilité, sa prise en main est aisée bien qu'elle nécessite d'être plutôt à l'aise avec l'outil informatique. Il semble assez difficile de pouvoir s'en servir de manière optimale sans notion de code, mais l'interface permet de manipuler les fonctionnalités basiques intuitivement, ce qui permet, entre autres, de s'intégrer à des projets sans avoir besoin de comprendre l'intégralité du programme. Cependant, l'application propose un système de code qui se veut comme étant un langage python simplifié, intégrant de nombreuses fonctions préprogrammées et proches de l'utilisateur. **[[https://godotengine.org/|Godot]]** est un **moteur de jeu** (en anglais 'game engine') **open-source** disponible sur Linux, Windows et OS X **qui permet de réaliser facilement des applications interactives**. Développé dans un souci d'accessibilité, sa prise en main est aisée bien qu'elle nécessite d'être plutôt à l'aise avec l'outil informatique. Il semble assez difficile de pouvoir s'en servir de manière optimale sans notion de code, mais l'interface permet de manipuler les fonctionnalités basiques intuitivement, ce qui permet, entre autres, de s'intégrer à des projets sans avoir besoin de comprendre l'intégralité du programme. Cependant, l'application propose un système de code qui se veut comme étant un langage python simplifié, intégrant de nombreuses fonctions préprogrammées et proches de l'utilisateur.
Ligne 31: Ligne 31:
 A droite de la fenêtre, cliquez sur **Import** : A droite de la fenêtre, cliquez sur **Import** :
  
-{{:import.png?100|import.png import.png}}+{{media_07:import.png?100|import.png import.png}}
  
 Dans la fenêtre qui vient de s'ouvrir, Browse permet d'indiquer le chemin du projet à importer. Retrouvez votre dossier **Godot**, puis ouvrez le dossier que vous avez téléchargé, qui devrait ressembler à peu près à ceci : **Godot-Demos-2.1-20170121** . Ensuite, dans le dossier **2d/**, ouvrez **platformer/** et double-cliquez sur **engine.cfg**. C'est un fichier qui permet à Godot l'import du projet. Un click sur import et le voilà apparu dans le gestionnaire de projets. Il y sera toujours quand vous réouvrirez Godot. Un dernier double-click dessus et vous voilà dans l**'éditeur**. Dans la fenêtre qui vient de s'ouvrir, Browse permet d'indiquer le chemin du projet à importer. Retrouvez votre dossier **Godot**, puis ouvrez le dossier que vous avez téléchargé, qui devrait ressembler à peu près à ceci : **Godot-Demos-2.1-20170121** . Ensuite, dans le dossier **2d/**, ouvrez **platformer/** et double-cliquez sur **engine.cfg**. C'est un fichier qui permet à Godot l'import du projet. Un click sur import et le voilà apparu dans le gestionnaire de projets. Il y sera toujours quand vous réouvrirez Godot. Un dernier double-click dessus et vous voilà dans l**'éditeur**.
Ligne 43: Ligne 43:
 Première chose : arrêter cette affreuse musique. **F8 permet de clore le jeu**. Nous sommes revenus dans l**'éditeur**. C'est au sein de cet espace que s'effectue la quasi-totalité du développement. Au centre se trouve la prévisualtisation de l'application, sur les côtés diverses boîtes qui permettent diverses actions. Regardons rapidement celle intitulée **FileSystem**, qui ressemble à ceci : Première chose : arrêter cette affreuse musique. **F8 permet de clore le jeu**. Nous sommes revenus dans l**'éditeur**. C'est au sein de cet espace que s'effectue la quasi-totalité du développement. Au centre se trouve la prévisualtisation de l'application, sur les côtés diverses boîtes qui permettent diverses actions. Regardons rapidement celle intitulée **FileSystem**, qui ressemble à ceci :
  
-{{:filesystem.png?200|filesystem.png filesystem.png}}+{{media_06:filesystem.png?200|filesystem.png filesystem.png}}
  
 Rien de bien complexe, il s'agit en fait d'un clone de votre **gestionnaire de fichiers**. Cette fenêtre contient les fichiers de votre projet. Vous pouvez y déposer directement des fichiers, mais je préfère passer par le gestionnaire de fichier du PC pour le faire (question de clarté). Que vous fassiez l'un ou l'autre, rajoutez le fichier suivant dans le dossier (click droit, enregistrer l'image ( source : [[https://opengameart.org/content/pocute|pocute sur opengameart.org]] )) : Rien de bien complexe, il s'agit en fait d'un clone de votre **gestionnaire de fichiers**. Cette fenêtre contient les fichiers de votre projet. Vous pouvez y déposer directement des fichiers, mais je préfère passer par le gestionnaire de fichier du PC pour le faire (question de clarté). Que vous fassiez l'un ou l'autre, rajoutez le fichier suivant dans le dossier (click droit, enregistrer l'image ( source : [[https://opengameart.org/content/pocute|pocute sur opengameart.org]] )) :
  
-{{:shooksmall.png?200|shooksmall.png shooksmall.png}}+{{media_12:shooksmall.png?200|shooksmall.png shooksmall.png}}
  
 Si tout s'est bien passé, il devrait apparaître dans la fenêtre FileSystem. Maintenant passons à une autre fenêtre : **Scene**. Une fois les onglets 'coins' et 'props', un click sur le petit clap orné d'une flèche à côté du mot player devrait ouvrir le menu suivant : Si tout s'est bien passé, il devrait apparaître dans la fenêtre FileSystem. Maintenant passons à une autre fenêtre : **Scene**. Une fois les onglets 'coins' et 'props', un click sur le petit clap orné d'une flèche à côté du mot player devrait ouvrir le menu suivant :
  
-{{:openineditor.png?200|openineditor.png openineditor.png}}+{{media_10:openineditor.png?200|openineditor.png openineditor.png}}
  
 Plusieurs fenêtres ont changé, ce qui est normal : **nous avons changé de scène**. Nous allons maintenant manipuler les nœuds pour changer le sprite du player. Si c'est confus, pas de souci, nous y reviendrons plus tard. **Le point important ici est de comprendre les possibilités du logiciel**, pas encore comment celui-ci fonctionne. Plusieurs fenêtres ont changé, ce qui est normal : **nous avons changé de scène**. Nous allons maintenant manipuler les nœuds pour changer le sprite du player. Si c'est confus, pas de souci, nous y reviendrons plus tard. **Le point important ici est de comprendre les possibilités du logiciel**, pas encore comment celui-ci fonctionne.
Ligne 57: Ligne 57:
 Nous allons d'abord **cacher l'image** actuelle du joueur, en cliquant sur le petit œil à côté de sprite. Nous allons d'abord **cacher l'image** actuelle du joueur, en cliquant sur le petit œil à côté de sprite.
  
-{{:hidesprite.png?200|hidesprite.png hidesprite.png}}+{{media_06:hidesprite.png?200|hidesprite.png hidesprite.png}}
  
 Le joueur n'a plus d'image ! Il faut en **recréer** une. En étant sûr que 'player' est en surbrillance, il faut cliquer sur le **plus (+)** en haut de la fenêtre screen : Le joueur n'a plus d'image ! Il faut en **recréer** une. En étant sûr que 'player' est en surbrillance, il faut cliquer sur le **plus (+)** en haut de la fenêtre screen :
  
-{{:addnode.png?200|addnode.png addnode.png}}+{{media_02:addnode.png?200|addnode.png addnode.png}}
  
 Ce qui ouvre un menu assez vaste. Pour mieux s'y retrouver, on fait une **recherche** sous le mot-clef **sprite**, qui designe une image dans les jeux-vidéos. Attention il s'agit bien de sprite et non de sprite 3d. Ce qui ouvre un menu assez vaste. Pour mieux s'y retrouver, on fait une **recherche** sous le mot-clef **sprite**, qui designe une image dans les jeux-vidéos. Attention il s'agit bien de sprite et non de sprite 3d.
  
-{{:addsprite.png?200|addsprite.png addsprite.png}}+{{media_02:addsprite.png?200|addsprite.png addsprite.png}}
  
 Un double-click et le voici ajouté à la fenêtre Scene. Il ne reste plus qu'à aller chercher dans le FileSystem l'image que nous voulons, à savoir **shooksmall.png**, et de la faire **glisser** dans la fenêtre **Inspector**, à la place de **null**, à côté de **Texture** : Un double-click et le voici ajouté à la fenêtre Scene. Il ne reste plus qu'à aller chercher dans le FileSystem l'image que nous voulons, à savoir **shooksmall.png**, et de la faire **glisser** dans la fenêtre **Inspector**, à la place de **null**, à côté de **Texture** :
  
-{{:changesprite.png?200|changesprite.png changesprite.png}}+{{media_05:changesprite.png?200|changesprite.png changesprite.png}}
  
 Et maintenant, **F5 ! Tadaaaaa !** Et maintenant, **F5 ! Tadaaaaa !**
Ligne 79: Ligne 79:
 ===== Premières Particules ===== ===== Premières Particules =====
  
-{{:blopxk.png?200|blopxk.png blopxk.png}}+{{media_04:blopxk.png?200|blopxk.png blopxk.png}}
  
 ==== Réglages ==== ==== Réglages ====
Ligne 89: Ligne 89:
 Pour plus de clarté, nous allons **créer deux dossiers** : un nommé **'data**' dans lequel seront stockées les images (le multimédia en général), un autre nommé **'tscn**', qui servira à enregistrer les scènes (en format nom.tscn). Nous n'allons pas écrire de script dans cet exemple mais nous aurions sûrement créé un dossier **'gd**' pour les conserver le cas échéant. Tant que nous y sommes, copions cette image dans le dossier 'data' : Pour plus de clarté, nous allons **créer deux dossiers** : un nommé **'data**' dans lequel seront stockées les images (le multimédia en général), un autre nommé **'tscn**', qui servira à enregistrer les scènes (en format nom.tscn). Nous n'allons pas écrire de script dans cet exemple mais nous aurions sûrement créé un dossier **'gd**' pour les conserver le cas échéant. Tant que nous y sommes, copions cette image dans le dossier 'data' :
  
-{{:P02.png?200|P02.png P02.png}}+{{media_10:p02.png?200|P02.png P02.png}}
  
 Retour à Godot. Si tout s'est bien passé, cliquer sur 'data' dans FileSystem devrait faire apparaître l'image ci-dessus. Retour à Godot. Si tout s'est bien passé, cliquer sur 'data' dans FileSystem devrait faire apparaître l'image ci-dessus.
Ligne 95: Ligne 95:
 Premièrement, nous allons travailler en **2d**, il faut donc le sélectionner au-dessus de l'espace de travail. Ensuite, le **menu Scene** en haut à gauche nous permet d'aller dans **Projects Settings**, qui sert à configurer les caractéristiques globales de l'application. Premièrement, nous allons travailler en **2d**, il faut donc le sélectionner au-dessus de l'espace de travail. Ensuite, le **menu Scene** en haut à gauche nous permet d'aller dans **Projects Settings**, qui sert à configurer les caractéristiques globales de l'application.
  
-{{:projectsettings.png?200|projectsettings.png projectsettings.png}}+{{media_11:projectsettings.png?200|projectsettings.png projectsettings.png}}
  
 En général, on y règle principalement les **commandes** (les actions reliées au clavier, à la manette ou à la souris), la **résolution**, ou, dans notre cas, via l'onglet **render**, la couleur d'arrière-plan. Choisissez du noir. En général, on y règle principalement les **commandes** (les actions reliées au clavier, à la manette ou à la souris), la **résolution**, ou, dans notre cas, via l'onglet **render**, la couleur d'arrière-plan. Choisissez du noir.
  
-{{:render.png?200|render.png render.png}}+{{media_12:render.png?200|render.png render.png}}
  
 De retour sur l'espace de travail, un coup de molette nous permet de redimensionner la prévisualisation afin que soit affiché le cadre qui circonscrit la fenêtre de l'application, comme suit : De retour sur l'espace de travail, un coup de molette nous permet de redimensionner la prévisualisation afin que soit affiché le cadre qui circonscrit la fenêtre de l'application, comme suit :
  
-{{:screen_godot.png?200|screen_godot.png screen_godot.png}}+{{media_12:screen_godot.png?200|screen_godot.png screen_godot.png}}
  
 Comme vu précédemment, nous allons maintenant ajouter un noeud à la scène. Soit en cliquant sur le **plus**, soit avec la commande **ctrl a**. Mais avant de se faire, qu'est-ce qu'un noeud ? Comme vu précédemment, nous allons maintenant ajouter un noeud à la scène. Soit en cliquant sur le **plus**, soit avec la commande **ctrl a**. Mais avant de se faire, qu'est-ce qu'un noeud ?
Ligne 113: Ligne 113:
 La commande **ctrl a**, qui permet d**'ajouter un noeud à la scène actuelle**, donne un bon aperçu de la variété des noeuds que l'on trouve dans Godot. La commande **ctrl a**, qui permet d**'ajouter un noeud à la scène actuelle**, donne un bon aperçu de la variété des noeuds que l'on trouve dans Godot.
  
-{{:ctrla.png?200|ctrla.png ctrla.png}}+{{media_08:ctrla.png?200|ctrla.png ctrla.png}}
  
 Le noeud nommé **Node** (du coup, le noeud nommé noeud !) est peu intéressant. Il n'a pas beaucoup de **propriétés**. La plus intéressante est qu'on peut lui attacher un script, c'est à dire du code qui va lui fournir des instructions. Cependant, ce noeud est un peu spécial : c'est la maman des autres noeuds. Comment cela fonctionne-t-il ? Le noeud nommé **Node** (du coup, le noeud nommé noeud !) est peu intéressant. Il n'a pas beaucoup de **propriétés**. La plus intéressante est qu'on peut lui attacher un script, c'est à dire du code qui va lui fournir des instructions. Cependant, ce noeud est un peu spécial : c'est la maman des autres noeuds. Comment cela fonctionne-t-il ?
Ligne 129: Ligne 129:
 Bien, ne reste plus qu'à lancer le programme. Appuyez sur **F5**. Un message d'erreur sauvage apparaît ! Nous n'avons pas encore sauvegardé la scène. De base, celle-ci aura **le nom de son noeud principal** (ici, Particles2D si vous ne l'avez pas renommé). Rangez la dans le dossier **tscn**, puis faîtes **F5**. Encore une erreur ! Nous n'avons pas choisi de **scène principale**. Cela a peu d'importance ici, mais la plupart des projets Godot sont constitués d'une scène principale qui appelle des sous-scènes. **F5** sauvegarde l'ensemble du projet et lance la scène principale, tandis que **F6** lance la scène en cours de modifications après l'avoir sauvegardée. Sélectionnez votre scène et faîtes un dernier **F5**. Bravo, c'est un Hello World en Godot ! Maintenant n'hésitez pas à simplement remplacer la texture par l'une de celles-ci, ou une de votre choix, et à bidouiller les **propriétés** de l**'Inspector** pour découvrir de nouvelles possibilités. Bien, ne reste plus qu'à lancer le programme. Appuyez sur **F5**. Un message d'erreur sauvage apparaît ! Nous n'avons pas encore sauvegardé la scène. De base, celle-ci aura **le nom de son noeud principal** (ici, Particles2D si vous ne l'avez pas renommé). Rangez la dans le dossier **tscn**, puis faîtes **F5**. Encore une erreur ! Nous n'avons pas choisi de **scène principale**. Cela a peu d'importance ici, mais la plupart des projets Godot sont constitués d'une scène principale qui appelle des sous-scènes. **F5** sauvegarde l'ensemble du projet et lance la scène principale, tandis que **F6** lance la scène en cours de modifications après l'avoir sauvegardée. Sélectionnez votre scène et faîtes un dernier **F5**. Bravo, c'est un Hello World en Godot ! Maintenant n'hésitez pas à simplement remplacer la texture par l'une de celles-ci, ou une de votre choix, et à bidouiller les **propriétés** de l**'Inspector** pour découvrir de nouvelles possibilités.
  
-{{:LightEffectSky1.png?200|fig:LightEffectSky1.png}}{{:FireLogo.png?200|fig:FireLogo.png}}+{{media_08:lighteffectsky1.png?200|fig:LightEffectSky1.png}}{{media_06:firelogo.png?200|fig:FireLogo.png}}
  
-{{tag>Moteur_de_jeux sb verified}}+{{tag>Moteur_de_jeux sb}}
godot.1536131337.txt.gz · Dernière modification : de serge