Godot : Guide complet de l’interface (Viewport, Scene, Inspector, Output) sur Main.tscn
Formations

Godot : Guide complet de l’interface (Viewport, Scene, Inspector, Output) sur Main.tscn

Antharuu Antharuu
10 min de lecture
Godot godot 4 tutoriel godot interface godot editeur godot nodes godot scenes godot inspector godot viewport godot debug godot output projet dodge arena gdscript debutant

Vous voilà dans Godot, projet Dodge Arena ouvert, scène Main.tscn sous les yeux. Et c’est parfait, parce que l’interface, c’est un peu votre “bureau de travail” (et au début, on peut vite se sentir comme dans un cockpit). Accrochez-vous : on va voir ça ensemble, tranquillement, et surtout de façon pratique.

1) Contexte rapide (5 lignes max)

On est au tout début du projet Dodge Arena. Le projet est déjà créé, les dossiers sont rangés (scenes, scripts, sprites, audio), et la scène scenes/Main.tscn existe. Là, votre mission, c’est simple : apprivoiser l’éditeur Godot (les panneaux, les nodes, les propriétés, et le panneau d’erreurs). Bref, vous passez de “je clique partout” à “je sais où je suis”.

2) Objectifs clairs (3 à 6)

À la fin du module, vous savez :

  1. Identifier et utiliser les 5 zones de base : Viewport, Scene dock, Inspector, FileSystem, Output.
  2. Ajouter des nodes, les renommer, et les réorganiser dans la hiérarchie (drag & drop).
  3. Modifier des propriétés dans l’Inspector (texte, position, visibilité) et voir l’effet dans le viewport.
  4. Expliquer la différence entre éditer (construction) et lancer (test en jeu) et utiliser F5 / F8.
  5. Lire un message d’erreur dans l’Output et retrouver la ligne fautive (double-clic).

3) Mini glossaire (simple et utile)

  • Node (nœud) : un élément de base dans Godot (un “bloc LEGO”). Tout est un node.
  • Scène (scene) : un assemblage de nodes sauvegardé dans un fichier .tscn (genre “niveau”, “menu”, “joueur”…).
  • Hiérarchie : l’arbre parent/enfant des nodes (si le parent bouge, l’enfant suit, c’est logique mais parfois piégeux).
  • Viewport : la grande zone centrale où vous voyez et manipulez la scène.
  • Inspector : le panneau qui affiche les propriétés du node sélectionné (position, texte, visibilité, etc.).
  • FileSystem : l’explorateur de fichiers du projet (vos scènes, scripts, images…).
  • Output : le journal : erreurs (rouge), warnings (jaune), infos (texte normal).
  • CanvasLayer : un node pratique pour l’UI (il “passe au-dessus” du monde 2D, c’est top pour les scores).

4) Pas à pas guidé (avec checkpoints)

Étape 0 — Remettre une disposition propre (optionnel mais conseillé)

Vous vous demandez peut-être : “Et si mon interface est bizarre ?”. C’est fréquent.

  • Allez dans Éditeur / Vue / Disposition (le nom exact varie un peu selon version)
  • Revenez sur une disposition 2D par défaut si besoin

Checkpoint : vous voyez bien :

  • un panneau à gauche (Scene),
  • un grand centre (Viewport),
  • un panneau à droite (Inspector),
  • en bas (FileSystem + Output).

5) Tour guidé des panneaux (le “plan de la cuisine”)

5.1 Le Viewport (au centre), c’est votre scène en direct

Le viewport, c’est l’endroit où vous “voyez le jeu” pendant que vous construisez. C’est souvent vide au début (c’est normal, ce n’est pas cassé).

Gestes utiles (2D) :

  • Zoom : roulette
  • Pan (déplacer la vue) : souvent molette clic + glisser (selon config)
  • Sélectionner un objet : clic gauche sur l’objet (quand il existe)

Checkpoint : vous êtes bien en onglet 2D (pas 3D), et vous avez une zone centrale prête à accueillir des éléments.

5.2 Le Scene dock (à gauche), c’est l’arbre généalogique

Ici, Godot liste tous les nodes de la scène, du parent vers les enfants. Et ça, c’est méga important, parce que la hiérarchie influence les transformations.

  • Un enfant hérite du mouvement du parent (si le parent bouge, l’enfant suit).
  • Un arbre propre, c’est un projet plus simple à maintenir (sinon, bon courage).

Checkpoint : dans Main.tscn, vous avez au moins un node racine (souvent un Node2D).

5.3 L’Inspector (à droite), c’est la fiche d’identité du node

