Up to date

This page is up to date for Godot 4.3. If you still find outdated information, please open an issue.

Animation de personnage

Dans cette dernière leçon, nous utiliserons les outils d'animation intégrés de Godot pour faire flotter et battre nos personnages. Vous apprendrez à concevoir des animations dans l'éditeur et à utiliser le code pour donner vie à votre jeu.

Nous commencerons par une introduction à l'utilisation de l'éditeur d'animation.

Utilisation de l'éditeur d'animation

Le moteur est livré avec des outils permettant de créer des animations dans l'éditeur. Vous pouvez ensuite utiliser le code pour les jouer et les contrôler au moment de l'exécution.

Ouvrez la scène du joueur, sélectionnez le nœud Player et ajoutez un nœud AnimationPlayer.

Le dock Animation apparaît dans le panneau inférieur.

Il comporte une barre d'outils et le menu déroulant de l'animation en haut, un éditeur de piste au milieu qui est actuellement vide, et des options de filtre, d'accrochage et de zoom en bas.

Créons une animation. Cliquez sur Animation -> Nouveau.

Nommez l'animation "float".

Une fois que vous avez créé l'animation, la ligne de temps apparait avec des chiffres représentant le temps en secondes.

Nous voulons que l'animation commence à être lue automatiquement au début du jeu. Elle doit également tourner en boucle.

Pour ce faire, vous pouvez cliquer sur le bouton de lecture automatique () dans la barre d'outils d'animation et sur les flèches de bouclage, respectivement.

Vous pouvez également épingler l'éditeur d'animation en cliquant sur l'icône d'épinglage en haut à droite. Cela permet d'éviter qu'il ne se replie lorsque vous cliquez sur la fenêtre d'affichage et désélectionnez les nœuds.

Définissez la durée de l'animation à "1,2" seconde dans le coin supérieur droit du dock.

Vous devriez voir le ruban gris s'élargir un peu. Il vous montre le début et la fin de votre animation et la ligne bleue verticale est votre curseur temporel.

Vous pouvez cliquer et faire glisser le curseur en bas à droite pour effectuer un zoom avant ou arrière sur la ligne de temps.

L'animation du flottant

Avec le nœud animation player, vous pouvez animer la plupart des propriétés sur autant de nœuds que vous le souhaitez. Remarquez l'icône clé à côté des propriétés dans l'Inspecteur. Vous pouvez cliquer sur l'une d'entre elles pour créer une clé d'animation, une paire temps-valeur pour la propriété correspondante. La clé d'animation est insérée à l'endroit où se trouve votre curseur temporel dans la ligne de temps.

Insérons nos premières clés. Ici, nous allons animer à la fois la position et la rotation du nœud Character.

Sélectionnez le Character. Dans l'Inspecteur, développez la section Transform. Cliquez sur l'icône "clé" à côté de Position et Rotation.

Pour ce tutoriel, il suffit de créer une (des) piste(s) RESET, ce qui est le choix par défaut

Deux pistes apparaissent dans l'éditeur avec une icône en forme de diamant représentant chaque clés d'animation.

Vous pouvez cliquer et faire glisser les diamants pour les déplacer dans le temps. Déplacez la clé de position sur 0.3 secondes et la clé de rotation sur 0.1 secondes.

Bougez le curseur de temps vers "0,5" secondes en cliquant-glissant vers la ligne temporelle grise.

Dans l'Inspecteur, réglez l'axe Y de Position sur environ 0.65 mètres et l'axe X de Rotation sur 8.

Si vous ne voyez pas les propriétés dans le panneau inspecteur, cliquez d'abord de nouveau sur le nœud "personnage" sur la barre d'outil scène.

Crée une clé d'animation pour les deux propriétés

Maintenant, déplacez la clé d’animation de position à 0.7 secondes en la faisant glisser sur la chronologie.

Note

Un exposé sur les principes de l'animation dépasse le cadre de ce tutoriel. Notez simplement que vous ne voulez pas tout chronométrer et espacer uniformément. Les animateurs jouent plutôt avec le timing et l'espacement, deux principes fondamentaux de l'animation. Vous voulez décaler et contraster les mouvements de votre personnage pour qu'il semblent vivant.

Déplacez le curseur temporel à la fin de l'animation, à 1.2 secondes. Réglez la position Y à environ 0.35 et la rotation X à -9 degrés. Une fois encore, créez une clé pour les deux propriétés.

Vous pouvez prévisualiser le résultat en cliquant sur le bouton lecture ou en appuyant sur Shift + D. Cliquez sur le bouton arrêt ou appuyez sur S pour arrêter la lecture.

