======Godot====== **Pour débuter** ===== Présentation ===== {{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. ===== Ressources ===== Tout d'abord [[http://docs.godotengine.org/en/stable/|la documentation Godot]] qui propose un tutoriel pas à pas pour découvrir l'environnement, un lieu qu'il est difficile d'éviter si l'on veut aller plus loin. Les tutos de GDQuest, bien qu'en anglais, couvrent une grande part des outils dont vous aurez besoin pour faire du game design. Concernant Godot, commencer par [[https://www.youtube.com/watch?v=bSj7l25bdJ4|cette vidéo]] vous permettra, quel que soit votre niveau, de coder un petit jeu de plate-forme, qui pourra être intégré aisément au platformer présent dans les templates de Godot. Sur GitHub enfin se trouvent de nombreuses ressources dont une partie est listée sur [[https://github.com/Calinou/awesome-godot|cette page]]. N'hésitez pas à y faire un tour. * [[https://www.pearson.com/us/higher-education/program/Manzur-Godot-Engine-Game-Development-in-24-Hours-Sams-Teach-Yourself-The-Official-Guide-to-Godot-3-0/PGM1894893.html|Godot Engine Game Development in 24 Hours Ed. www.pearson.com]] ===== Pour commencer ===== ==== Installation ==== La démarche la plus simple pour commencer à utiliser Godot reste de **télécharger l'application [[https://godotengine.org/download|Sur le site de Godot]]** en prenant garde d'avoir la version adaptée à son ordinateur et de **récupérer les templates** qui se trouvent sur la même page (Demos and Examples), puis de les stocker dans un dossier qu'on pourra nommer judicieusement Godot. Nous allons modifier ces fichiers, il est peut-être donc temps de les dupliquer si vous souhaitez les garder tels quels sur votre ordinateur, ils restent sinon disponibles à tout moment sur le site internet. ==== Importer un projet ==== Lançons maintenant l'application. Lorsque vous faites ainsi s'ouvre le **gestionnaire de projet** de Godot, qui devrait à ce stade là être vide. Nous allons donc importer un des templates. A droite de la fenêtre, cliquez sur **Import** : {{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**. ==== Jouer ==== Avant de se perdre parmi les menus disponibles, c'est au clavier que se passe la prochaine étape. Une simple pression sur la touche **F5 va lancer la scène principale** (nous y reviendrons). Et voilà, bien que la musique soit affreuse et le gameplay assez limité, vous controllez maintenant un petit robot via les touches directionnelles. Vous pouvez également tirer et sauter. Et marteler la touche F1 devrait vous être assez surprenant. Pour pas un kopeck, vous avez maintenant un jeu de plate-forme afin de combler la tristesse des longs soirs d'hiver. Bon j'exagère. C'est maintenant que ça devient intéressant. ==== Jouer avec le Jeu ==== 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 : {{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]] )) : {{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 : {{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. Nous allons d'abord **cacher l'image** actuelle du joueur, en cliquant sur le petit œil à côté de sprite. {{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 : {{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. {{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** : {{media_05:changesprite.png?200|changesprite.png changesprite.png}} Et maintenant, **F5 ! Tadaaaaa !** ==== L'intérêt ? ==== Bien, après avoir, pour les plus patient, tiré sur deux ou trois ennemis, on se rend bien compte que ce n'est pas la panacée... Le piaf ne se retourne même pas quand on va à gauche. Nous n'aurions eu qu'à rajouter une ligne de code bien placée, mais l'important n'est pas là. L'essentiel, c'est que nous aurions pu modifier n'importe quoi au sein du jeu, de la même manière que nous l'avons fait ici. L'image des ennemis, facile, mais également le comportement de ceux-ci, la musique si énervante, le décor, le titre de l'application, etc... Et de la même manière, nous aurions pu modifier n'importe lequel des exemples présent dans le fichier de démo. Voire piquer des bouts de ceux-ci (images, scripts, etc...) et les mixer ensemble afin d'en faire un projet démentiel. Et quand l'ennui nous aurait gagné, un petit tour sur GitHub et là encore se trouvent divers projets qui n'attendent que d'être transmutés. Mais avant d'aller plus loin, c'est l'heure d'être créatif. ===== Premières Particules ===== {{media_04:blopxk.png?200|blopxk.png blopxk.png}} ==== Réglages ==== Revenons au gestionnaire de projets. Cette fois-ci, pas d'import, à la place un click sur **New Project**, on retrouve l'adresse du dossier Godot, un petit tour par Create Folder (au nom de l'application), un double-click sur le projet et nous revoilà dans l'éditeur, cette fois-ci désespérement vide. Pas de panique. Hors de Godot, **ouvrez un gestionnaire de fichier** et rendez-vous dans le dossier que vous avez créé. Ici se trouvent 3 fichiers : icon.png.flags ne nous intéresse pas; icon.png est l'icône du projet (changez là mais gardez le nom); engine.cfg permet l'import du projet dans Godot. 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' : {{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. 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. {{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. {{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 : {{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 ? ==== Noeud/Node ==== Le **noeud**, ou **node** en anglais, est un **outil de base** de Godot. Si vous êtes en train de faire quelque chose sur l'espace de travail, vous êtes très probablement en train de modifier un noeud. Ceux-ci peuvent prendre plusieurs formes. Nous avons déjà vu plus haut un noeud particulier, le **sprite**, à savoir une image numérique. Il existe également des noeuds 'bouton', des noeuds 'texte', des noeuds qui permettent d'animer des images, à vrai dire, même les scripts et les scènes sont des noeuds ! 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. {{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 ? On peut voir qu'à l'intérieur de lui se trouvent d'autres types de noeuds, par exemple CanvasItem. Chacun de ces noeuds est en fait un de ses enfants, ce qui implique deux choses : d'abord, ils héritent de ses propriétés. Ensuite, ils ont chacun des propriétés spéciales qui les rendent uniques. Le noeud qui nous intéresse ici s'appelle **Particles2D**; c'est un **enfant du noeud Node2D**, ce qui veut dire qu'il hérite de toutes les propriétés du Node2D, qui est lui-même un enfant du CanvasItem qui est lui-même un enfant du Node. Donc puisque que l'on peut attacher un script au Node, on peut **nécessairement** attacher un script au noeud Particles2D (puisque c'est un de ses héritiers, ici, au quatrième degré). **Assez palabré !** Après un double-click sur Particles2D, voici le noeud ajouté à la fois à l'espace de travail et à la fenêtre Scene. Le raccourci **W** permet, en cliquant, de déplacer notre noeud au milieu de l'écran. Il n'est pas difficile de comprendre ce que permet Particles2D. Grâce à l**'Inspector**, changez la texture du noeud par P02.png (qui se trouve dans **data**). Il s'agit maintenant de se servir de l**'Inspector** pour changer les **propriétés** du noeud. L'image, tout d'abord, est bien trop grosse. La propriété **scale**, héritée de Node2D, permet de réduire sa taille (0.25 semble être une bonne valeur. Puis, la propriété **lifetime** permettra à l'image de durer plus longtemps. Changeons là à 15. Afin d'avoir un rendu propre, nous pouvons indiquer que la taille finale de l'image doit être de 0. Ce qui donne **Final Size** = 0. En guise de test, essayons de pousser les propriétés **spread** et **direction** au max. L'image se modifie, mais très lentement. On peut augmenter la valeur de **timescale** pour une animation plus rapide (à 4 par exemple). Le rendu fixe de l'image est assez déconcertant. Augmenter la valeur de **Spin Velocity** à 2 permet de fluidifier le rendu. Maintenant réduisez la force de gravité (**Gravity Strength**) à 0, et augmentez **Radial Accel** à 10. Montez **Amount** a 575. Pas mal hein ? Mais nous avons perdu la rotation originelle. Pas de problème. Nous allons d'abord augmenter **Initial Angle** a 40, puis, dans **Randomness**, **Initial Angle** a 1, ce qui mettra la valeur de **Initial Angle** de chaque nouvelle particule au hasard, entre 0 et 40. Je note ici que la taille initiale (**Initial Size**) a un meilleur rendu à 0.6. 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. {{media_08:lighteffectsky1.png?200|fig:LightEffectSky1.png}}{{media_06:firelogo.png?200|fig:FireLogo.png}} {{tag>Moteur_de_jeux sb}}