Outils pour utilisateurs

Outils du site


godot

Ceci est une ancienne révision du document !


Godot

Présentation

icon.png icon.png

**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.

Pour commencer

Installation

La démarche la plus simple pour commencer à utiliser Godot reste de télécharger l'application ici 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 :

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 :

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 )) :

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 :

openineditor.png openineditor.png

Plusieurs fenetres ont changé, ce qui est normal : nous avons changé de scène. Nous allons maintenant manipuler les noeuds 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 oeil à côté de sprite.

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 :

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.

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 <html><null></html>, à côté de Texture :

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

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' :

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.

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.

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 :

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.

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.

fig:LightEffectSky1.pngfig:FireLogo.png

Ressources Externes

Tout d'abord 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 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 cette page. N'hésitez pas à y faire un tour.

godot.1533315690.txt.gz · Dernière modification : 2018/08/03 17:01 de serge