L’Inspector, c’est “vous sélectionnez un node → vous modifiez ses propriétés”. C’est direct, c’est concret.

Exemples classiques :

  • Transform / Position : placer un node
  • Visibility / Visible : afficher/cacher
  • Pour un Label : Text (le texte affiché)

Checkpoint : cliquez un node dans l’arbre → l’Inspector change (si rien ne change, c’est que rien n’est sélectionné).

5.4 FileSystem (en bas), c’est votre bibliothèque du projet

C’est l’explorateur interne de Godot. Tout ce qui est dans res:// fait partie du projet.

À vérifier :

  • res://scenes/Main.tscn est visible
  • vos dossiers existent bien

Checkpoint : ouvrez scenes → vous voyez Main.tscn.

5.5 Output (en bas), c’est le journal (ce qui se passe vraiment)

L’Output, c’est votre meilleur ami quand ça ne marche pas. Il affiche :

  • infos (normal)
  • warnings (souvent jaune)
  • erreurs (souvent rouge)

Et le truc génial, c’est que double-cliquer une erreur peut vous amener directement à la ligne concernée (quand c’est lié à un script).

Checkpoint : vous repérez l’onglet/panneau Output et vous voyez où apparaissent les erreurs.

6) Éditer vs Lancer (la différence qui change tout)

  • Éditer, c’est construire : vous placez des nodes, changez des valeurs, organisez l’arbre. Rien ne “vit” vraiment (pas de gameplay en cours).
  • Lancer, c’est tester : le jeu tourne, la physique et les scripts s’exécutent, et l’Output commence à parler (parfois fort).

Raccourcis utiles :

  • Lancer : F5
  • Stop : F8

Et oui : sauvegardez avant de lancer, c’est une habitude qui vous sauvera (surtout plus tard).

7) Manipuler des nodes (pratique guidée + tests)

On va faire une mini-manipulation “bac à sable”. C’est temporaire : on va créer, déplacer, tester, puis nettoyer.

Étape 1 — Ajouter des nodes

  1. Dans le Scene dock, clic droit sur le node racine (ex: Main) → Ajouter un enfant
  2. Cherchez Node2D → ajoutez-le
  3. Sur ce nouveau Node2D, ajoutez un enfant Sprite2D
  4. Sur Sprite2D, ajoutez un enfant Label

Checkpoint (arbre attendu) :

Main (Node2D)
└── Node2D
    └── Sprite2D
        └── Label

Si ce n’est pas exactement ça, c’est OK : vous pouvez glisser-déposer un node sur un autre pour changer sa place.

Étape 2 — Renommer proprement

Les noms par défaut, c’est pratique pour 10 secondes, mais après c’est le chaos.

  1. Double-clic sur Node2D → renommez en TestContainer
  2. Sprite2D → TestSprite
  3. Label → TestLabel

Checkpoint :

Main
└── TestContainer
    └── TestSprite
        └── TestLabel

Petit repère : pas d’espaces, pas d’accents, des noms descriptifs (ça évite les galères quand vous scriptrez).

Étape 3 — Réorganiser la hiérarchie

On va déplacer TestLabel pour qu’il ne soit plus enfant de TestSprite.

  1. Sélectionnez TestLabel
  2. Glissez-le sur TestContainer (pas sur TestSprite)
  3. Il devient “frère” de TestSprite

Checkpoint :

Main
└── TestContainer
    ├── TestSprite
    └── TestLabel

Étape 4 — Modifier des propriétés (et voir le résultat)

  1. Sélectionnez TestLabel
  2. Dans l’Inspector :
    • Text : mettez Bonjour Godot !
    • Position : X = 100, Y = 100

Checkpoint : le texte apparaît dans le viewport.
Si vous ne voyez rien : zoom arrière, ou vérifiez que TestLabel est visible et bien positionné (ça arrive vite de “le perdre”).

Étape 5 — Sauvegarder (scène vs projet)

  • Ctrl + S : sauvegarde la scène ouverte (Main.tscn)
  • Ctrl + Shift + S (selon config) ou menu projet : sauvegarde plus globalement (paramètres, etc.)

Test :

  1. Sauvegardez
  2. Lancez avec F5
  3. Arrêtez avec F8

Checkpoint : pas d’erreur rouge (et si le texte n’apparaît pas en jeu, on en reparle juste après : selon votre setup caméra / UI / viewport, ce n’est pas toujours “évident”, mais l’important ici, c’est que vous savez où regarder).

8) Provoquer et lire une erreur (sans paniquer)

Oui, on va faire exprès de casser (c’est pédagogique, et c’est rassurant de voir que tout le monde a des erreurs).

