Créer une scène d’entrée solide sur Godot 4 : orchestrer World, Player et HUD dans Main

Vous etes deja bien avance, c'est top. Mais attendez une minute... tant que Main.tscn n'est pas pensee comme une vraie 'scene d'entree', votre projet reste un peu comme un sac avec des pieces dedans (Player d'un cote, HUD de l'autre), sans 'chef d'orchestre' pour faire jouer tout le monde ensemble. Accrochez-vous, on va voir ca ensemble, et a la fin vous appuyez sur F5... et vous voyez vraiment quelque chose a l'ecran.

1) Contexte rapide (ou on en est)

Vous avez deja un projet Godot 4 organise avec trois scenes : Main.tscn, Player.tscn et HUD.tscn. Elles existent et vous pouvez les ouvrir, mais pour l'instant Main n'est pas forcement configuree comme scene de demarrage, ni structuree pour assembler 'le monde' et 'l'interface'.

L'objectif de ce module est simple : transformer Main en point d'entree du jeu.

World : la partie jeu (Player, decors, collisions, camera, etc.)
UI : la partie interface (HUD, labels, barres de vie, etc.)

Quand c'est en place, vous lancez le projet avec F5, et vous obtenez une scene non vide, visible, et surtout structuree proprement. C'est la base qui evite ensuite 80% des 'pourquoi je ne vois rien' et des 'mon HUD bouge avec la camera'.

2) Objectifs clairs (mesurables)

A la fin du module, vous devez pouvoir :

Construire dans Main.tscn une hierarchie Main -> World -> Player et Main -> UI -> HUD (sans approximation).
Instancier Player.tscn et HUD.tscn au bon endroit, avec des noms propres.
Ajouter un fond visible (couleur ou sprite) pour valider visuellement que la scene tourne.
Definir Main.tscn comme Main Scene dans les parametres du projet.
Lancer le projet avec F5 et obtenir une scene non-vide (fond + Player + HUD).
Depanner les pannes classiques : mauvaise scene lancee, ecran vide, UI invisible.

3) Mini glossaire (simple, sans jargon inutile)

Scene (Scene) : un 'paquet' de noeuds sauvegarde (.tscn), reutilisable et instanciable.
Noeud (Node) : une brique dans l'arbre. Tout dans Godot est un noeud (ou presque).
Instancier : mettre une scene dans une autre comme un enfant (Player dans Main, par exemple).
Node2D : noeud 2D avec position/rotation/scale (pratique pour le monde 2D).
CanvasLayer : noeud pour UI affichee au-dessus, independante de la camera.
Main Scene : la scene que Godot lance quand vous faites Run Project (F5).

4) Pas a pas guide (avec checkpoints)

Etape 1 : ouvrir et 'sanitiser' Main.tscn

Ouvrez Godot 4 puis votre projet.
Dans FileSystem, ouvrez Main.tscn.
Regardez le noeud racine : idealement, il s'appelle Main et c'est un Node.

Pourquoi Node en racine ?
Parce que Main n'est pas 'un objet du monde'. C'est l'orchestrateur : il assemble le monde et l'UI, declenche des initialisations, coordonne des scenes, et plus tard gerera souvent des transitions (menu -> jeu, niveau 1 -> niveau 2, pause, game over). Un Node en racine garde les choses neutres et propres.

Si votre racine est un Node2D :
Ce n'est pas dramatique. Vous pouvez le garder si ca vous simplifie la vie aujourd'hui. Mais la structure recommande reste Node pour Main, et Node2D pour World.

Checkpoint #1
Dans l'arbre, vous avez un noeud racine clair, nomme Main, de type Node.

Etape 2 : construire la hierarchie recommandee (World + UI)

On vise exactement ca. Notez bien que l'UI n'est pas dans World.

Main (Node)
├── World (Node2D)
│   └── Player (instance de Player.tscn)
└── UI (CanvasLayer)
    └── HUD (instance de HUD.tscn)

Pourquoi cette structure est solide ?

World (Node2D) regroupe tout ce qui est 'dans l'espace 2D' : positions, camera, collisions.
UI (CanvasLayer) est rendue a part, au-dessus, et ne bouge pas avec la camera. Resultat : votre HUD reste stable.

2.1 Ajouter World

Clic droit sur Main -> Add Child Node
Choisissez Node2D
Renommez-le World

