Comment faire un personnage jouable dans Godot 4 : setup du CharacterBody2D pas a pas
Formations

Comment faire un personnage jouable dans Godot 4 : setup du CharacterBody2D pas a pas

Antharuu Antharuu
11 min de lecture
godot 4 tutoriel godot 4 instancier une scene godot hierarchie de noeuds godot player tscn characterbody2d collision shape 2d sprite2d debug collisions godot creer un personnage 2d

Vous etes en train de poser une brique mega importante de votre jeu fil rouge : un Player propre, reutilisable, et facile a instancier. Et oui, c'est 'juste' un perso avec un sprite et une collision... mais en vrai, c'est le socle de tout le reste (deplacements, sauts, interactions, degats, camera, etc.). Accrochez-vous, on va faire ca ensemble, pas a pas.

1) Contexte rapide (5 lignes max)

Jusqu'ici, vous avez un projet Godot 4 qui tourne, et une scene principale Main qui sert de scene de demarrage. Vous avez aussi un Player.tscn en placeholder. L'objectif, c'est de rendre Player.tscn proprement instanciable : une hierarchie claire, un sprite visible, une collision fiable, puis une instance dans Main pour verifier que tout apparait correctement a l'ecran.

2) Objectifs clairs (3 a 6)

A la fin du module, vous serez capable de :

  • Construire Player.tscn avec CharacterBody2D, Sprite2D et CollisionShape2D.
  • Faire les reglages essentiels : position, taille du sprite, forme et taille de collision.
  • Verifier visuellement la collision avec les options de debug.
  • Instancier Player.tscn dans Main.tscn et appliquer des bonnes pratiques de nommage.
  • Diagnostiquer les pieges courants : scale sur CollisionShape2D, collision mal alignee, player invisible.

3) Mini glossaire (simple et utile)

  • Scene (.tscn) : un bloc reutilisable (un perso, un ennemi, une porte...), instanciable ailleurs.
  • Instance : une copie vivante d'une scene placee dans une autre scene (ex: Player.tscn dans Main.tscn).
  • CharacterBody2D : un corps fait pour les personnages, avec un mouvement controle et des collisions gerees via move_and_slide().
  • Sprite2D : l'image affichee (texture) de votre personnage.
  • CollisionShape2D : la forme de collision (rectangle, capsule, cercle...) utilisee par la physique.
  • Shape : la ressource interne du CollisionShape2D (ex: RectangleShape2D) que vous dimensionnez.
  • Debug collision : options d'affichage qui permettent de voir les formes de collision pendant l'execution.

4) Pourquoi CharacterBody2D, c'est le bon choix (et pourquoi ce n'est pas 'juste un detail')

Dans Godot, il y a plusieurs types de corps et plusieurs facons de bouger un objet. Pour un joueur, CharacterBody2D est generalement le meilleur point de depart, surtout en debutant.

Pourquoi ?

  • Vous gardez le controle : c'est vous qui decidez de velocity. Le personnage reagit comme un perso de jeu, pas comme un objet physique.
  • Les collisions sont gerables : move_and_slide() s'occupe de la glisse contre les murs, du contact au sol, et de pas mal de cas classiques.
  • C'est stable pour apprendre : vous evitez les surprises liees aux forces et a l'inertie.

Le piege classique, c'est de se dire : 'RigidBody2D, c'est plus realiste donc meilleur'. Pour un joueur, on cherche plutot du reactif et du previsible. Vous pourrez toujours utiliser RigidBody2D plus tard pour des caisses, des projectiles, ou des objets pousses par la physique.

Ce choix vous aide aussi pour la suite : quand vous ajouterez gravite, saut, coyote time, acceleration, etc., CharacterBody2D est le chemin le plus simple et le plus pedagogique.

5) Pas a pas guide (avec checkpoints)

Etape 1 - Ouvrir (ou recreer) la scene Player