Vous pouvez voir que le moteur interpole entre vos clés d'animation pour produire une animation continue. Pour le moment, cependant, le mouvement semble très robotique. Cela est dû au fait que l'interpolation par défaut est linéaire, ce qui entraîne des transitions constantes, contrairement à la façon dont les êtres vivants se déplacent dans le monde réel.

Nous pouvons contrôler la transition entre les clés d'animation à l'aide de courbes d'assouplissement.

Cliquez et faites glisser autour des deux premières clés dans la ligne de temps pour les sélectionner.

Vous pouvez modifier les propriétés des deux clés simultanément dans l'Inspecteur, où vous pouvez voir une propriété Easing.

Cliquez et faites glisser sur la courbe, en la tirant vers la gauche. Cela cela fera un ease-out, c'est-à-dire un assouplissement rapide au départ qui ralentira lorsque le curseur temporel atteindra la clé d'animation suivante.

Jouer l'animation pour voir la différence. La première moitié devrait déjà donner l'impression d'être un peu plus dynamique.

Appliquez un ease-out à la deuxième clé d'animation de la piste de la rotation.

Faites l'inverse pour la deuxième clé d'animation de position, en la faisant glisser vers la droite.

Votre animation devrait ressembler à quelque chose comme ceci.

Note

Les animations mettent à jour les propriétés des nœuds animés à chaque image, en remplaçant les valeurs initiales. Si nous animions directement le nœud Player, cela nous empêcherait de le déplacer dans le code. C'est là que le nœud Pivot s'avère utile : même si nous avons animé le Character, nous pouvons toujours déplacer et faire pivoter le Pivot et superposer les modifications à l'animation dans un script.

Maintenant si vous lancez au jeu, la créature du joueur flottera !

Si la créature est un peu trop proche du sol, vous pouvez déplacer le Pivot vers le haut pour la décaler.

Contrôler l'animation par le code

Nous pouvons utiliser du code pour contrôler la lecture de l'animation en fonction des entrées du joueur. Modifions la vitesse de l'animation lorsque le personnage se déplace.

Ouvrez le script du Player en cliquant sur l'icône de script à côté de lui.

Dans _physics_process(), après la ligne où nous vérifions le vecteur direction, ajoutez le code suivant.

GDScriptC#

func _physics_process(delta):
    #...
    if direction != Vector3.ZERO:
        #...
        $AnimationPlayer.speed_scale = 4
    else:
        $AnimationPlayer.speed_scale = 1

Ce code fait en sorte que lorsque le joueur se déplace, nous multiplions la vitesse de lecture par 4. Lorsqu'il s'arrête, nous la remettons à la normale.

Nous avons mentionné que le Pivot pouvait superposer des transformations à l'animation. Nous pouvons faire en sorte que le personnage fasse un arc lorsqu'il saute en utilisant la ligne de code suivante. Ajoutez-la à la fin de _physics_process().

GDScriptC#

func _physics_process(delta):
    #...
    $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse

Animer les mobs

Voici une autre astuce intéressante avec les animations dans Godot : tant que vous utilisez une structure de nœuds similaire, vous pouvez les copier dans différentes scènes.