Checkpoint rapide : vous avez Main/World.

2.2 Instancier Player.tscn dans World

Clic droit sur World -> Instantiate Child Scene
Choisissez Player.tscn
Verifiez que l'instance s'appelle Player (renommez si besoin)

Ensuite, placez-le au centre de l'ecran pour un premier test. Si vous etes sur une resolution type 1280x720, le centre est environ (640, 360).

Selectionnez Player
Inspecteur -> Transform / Position
- x = 640
- y = 360

C'est volontairement 'a la main' : l'objectif ici n'est pas encore de faire un spawn system, mais de s'assurer que votre Player est dans la zone visible.

2.3 Ajouter UI puis instancier HUD.tscn

Clic droit sur Main -> Add Child Node
Choisissez CanvasLayer
Renommez-le UI

Puis :

Clic droit sur UI -> Instantiate Child Scene
Choisissez HUD.tscn
Verifiez le nom HUD

Pourquoi CanvasLayer ?
Parce que l'UI doit rester stable. Le monde bouge, la camera bouge, parfois vous 'shakez' la camera, parfois vous zoomez. Si le HUD etait dans World, il ferait partie du decor et suivrait les mouvements. CanvasLayer evite ca.

Checkpoint #2
Votre hierarchie correspond exactement au schema. Sauvegardez Ctrl+S.

Etape 3 : ajouter un fond visible (pour eviter le 'vide total')

Pourquoi ajouter un fond si vous avez deja un Player ?
Parce que dans un premier test, si tout est noir, vous doutez : est-ce que le jeu tourne ? est-ce que je lance la bonne scene ? est-ce que mon Player est hors ecran ? est-ce que je n'ai pas de camera ? Un fond visible donne un repere immediat.

Vous avez deux options simples.

Option A : ColorRect (rapide pour un test)

Clic droit sur World -> Add Child Node -> ColorRect
Dans l'inspecteur :
- Color : choisissez une couleur visible
- Layout / Anchors Preset : Full Rect

Important : ColorRect est un Control (UI). Ce n'est pas le plus 'orthodoxe' dans un monde 2D, mais pour un fond de test, c'est ultra pratique et suffisant. L'objectif est juste de valider que vous voyez quelque chose a l'ecran.

Si vous remarquez que le ColorRect passe devant le Player, deux solutions simples :

Deplacez le ColorRect plus bas dans l'ordre de rendu (ou assurez-vous que le Player est dessine au-dessus).
Ou choisissez l'option B avec un Sprite2D en arriere-plan.

Option B : Sprite2D (plus 'monde 2D')

Ajoutez une image (PNG/JPG) dans votre projet.
Clic droit sur World -> Add Child Node -> Sprite2D
Assignez la Texture
Ajustez Position et Scale si besoin

Checkpoint #3
En lancant la scene (meme en F6), vous voyez un fond. Donc vous savez que le rendu est OK.

Etape 4 : definir Main.tscn comme scene principale (le vrai 'clic F5')

C'est le passage qui transforme votre projet en 'jeu qui demarre'.

Menu Project -> Project Settings
Application -> Run
Main Scene : choisissez res://Main.tscn
Fermez (Godot sauvegarde automatiquement les project settings, mais verifiez que le chemin est bien affiche)

Ensuite, retenez bien la difference :

F6 (Run Current Scene) : lance la scene actuellement ouverte.
F5 (Run Project) : lance la Main Scene definie dans les parametres.

Le but ici est precis : F5 doit lancer Main.tscn, pas une autre scene.

Checkpoint #4
Appuyez F5. Vous tombez bien sur Main (fond visible, Player, HUD).

Etape 5 : tester proprement (quoi regarder)

A ce stade, vous devez voir :

un fond visible
votre Player (ou au moins un element visuel associe)
le HUD par-dessus (panel, label, etc.)

Si vous voyez le fond et le HUD mais pas le Player, c'est souvent :

le Player n'a pas de Sprite2D/visuel
sa position est hors ecran
un element le cache
ou un probleme de camera dans votre setup

On ne va pas partir trop loin sur la camera ici, mais gardez la regle simple : pour un premier test, placez le Player au centre, et assurez-vous qu'il a quelque chose a afficher.

Checkpoint #5
Vous avez un affichage 'non vide' et coherent en F5.

5) Main comme orchestrateur (le role a comprendre)