Vous avez deja Player.tscn en placeholder. Ouvrez-la.

Si jamais vous ne la trouvez pas ou si elle est vide, vous pouvez repartir proprement :

  1. File > New Scene
  2. Choisissez une scene 2D (ou un noeud racine 2D)
  3. Renommez le noeud racine en Player

Checkpoint : vous avez une scene Player.tscn ouverte, avec un noeud racine nomme Player.

Etape 2 - Ajouter la structure de noeuds

On veut une hierarchie simple, lisible, et maintenable. Le but est d'eviter une scene 'fouillis' des le depart.

  1. Ajoutez un enfant CharacterBody2D sous Player
  2. Renommez-le PlayerBody
  3. Ajoutez sous PlayerBody :
    • un Sprite2D (renommez-le Sprite)
    • un CollisionShape2D (renommez-le Collision)

Hierarchie attendue :

Player (Node2D)
└── PlayerBody (CharacterBody2D)
    ├── Sprite (Sprite2D)
    └── Collision (CollisionShape2D)

Pourquoi cette structure ?

  • Player sert de conteneur si un jour vous voulez ajouter des elements autour (UI, effets, sons, etc.) sans toucher au corps physique.
  • PlayerBody porte la collision et le mouvement (c'est lui qui bouge et collisionne).
  • Sprite et Collision sont au meme niveau sous PlayerBody, ce qui aide a les aligner.

Une remarque importante : ici, Player (Node2D) est parent de PlayerBody. Ca permet plus tard de faire des choses propres comme avoir des offsets de camera, des effets visuels, ou une UI attachee, sans melanger ca avec la physique.

Checkpoint : l'arbre des noeuds correspond a celui-ci, avec des noms propres.

Etape 3 - Sauvegarder Player.tscn (maintenant, pas 'plus tard')

Sauvegardez tout de suite :

  • Scene > Save Scene (ou Save Scene As... si besoin)
  • res://Player.tscn

Important : une scene non sauvegardee, c'est une scene non instanciable (et vous allez perdre du temps au moment d'aller dans Main).

Checkpoint : vous voyez Player.tscn dans le FileSystem.

Etape 4 - Configurer le Sprite2D (le rendre visible)

Un player invisible, c'est l'erreur la plus frequente au debut. Tant que vous n'avez pas de vraie sprite sheet, utilisez un placeholder.

  1. Selectionnez Sprite
  2. Dans l'inspecteur, mettez une texture :
    • simple : res://icon.svg (placeholder parfait)
  3. Ajustez si necessaire :
    • Position : (0, 0)
    • Scale : par exemple (0.5, 0.5) si l'icone est trop grande

Objectif : le sprite doit etre centre et lisible. Un decalage ici cree souvent l'impression que 'la collision est fausse', alors que c'est juste le visuel qui n'est pas aligne.

Petit rappel debutant : dans Godot, beaucoup de choses sont relatives au parent. Ici, Sprite est sous PlayerBody. Si PlayerBody bouge, le sprite bouge avec. C'est exactement ce qu'on veut.

Checkpoint : vous voyez le sprite au centre de la scene Player.

Etape 5 - Ajouter une collision simple (RectangleShape2D)

On va ajouter une collision minimaliste et robuste. Le plus simple pour debuter est un rectangle.

  1. Selectionnez Collision (CollisionShape2D)
  2. Dans Shape, cliquez [empty] puis choisissez New RectangleShape2D
  3. Ajustez la taille :
    • soit dans la ressource RectangleShape2D, modifiez Size
    • soit avec les poignees dans la vue 2D (souvent plus simple)

Une taille de depart typique avec l'icone (selon votre scale) : testez 64x64, puis ajustez.

Pourquoi un rectangle, et pas une capsule tout de suite ?

  • Le rectangle est facile a comprendre et a regler.
  • Il permet de verifier rapidement que vos collisions fonctionnent.
  • Vous pourrez passer a une capsule plus tard si vous voulez un glissement plus naturel sur les coins (utile dans certains platformers).

