I just got myself a few books on Godot and found them lacking. I went onto Youtube and looked at a few “basic” tutorials. I copied down Brackey's 2D tutorial and ended up with a mini game. But(!), copypasta is not learning. (I want to know why!) Though I can say that this Brackeys tutorial *did work, unlike another I tried, I still felt “left out”. Things I wanted were not explained and things I did not need were explained. I headed back to my book, but that was a mess, with instructions like this: Open a node3d, look at it, delete it, open a node2d, look at it, delete it. You can understand my frustration. That’s when it hit me. If I’m having issues like these, others may too… This article series is aimed at complete n00bs – no experience required! This is mainly because I am a n00b too! I’m using this series as a way to explain what I understand, so that I can be sure that I know, the bit that I know, you know? So here is a tutorial on the Godot interface. Though I’m going to show you around, initially, we will also tackle some “why’s”. I’ll make a separate article on GDScript, I first want the foundation right. I want to help others that may be stuck like me, so don’t expect expert matter. Fire up Godot and let’s get to grips with it. This article series may be a bit image heavy, but bear with me. When you open Godot for the first time, you are greeted with a window with a header like the one shown above.
Je viens de me procurer quelques livres sur Godot et je les ai trouvés insuffisants. Je suis allé sur YouTube et j'ai regardé quelques tutoriels « basiques ». J'ai recopié le tutoriel 2D de Brackey et je me suis retrouvé avec un mini-jeu. Mais attention ! Copier-coller n'est pas la solution pour apprendre. (Je veux savoir pourquoi !) Même si je peux dire que ce tutoriel de Brackey a fonctionné, contrairement à un autre que j'ai essayé, je me suis quand même senti exclu. Ce que je cherchais n'était pas expliqué, et ce dont je n'avais pas besoin l'était. Je suis retourné à mon livre, mais c'était un vrai fouillis, avec des instructions comme : ouvrir un nœud 3D, le regarder, le supprimer ; ouvrir un nœud 2D, le regarder, le supprimer.
Vous pouvez imaginer ma frustration. C'est là que j'ai eu le déclic. Si j'ai ce genre de problèmes, d'autres peuvent aussi… Cette série d'articles s'adresse aux débutants complets – aucune expérience n'est requise ! Principalement parce que je suis moi-même débutant (un n00b !) ! J'utilise cette série d'articles pour expliquer ce que je comprends, afin d'être sûr de bien maîtriser le sujet.
Voici donc un tutoriel sur l'interface de Godot. Je vais vous la présenter, mais nous aborderons d'abord quelques notions de base. Je ferai un article séparé sur GDScript ; je veux d'abord bien comprendre les fondamentaux. Mon but est d'aider ceux qui, comme moi, pourraient être bloqués ; alors ne vous attendez pas à un contenu d'expert.
Lancez Godot et familiarisons-nous avec le logiciel. Cette série d'articles contient beaucoup d'images, mais soyez patients.
Lorsque vous ouvrez Godot pour la première fois, une fenêtre avec un en-tête similaire à celui ci-dessus s'affiche.
Before you do anything, I want you to click on the “settings” button on the right. Here you can set the interface language and change the theme, as well as the scaling – important if you are a bit sight impaired. You also get to change the “Directory naming convention”. By default it is “kebab case”, I prefer to have my directories in “Title Case”, like a normal person, but there are other options for your preference. That was the first thing none of the books or tutorials covered, but I think one should know about. Now we can go and create a new project. At the first field of entry, we can name our project, be it a game or application. The project path gives you a new folder in your home folder, but if you are like me and set up a folder with sub-folders already, you *will get a warning when browsing to said folder, containing say, another folder with your assets. (“The selected path is not empty”) If you are 100% sure your path is correct, you can ignore this warning. The next part, the renderer, does not matter and I’ll show you *why in a bit. For “Version control Metadata” we will be setting ours to “none”, as we are all home users and do not intend on training someone’s AI for free, just to put you out of a job, later. Once you click “Create”, we will be taken to the main Godot interface that we will be spending our time in. We start at the top (shown below). On the left, we have our menu items, followed by our views, which has icons next to the names and are in bold, then comes the controllers, allowing us to play the scenes and lastly the renderer. Remember that I told you “renderer” did not matter on the previous screen? That is because you can come and change it here any time you like. Though Godot is a “game” engine, there is nothing stopping you making applications with it. In fact, there are a few applications made with Godot, and even other game engines! So don’t write off Godot as ‘just’ a game engine. Much like Lazarus or Visual Basic, it excels at making “windows” and buttons and labels for people to interface with. Let’s move on. Going down, we find what's shown above.
Avant toute chose, je vous invite à cliquer sur le bouton « Paramètres » à droite. Vous pourrez y définir la langue de l'interface, changer le thème et ajuster la mise à l'échelle – un point important si vous avez une déficience visuelle. Vous pourrez également modifier la convention de nommage des répertoires. Par défaut, elle est en « kebab case ». Personnellement, je préfère utiliser « Title Case », comme tout le monde, mais d'autres options sont disponibles.
C'est le premier point qu'aucun livre ni tutoriel n'aborde, mais qui me semble pourtant essentiel. Nous pouvons maintenant créer un nouveau projet.
Dans le premier champ, vous pouvez nommer votre projet, qu'il s'agisse d'un jeu ou d'une application. Le chemin du projet crée un nouveau dossier dans votre répertoire personnel. Cependant, si, comme moi, vous avez déjà créé un dossier avec des sous-dossiers, un avertissement s'affichera lorsque vous accéderez à ce dossier, qui contient par exemple un autre dossier avec vos ressources : « Le chemin sélectionné n'est pas vide ». Si vous êtes absolument certain que votre chemin est correct, vous pouvez ignorer cet avertissement. La partie suivante, le moteur de rendu, n'a pas d'importance et je vous expliquerai pourquoi dans un instant. Pour les « Métadonnées de contrôle de version », nous choisirons « aucun », car nous sommes tous des utilisateurs particuliers et nous n'avons pas l'intention d'entraîner gratuitement une IA pour ensuite vous mettre au chômage. Une fois que vous aurez cliqué sur « Créer », vous accéderez à l'interface principale de Godot, dans laquelle nous allons passer du temps. Nous commençons en haut (voir page précédente, en bas).
À gauche, vous trouverez les éléments du menu, suivis des vues, dont les noms sont accompagnés d'icônes en gras, puis les contrôleurs, qui permettent de jouer les scènes, et enfin le moteur de rendu. Vous vous souvenez que je vous ai dit sur l'écran précédent que le moteur de rendu n'avait pas d'importance ? C'est parce que vous pouvez le modifier ici à tout moment.
Bien que Godot soit un moteur de jeu, rien ne vous empêche de créer des applications avec. En fait, il existe déjà des applications développées avec Godot, et même avec d'autres moteurs de jeu ! Ne sous-estimez donc pas Godot en le réduisant à un simple moteur de jeu. À l'instar de Lazarus ou de Visual Basic, il excelle dans la création d'interfaces utilisateur (fenêtres, boutons, étiquettes).
Poursuivons. En descendant, on trouve ce qui est illustré ci-dessus.
Please note, I’m using the default layout for this article and you can change the layout to suit your needs. Let’s concentrate on the centre, as the columns on either side can be moved. You will see that there is a pointer, highlighted, by default. This is our “Select” pointer. If you need it, simply press “Q” or “q”. This allows you to select things. The next icon is the “Move” pointer and you can get to it via the short-cut key, “W” or “w”. This is like moving a sheet of paper that you are drawing on. If you are brand new to Godot, this will trip you up. Everything you see on screen is placed via a vector. To keep it simple, we will stick with 2D for now. (2 vectors) When you create objects on the screen, they are usually overlaid with something else, say, a collision shape, or they don’t interact. The trick is to create scenes with every object and then *link them to your main scene – more on this in the future. Why I mentioned vectors is that everything is relative… to 0,0! This (0,0) is the origin point of your screen, top left, not bottom left! This means that if you drag one layer off by a few pixels and you don’t realise it, things can go horribly wrong in your game, for instance. (I know! Like five years ago, when I first tried Godot, I tried the “Pong” and “Avoid the creeps” tutorials and got bitten.) Don’t worry though, we have ways of fixing those errors. For now, just know that you need to be careful when moving things, first check which icon is highlighted, before you move. The next two icons are “Rotate” and “Scale”, both these will add “handles” to your objects for you to manipulate the objects with. As with all things computer, there is more than one way to do things, and you can also do this in the side panels, or via code.
Veuillez noter que j'utilise la mise en page par défaut pour cet article, mais vous pouvez la modifier selon vos besoins.
Concentrons-nous sur la partie centrale, car les colonnes latérales sont déplaçables. Vous remarquerez un pointeur, sélectionné par défaut. Il s'agit du pointeur « Sélection ». Pour l'utiliser, appuyez simplement sur « Q » ou « q ». L'icône suivante est le pointeur « Déplacer », accessible via le raccourci clavier « W » ou « w ». Ce pointeur permet de déplacer une feuille de papier sur laquelle vous dessinez. Si vous débutez avec Godot, cela peut vous surprendre. Tout ce que vous voyez à l'écran est positionné à l'aide d'un vecteur. Pour simplifier, nous resterons en 2D pour le moment (2 vecteurs). Lorsque vous créez des objets à l'écran, ils sont généralement superposés à un autre élément, par exemple une forme de collision, ou bien ils n'interagissent pas. L'astuce consiste à créer des scènes pour chaque objet, puis à les lier à votre scène principale. Nous reviendrons sur ce point plus tard. Si j'ai mentionné les vecteurs, c'est parce que tout est relatif… à l'origine (0,0) ! Ce point (0,0) correspond à l'origine de votre écran, en haut à gauche, et non en bas à gauche ! Cela signifie que si vous déplacez un calque de quelques pixels sans vous en rendre compte, cela peut avoir des conséquences désastreuses dans votre jeu, par exemple. (Je sais ! Il y a cinq ans, quand j'ai découvert Godot, j'ai essayé les tutoriels « Pong » et « Éviter les monstres » et je me suis fait avoir.) Mais ne vous inquiétez pas, il existe des solutions pour corriger ces erreurs. Pour l'instant, retenez simplement qu'il faut être prudent lorsque vous déplacez des objets : vérifiez d'abord quelle icône est sélectionnée avant de déplacer quoi que ce soit. Les deux icônes suivantes sont « Rotation » et « Échelle ». Elles ajoutent toutes deux des poignées à vos objets pour vous permettre de les manipuler. Comme souvent en informatique, il existe plusieurs façons de procéder, et vous pouvez également utiliser les panneaux latéraux ou le code.
While we are on the topic of making mistakes, at any time, you can press CTRL+z to undo! As a newbie, this will be your saving grace a lot of times. OK - the next two buttons I have never used, and you are welcome to click them. You will see that nothing changes and no handles appear. We don’t need them as of now, so we leave them be. (for now…) Next, we have “Pan mode” (middle mouse button move or G) that is not to be confused with move mode (second icon). One moves the canvas on the screen, while the other one moves the screen or viewport. You can try it out, but without something to reference it against, you will not “see” it move. (You know, like relativity, if there is nothing to move relative to, are you moving anything?) So drag the Godot icon to the screen before testing! Than brings me to my next point, play, play play. You cannot break anything in an empty project. Even if you manage to do so, you discard it and open a new one, so feel free to try out anything and see what it does! The next icon is the “Ruler” “R” or “r”. Not as in king, but as in measurement. When you are in this mode, you can drag a ruler out of the margins and it will measure, in pixels, as you move it. This can be handy when you need to do some maths, like say, you are making Pong and you don’t want your paddle to go out of the playing area. You have no idea how big your paddle is, so you measure it and then subtract half from the edge of the screen, for your stopping position.
Puisqu'on parle d'erreurs, sachez que vous pouvez toujours appuyer sur CTRL+Z pour annuler ! Pour un débutant, cette fonction vous sauvera la mise bien des fois. Passons aux deux boutons suivants : je ne les ai jamais utilisés, mais n'hésitez pas à cliquer dessus. Vous verrez que rien ne change et qu'aucune poignée n'apparaît. Nous n'en avons pas besoin pour l'instant, alors laissons-les tels quels (pour le moment…).
Ensuite, nous avons le « Mode panoramique » (accessible avec le bouton central de la souris ou la touche G), à ne pas confondre avec le mode déplacement (deuxième icône). L'un déplace le canevas à l'écran, tandis que l'autre déplace l'écran ou la fenêtre d'affichage. Vous pouvez l'essayer, mais sans point de référence, vous ne verrez pas le mouvement. (C'est un peu comme en relativité : si rien ne sert de repère, est-ce que vous déplacez quelque chose ?) Alors, faites glisser l'icône Godot sur l'écran avant de tester ! Ce qui m'amène à mon point suivant : amusez-vous, amusez-vous, amusez-vous ! Impossible de faire des erreurs dans un projet vide. Même si vous y parvenez, vous pouvez l'abandonner et en ouvrir un nouveau. N'hésitez donc pas à tout essayer et à voir ce que ça donne ! L'icône suivante est la « Règle », « R » ou « r ». Non pas comme dans « roi », mais comme dans « mesure ». Dans ce mode, vous pouvez faire glisser une règle hors des marges et elle mesurera, en pixels, au fur et à mesure de votre déplacement. Cela peut s'avérer pratique pour faire des calculs, par exemple si vous créez un jeu Pong et que vous ne voulez pas que votre raquette sorte de la zone de jeu. Vous ne connaissez pas la taille de votre raquette, alors vous la mesurez et vous soustrayez la moitié du bord de l'écran pour obtenir sa position d'arrêt.
The next two icons are for snapping. When you need to snap things to a grid layout, for instance, when you are painting a level, you will use these. They are “Smart Snap” and “Snap to Grid” and we will see them in action a bit later in this series. On an empty project, you won’t see anything. The upright ellipses are for configuring the snapping behaviour. The next two are for nodes you are working on. The first locks the node, for when you have something just so, and you don’t want it to change and the next one is “Grouping” the node and it’s children, for instance, if you want to move the lot at once. Like before, there are other ways to achieve this too, though, I used to use it often in the beginning when I first used Godot, I now seldom do. I suspect it will be the same for you. The bone icon is just that, options for skeletons, if you use models. For now, we will be sticking to the simple things, getting you to do stuff. If there is interest, we can move on to more in-depth things. The thing I want you to take home is try, plop the Godot icon on the screen by dragging it to the centre pane and try out the buttons on it, (with it selected) to see what they do. I’ll leave “View” to you, as it is just that, viewing options. Join us next issue as we explore further! Complaints? misc@fullcirclemagazine.org
Les deux icônes suivantes servent à l'alignement. Elles vous seront utiles pour aimanter des éléments sur une grille, par exemple lors de la création d'un niveau. Il s'agit des icônes « Aimantation intelligente » et « Utiliser l'aimantation à la grille », que nous verrons en pratique plus tard dans cette série. Sur un projet vide, elles ne sont pas visibles. Les 3 points verticaux permettent de configurer le comportement d'alignement. Les deux icônes suivantes concernent les nœuds sur lesquels vous travaillez. La première verrouille le nœud, utile lorsque vous avez une position précise et que vous ne souhaitez pas la modifier. La seconde permet de grouper le nœud et ses enfants, par exemple si vous voulez les déplacer tous en une seule fois. Comme précédemment, il existe aussi d'autres méthodes pour le faire ; je l'utilisais fréquemment à mes débuts avec Godot, c'est rare aujourd'hui. Je suppose que ce sera la même chose pour vous. L'icône représentant un os donne accès aux options des squelettes, si vous utilisez des modèles. Pour l'instant, concentrons-nous sur les bases et la pratique. Si cela vous intéresse, nous pourrons approfondir certains points. Pour commencer, essayez de placer l'icône Godot sur l'écran en la faisant glisser vers le panneau central et testez les boutons du menu (une fois l'icône sélectionnée) pour en comprendre le fonctionnement. Je vous laisse le soin d'explorer le menu « Affichage », qui propose uniquement des options d'affichage.
Retrouvez-nous dans le prochain numéro pour poursuivre notre exploration !
Des réclamations ? misc@fullcirclemagazine.org