Le point important du module n'est pas juste 'faire apparaitre quelque chose'. C'est de comprendre le role de Main :

Main assemble les grandes parties : World + UI.
Main est un point d'entree unique : quand vous appuyez F5, vous savez ce qui se lance.
Main est un bon endroit pour initialiser des choses globales : placement du Player, connexion de signaux, chargement de niveau, etc.

Pour le prouver, voici un mini script optionnel. Il ne change pas la structure, il la rend juste plus lisible pendant vos tests.

Script minimal sur Main (optionnel mais recommande)

Selectionnez Main
Attach Script
Collez :

extends Node

func _ready() -> void:
	print("Main: jeu lance.")

Test :

Lancez F5
Regardez l'onglet Output
Vous devez voir : Main: jeu lance.

Si vous ne le voyez pas, c'est presque toujours :

Main n'est pas la Main Scene
ou vous lancez F6 sur une autre scene ouverte

6) Depannage (si tu vois X, alors c'est surement Y)

1) 'F5 lance une autre scene'

Symptome : vous appuyez F5 et vous tombez sur une scene 'random'.
Cause probable : Main Scene pas configuree (ou pas sur Main).
Fix : Project Settings -> Application -> Run -> Main Scene -> res://Main.tscn.

Astuce de formateur : quand vous depannez, faites une fois F6 sur Main ouverte pour etre sur de ce que vous testez, puis revenez sur F5 une fois la Main Scene reglee.

2) 'Ecran noir / vide'

Symptome : rien du tout, juste du noir.
Causes probables :
- pas de fond, et votre Player n'a rien de visible
- le fond ne couvre pas l'ecran (anchors pas en Full Rect si ColorRect)
- votre Player est en dehors de la zone visible
Fix rapides :
- ajoutez un fond visible (ColorRect Full Rect ou Sprite2D)
- remettez le Player au centre (640, 360)
- verifiez que Player a un Sprite2D, ou au moins un element dessinable

3) 'HUD invisible ou qui bouge avec le monde'

Symptome : le HUD n'apparait pas, ou il se deplace quand le monde bouge.
Cause probable : HUD pas sous CanvasLayer, ou mauvais ancrage si c'est un Control.
Fix :
- assurez-vous que UI est un CanvasLayer
- que HUD est enfant de UI
- et que vos Controls utilisent les anchors/presets adaptes

7) Exercices

Exercice : refaire l'arbre exact (sans reflechir)

Dans votre projet :

Ouvrez Main.tscn
Creer/valider Main (Node)
Ajoutez World (Node2D)
Instanciez Player.tscn dans World et renommez l'instance Player
Ajoutez UI (CanvasLayer)
Instanciez HUD.tscn dans UI et renommez l'instance HUD
Ajoutez un fond (ColorRect Full Rect ou Sprite2D)
Definissez res://Main.tscn comme Main Scene
Lancez F5

Critere de reussite : F5 affiche un fond + Player + HUD.

Challenge : ajouter un label 'Version 0.1' qui reste fixe

Objectif : pratiquer l'UI et verifier que votre CanvasLayer fait bien son travail.

Dans UI (CanvasLayer), ajoutez un Label (ou dans votre HUD si vous preferez).
Texte : Version 0.1
Ancrage : en bas (gauche ou droite, comme vous voulez)
Ajustez la taille de police (ex : 20-24)

Test : si plus tard la camera bouge ou le monde bouge, le label ne doit pas bouger. S'il bouge, c'est que vous l'avez mis dans World (ou que vous n'etes pas dans un CanvasLayer).

8) Recap + checklist (ce qui doit etre vrai a la fin)

Main.tscn a une racine Node nommee Main
Hierarchie : Main/World (Node2D)/Player (instance)
Hierarchie : Main/UI (CanvasLayer)/HUD (instance)
Vous avez un fond visible (au moins pour le test)
Project Settings -> Main Scene pointe vers res://Main.tscn
F5 lance directement Main
Vous savez depanner si F5 lance une autre scene

9) Mini quiz (validation rapide)

A quoi sert Main Scene dans les Project Settings ?
Pourquoi met-on le HUD sous un CanvasLayer plutot que dans World ?
Quelle est la difference entre F5 et F6 ?
Vous voyez le HUD et le fond, mais pas le Player. Donnez 2 causes probables.
Recitez l'hierarchie recommandee de ce module (noms et types principaux).