Point important (gros piege debutant) :

  • On ne scale pas le noeud CollisionShape2D pour 'tricher' sur la taille.
  • On redimensionne la Shape (RectangleShape2D).
  • Scaler le noeud peut marcher, mais ca cree souvent des collisions bizarres ou difficiles a maintenir (surtout quand vous commencerez a faire des animations, des changements d'etat, ou des collisions multiples).

Conseil d'alignement :

  • Gardez Sprite et Collision avec une position (0, 0) sous PlayerBody.
  • Ajustez d'abord la taille de la shape, pas la position. Vous deplacez la collision uniquement si vous avez une bonne raison (par exemple un sprite dont le point d'ancrage n'est pas au centre).

Checkpoint : le rectangle de collision recouvre le sprite de facon coherente.

Etape 6 - Verifier visuellement la collision (debug)

Avant meme de parler de gameplay, on veut une preuve visuelle que la collision existe et qu'elle est bien placee.

Activez l'affichage debug :

  • Debug > Visible Collision Shapes

Ensuite :

  • Lancez la scene Player directement avec F6 (Play Scene)

Ce que vous devez voir :

  • le sprite
  • la forme de collision dessinee par-dessus (en mode debug)

Si vous ne voyez pas la forme :

  • Verifiez que Collision a bien une Shape (pas [empty])
  • Verifiez que CollisionShape2D > Disabled n'est pas coche
  • Verifiez que vous etes bien en train d'executer une scene (si le jeu ne tourne pas, le debug ne s'affiche pas)

Checkpoint : la forme de collision est visible et alignee avec le sprite.

6) Instancier le Player dans Main (et comprendre ce que vous faites)

Ici, on connecte les points : Main.tscn est la scene de demarrage, donc c'est elle qui doit contenir une instance de Player.