Par exemple, les scènes Mob` et ``Player ont toutes deux un nœud Pivot et un nœud Character, de sorte que nous pouvons réutiliser les animations entre elles.

Ouvrez la scène Joueur, sélectionnez le nœud AnimationPlayer et cliquez ensuite sur Animation > Gérer les animations. Cliquez sur le bouton Copier les animations vers le presse-papier (deux petits carrés) à côté de l'animation float. Cliquez sur OK pour fermer la fenêtre.

Ouvrez ensuite mob.tscn, créez un AnimationPlayer en tant que nœud enfant et sélectionnez-le. Cliquez Animation > Gérer les animations, puis Ajouter une bibliothèque. Le message "Une bibliothèque globale va être créée." devrait apparaître. Laissez le champ texte vide et cliquez sur OK. Cliquez sur l'icône Coller (presse-papiers) et elle devrait apparaître dans la fenêtre. Cliquez sur OK pour fermer la fenêtre.

Ensuite, vérifiez que le bouton () et les flèches de boucle sont activées dans l'éditeur d'animation dans le panneau en bas. C'est tout ; tous les monstres joueront maintenant l'animation flottante.

Nous pouvons modifier la vitesse de lecture en fonction de la random_speed de la créature. Ouvrez le script du Mob et à la fin de la fonction initialize(), ajoutez la ligne suivante.

GDScriptC#

func initialize(start_position, player_position):
    #...
    $AnimationPlayer.speed_scale = random_speed / min_speed

Et avec cela, vous avez fini de coder votre premier jeu 3D complet.

Félicitations !

Dans la prochaine partie, nous récapitulerons rapidement ce que vous avez appris et vous donnerons quelques liens pour continuer à en apprendre davantage. Mais pour l'instant, voici l'intégralité des scripts player.gd et mob.gd afin que vous puissiez vérifier votre code par rapport à eux.

Voici le script Player.

GDScriptC#

extends CharacterBody3D

signal hit

# How fast the player moves in meters per second.
@export var speed = 14
# The downward acceleration while in the air, in meters per second squared.
@export var fall_acceleration = 75
# Vertical impulse applied to the character upon jumping in meters per second.
@export var jump_impulse = 20
# Vertical impulse applied to the character upon bouncing over a mob
# in meters per second.
@export var bounce_impulse = 16

var target_velocity = Vector3.ZERO


func _physics_process(delta):
    # We create a local variable to store the input direction
    var direction = Vector3.ZERO

    # We check for each move input and update the direction accordingly
    if Input.is_action_pressed("move_right"):
        direction.x = direction.x + 1
    if Input.is_action_pressed("move_left"):
        direction.x = direction.x - 1
    if Input.is_action_pressed("move_back"):
        # Notice how we are working with the vector's x and z axes.
        # In 3D, the XZ plane is the ground plane.
        direction.z = direction.z + 1
    if Input.is_action_pressed("move_forward"):
        direction.z = direction.z - 1

    # Prevent diagonal movement being very fast
    if direction != Vector3.ZERO:
        direction = direction.normalized()
        $Pivot.look_at(position + direction,Vector3.UP)
        $AnimationPlayer.speed_scale = 4
    else:
        $AnimationPlayer.speed_scale = 1

    # Ground Velocity
    target_velocity.x = direction.x * speed
    target_velocity.z = direction.z * speed

    # Vertical Velocity
    if not is_on_floor(): # If in the air, fall towards the floor
        target_velocity.y = target_velocity.y - (fall_acceleration * delta)

    # Jumping.
    if is_on_floor() and Input.is_action_just_pressed("jump"):
        target_velocity.y = jump_impulse

    # Iterate through all collisions that occurred this frame
    # in C this would be for(int i = 0; i < collisions.Count; i++)
    for index in range(get_slide_collision_count()):
        # We get one of the collisions with the player
        var collision = get_slide_collision(index)

        # If the collision is with ground
        if collision.get_collider() == null:
            continue

        # If the collider is with a mob
        if collision.get_collider().is_in_group("mob"):
            var mob = collision.get_collider()
            # we check that we are hitting it from above.
            if Vector3.UP.dot(collision.get_normal()) > 0.1:
                # If so, we squash it and bounce.
                mob.squash()
                target_velocity.y = bounce_impulse
                # Prevent further duplicate calls.
                break

    # Moving the Character
    velocity = target_velocity
    move_and_slide()

    $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse

# And this function at the bottom.
func die():
    hit.emit()
    queue_free()

func _on_mob_detector_body_entered(body):
    die()

Et le script Mob.

GDScriptC#

extends CharacterBody3D

# Minimum speed of the mob in meters per second.
@export var min_speed = 10
# Maximum speed of the mob in meters per second.
@export var max_speed = 18

# Emitted when the player jumped on the mob
signal squashed

func _physics_process(_delta):
    move_and_slide()

# This function will be called from the Main scene.
func initialize(start_position, player_position):
    # We position the mob by placing it at start_position
    # and rotate it towards player_position, so it looks at the player.
    look_at_from_position(start_position, player_position, Vector3.UP)
    # Rotate this mob randomly within range of -45 and +45 degrees,
    # so that it doesn't move directly towards the player.
    rotate_y(randf_range(-PI / 4, PI / 4))

    # We calculate a random speed (integer)
    var random_speed = randi_range(min_speed, max_speed)
    # We calculate a forward velocity that represents the speed.
    velocity = Vector3.FORWARD * random_speed
    # We then rotate the velocity vector based on the mob's Y rotation
    # in order to move in the direction the mob is looking.
    velocity = velocity.rotated(Vector3.UP, rotation.y)

    $AnimationPlayer.speed_scale = random_speed / min_speed

func _on_visible_on_screen_notifier_3d_screen_exited():
    queue_free()

func squash():
    squashed.emit()
    queue_free() # Destroy this node