Étape 1 — Ajouter un script à TestLabel

  1. Sélectionnez TestLabel
  2. Cliquez Ajouter un script (icône script) → Nouveau script → GDScript → Créer

Étape 2 — Écrire une erreur volontaire

Dans le script, mettez par exemple :

func _ready():
	print("Erreur")

Puis, cassez-le volontairement, genre en supprimant les deux-points :

func _ready()
	print("Erreur")

Étape 3 — Lancer et lire l’Output

  1. Lancez F5
  2. Regardez Output : vous devriez voir une erreur de parsing (rouge)
  3. Double-cliquez l’erreur : Godot vous amène à la ligne fautive

Checkpoint : vous savez repérer :

  • le type d’erreur (parser error / expected token…)
  • le fichier concerné
  • la ligne

Corrigez, relancez, et vérifiez que l’Output est propre.

9) Erreurs fréquentes (si tu vois X, c’est sûrement Y)

  • “Je ne vois plus mon Label” → il est hors écran (position trop grande), vous êtes trop zoomé, ou Visible est décoché.
  • “Je ne peux pas glisser un node” → vous le glissez sur le mauvais endroit (essayez sur le nom du parent dans l’arbre).
  • “Rien ne se passe quand je lance” → normal si vous n’avez pas de gameplay (mais l’Output doit être propre).
  • Erreur rouge au lancement → souvent un script avec une faute de syntaxe (double-clic dans Output, c’est votre raccourci de survie).
  • Un enfant se déplace “tout seul” → il suit son parent (hiérarchie), ce n’est pas un bug, c’est la logique parent/enfant.

10) Exercices

Exercice 1 (facile) — Reproduire une mini-hiérarchie

Créez exactement ceci dans Main.tscn :

Main (Node2D)
├── World (Node2D)
│   └── PlayerPlaceholder (Node2D)
└── UI (CanvasLayer)
    └── ScoreLabel (Label)

Étapes :

  1. Sous Main : ajoutez Node2D → renommez World
  2. Sous World : ajoutez Node2D → renommez PlayerPlaceholder
  3. Sous Main : ajoutez CanvasLayer → renommez UI
  4. Sous UI : ajoutez Label → renommez ScoreLabel
  5. Dans l’Inspector de ScoreLabel : Text = "Score: 0"
  6. Dans l’Inspector de PlayerPlaceholder : Position X=200, Y=300

Checkpoint :

  • l’arbre correspond exactement
  • vous voyez “Score: 0” dans le viewport (ou au moins vous savez le retrouver via position/zoom)

Exercice 2 (challenge) — Inspector sans aide (5 minutes)

  1. Cacher le label : trouvez l’option Visible dans l’Inspector de ScoreLabel et mettez-la à faux.
  2. Centrer PlayerPlaceholder : si votre fenêtre de jeu cible est 1280×720, mettez Position à (640, 360).
  3. Dupliquer World : dupliquez World, renommez la copie Background, puis ajoutez un ColorRect en enfant (et changez sa couleur en gris clair).

Checkpoint :

  • ScoreLabel n’apparaît plus quand Visible est off
  • PlayerPlaceholder est au centre (en coordonnées)
  • Background existe et contient un ColorRect

11) Récap + checklist

Ce que vous avez fait, c’est solide (et c’est la base de tout le reste) :

  • L’éditeur, c’est des panneaux (Viewport, Scene dock, Inspector, FileSystem, Output)
  • Un jeu Godot, c’est une hiérarchie de nodes
  • L’Inspector, c’est l’endroit où vous “pilotez” les propriétés
  • Lancer (F5), c’est le test réel, et l’Output, c’est le journal
  • Une erreur, ça se lit, ça se suit, et ça se corrige (double-clic, ligne, correction)

Checklist de fin :

  • Je sais où sont Viewport / Scene / Inspector / FileSystem / Output
  • Je sais ajouter, renommer, déplacer, dupliquer et supprimer un node
  • Je comprends parent/enfant (héritage des transformations)
  • Je sais lancer (F5) et arrêter (F8)
  • Je sais lire une erreur rouge dans Output et retrouver la ligne
  • J’ai la hiérarchie World + UI en place et sauvegardée

12) Pont vers le module suivant (sans spoiler)

Maintenant que l’interface n’est plus un labyrinthe, la suite devient beaucoup plus fun : on va pouvoir donner un vrai rôle aux nodes (mouvement, collisions, score). Le prochain module, c’est généralement celui où vous commencez à “animer” votre scène avec des scripts et des signaux (et là, l’Output va devenir votre copilote officiel).

Articles similaires