Etape 7 - Ouvrir Main.tscn et instancier Player.tscn

  1. Ouvrez Main.tscn
  2. Sur le noeud racine de Main :
    • Instantiate Child Scene (ou glissez-deposez Player.tscn dans l'arbre)
  3. Renommez l'instance en Player ou PlayerInstance

Bonnes pratiques de nommage :

  • Si vous n'avez qu'un seul joueur, Player est tres bien.
  • Si vous savez que vous allez instancier plusieurs players plus tard (multi, clones, tests), PlayerInstance peut etre plus explicite.
  • Evitez de laisser Player2 ou Player3 si ce n'est pas volontaire : ca finit souvent en confusion.

Positionnez l'instance :

  • Si votre fenetre est 1280x720 : mettez (640, 360)

Astuce debutant : si vous ne savez pas ou est le centre, regardez en haut de la vue 2D (ou via l'Inspecteur) et forcez la position a la main. C'est souvent plus rapide que de deplacer a la souris.

Checkpoint : l'instance apparait dans l'arbre de Main et se voit dans la vue 2D.

Etape 8 - Lancer Main (verification finale)

  • F5 (Play Project)

Si tout est bon, vous voyez votre player a l'ecran.

Si vous ne voyez rien, ne paniquez pas. Dans 80% des cas :

  • texture non assignee
  • instance hors ecran
  • sprite minuscule (scale trop faible)
  • vous etes en train de regarder une autre scene que Main au lancement (verifiez la scene de demarrage dans Project Settings si besoin)

Autre verification simple : dans Main.tscn, cliquez sur l'instance du Player et regardez dans l'Inspecteur si elle a une position coherente (pas un truc enorme genre 20000, 20000).

Checkpoint : le player s'affiche dans Main, au centre.

7) Erreurs frequentes (si tu vois X, alors c'est surement Y)

  • Le player n'apparait pas

    • Texture non assignee au Sprite2D (le plus courant)
    • Instance placee hors ecran dans Main (position trop grande ou negative)
    • Scale du Sprite tres faible (ex: 0.01) suite a une manip
    • Vous jouez la mauvaise scene (F6 au lieu de F5, ou scene de demarrage mal reglee)

  • La collision 'ne marche pas' ou n'est pas visible

    • Shape vide sur CollisionShape2D (il faut une RectangleShape2D, Capsule, etc.)
    • Collision desactivee (Disabled coche)
    • Debug non active : pensez a Debug > Visible Collision Shapes

  • Collision mal alignee avec le sprite

    • Sprite n'est pas centre (position differente de (0,0))
    • Collision a ete deplace a la main par erreur
    • Le sprite a ete scale, mais la shape n'a pas ete redimensionnee en consequence (la collision reste trop grande ou trop petite)

  • Vous avez scale le CollisionShape2D

    • Ca peut fonctionner au debut, mais ca rend la collision fragile et difficile a ajuster.
    • Solution : remettez le scale a (1,1) et ajustez la Shape (Size) a la place.

8) Exercices

Exercice facile - 'Je vois mon player, il est au centre'

  1. Dans Main.tscn, placez l'instance du player au centre de l'ecran (ex: (640, 360) en 1280x720).
  2. Activez Debug > Visible Collision Shapes.
  3. Lancez le jeu (F5).

Criteres de reussite :

  • le sprite est visible
  • la collision est visible (en debug)
  • sprite et collision sont bien alignes

Petit challenge - Ajouter une Hitbox (structure seulement)

L'idee, c'est de preparer le futur (attaques, degats, detection). Pas de code pour l'instant, juste la structure.

Dans Player.tscn :

  1. Sous PlayerBody, ajoutez un Area2D, renommez-le Hitbox
  2. Sous Hitbox, ajoutez un CollisionShape2D
  3. Donnez-lui une RectangleShape2D plus petite (ex: 32x32)
  4. Decalez legerement la hitbox (ex: Position (20, 0))

Pour verifier :

  • laissez Debug > Visible Collision Shapes active
  • lancez Main et regardez si la hitbox suit le player (meme sans mouvement, elle doit rester attachee)

Checkpoint : vous voyez une seconde forme (hitbox) en debug, plus petite, et placee devant le player.

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

Vous avez maintenant un Player propre et instanciable. C'est la base qui va rendre tous les prochains modules plus simples.

Checklist finale :

  • Player.tscn existe et est sauvegardee
  • Hierarchie claire : Player -> PlayerBody -> Sprite + Collision
  • Sprite2D a une texture (ex: res://icon.svg) et est visible
  • CollisionShape2D a une Shape (RectangleShape2D) bien dimensionnee (pas juste un scale du noeud)
  • Les collisions sont visibles via Debug > Visible Collision Shapes
  • Main.tscn instancie Player.tscn avec un nom propre (Player ou PlayerInstance)
  • Le player apparait a l'ecran au lancement (F5)
  • (Bonus) Hitbox (Area2D) est ajoutee sous PlayerBody avec sa collision

10) Mini quiz (validation rapide)

  1. A quoi sert une scene Player.tscn plutot que de tout faire directement dans Main ?
  2. Pourquoi CharacterBody2D est un bon choix pour un personnage jouable ?
  3. Quelle est la difference entre scaler un noeud CollisionShape2D et redimensionner sa Shape ?
  4. Quelle option de menu vous aide a voir les collisions pendant l'execution ?
  5. Si votre player est invisible, citez deux causes probables.

11) Pont vers le module suivant (sans spoiler)

Maintenant que votre player existe, qu'il est visible, et qu'il collisionne correctement, la suite logique sera de lui donner un mouvement 'de jeu' : gravite, saut, sol, acceleration, friction... bref, un vrai ressenti. Avec une base propre, vous allez gagner un temps fou quand on commencera a empiler des comportements.

Articles similaires