Implémenter une animation de marche pour un personnage de sprite à 4 voies

Environnement de vérification

Windows

• Fenêtres 11

Éditeur Unity

• 2020.3.25f1

Packages du système d’entrée

• 1.2.0

Conditions préalables à cette astuce

Les paramètres suivants sont préconfigurés comme condition préalable à l’explication de ces conseils.

• Présentation du package système d’entrée
• Aligner la caméra (2D) avec le canevas

Site de référence

• Création d’un RPG avec Unity, partie 1 : animation et fonctionnement de la marche

Préparation des graphiques de marche

Tout d’abord, l’animation de la marche est réalisée en passant constamment d’une image à l’autre pour donner l’impression que vous marchez. Par conséquent, il est nécessaire de préparer autant d’images que nécessaire pour montrer la direction du mouvement et de la marche.

Afin de réaliser l’animation de marche la plus simple, il est courant de préparer l’image suivante. Ce modèle est également utilisé dans de nombreux RPG.

Tout d’abord, il est divisé en quatre lignes au-dessus et en dessous, mais il indique la direction à laquelle vous ferez face lorsque vous marcherez. Du haut, c’est « en bas, à gauche, à droite, en haut ».

Et pour la gauche et la droite, ce sera un mouvement de marche dans cette direction. Le flux général est « milieu, gauche, milieu, droite, milieu... ».

La taille d’une cellule du caractère préparé cette fois-ci est de 32x32px. Puisqu’il est préparé pour 3x4 carrés, la taille réelle du fichier image est de 96x128px. D’ailleurs, il n’y a pas de limite à la taille d’un caractère, donc 32x48px ou 64x64px est également possible.

* L’image préparée cette fois-ci est Iwamaru-kun, que j’ai faite il y a longtemps. Vous pouvez l’utiliser comme vérification du comportement.

Création d’un projet et préparation d’images

Dans l’exemple que nous allons créer cette fois-ci, nous supposerons que vous pouvez placer un caractère et le déplacer avec les touches de curseur du clavier.

La première étape consiste à créer un nouveau projet 2D. Ajoutez l’image du personnage que vous avez préparée pour votre projet.

Sélectionnez l’image que vous venez d’ajouter et configurez les paramètres suivants dans l’inspecteur :

Après le réglage, cliquez sur le bouton « Appliquer » en bas.

Ensuite, divisez l’image afin de pouvoir passer de l’une à l’autre dans Unity. Il y a un bouton « Sprite Editor » dans l’inspecteur, alors cliquez dessus.

Lorsque la boîte de dialogue Éditeur de sprites apparaît, cliquez sur le menu déroulant « Tranche », définissez le « Type » sur « Grille par taille de cellule », Entrez une taille de pixel de 32 (en fonction de la taille de votre personnage) et cliquez sur le bouton Trancher.

Ensuite, l’image sera divisée selon la taille spécifiée. Si cela prête à confusion, appuyez sur la touche Ctrl pour voir une ligne de séparation.

Après le fractionnement, cliquez sur le bouton « Appliquer » pour le fermer.

Si vous cliquez sur le bouton cercle droit du fichier image dans le projet pour le développer, vous pouvez voir que l’image est divisée.

Création de données d’animation

Déposez l’image créée dans la section précédente dans la vue.

Ensuite, au lieu d’ajouter l’image, une boîte de dialogue d’enregistrement s’affiche. Cela enregistrera les paramètres d’animation, donc pour le moment, enregistrez-le sous le nom de l’image « < >Animation.anim ».

Cela créera deux fichiers dans le projet, avec l’image fractionnée dans la vue et l’image ultérieure dans la vue.

D’ailleurs, si vous lancez le jeu dans cet état, je pense que le personnage s’animera tout seul. Il s’agit d’un état dans lequel 12 images sont commutées et affichées à tout moment.

Si le jeu est en cours d’exécution, quittez-le et sélectionnez l’onglet Animations. Si ce n’est pas le cas, sélectionnez « Fenêtre -> Animation -> Animation » dans le menu.

Vous avez sélectionné l’objet que vous avez créé dans la hiérarchie (dans ce cas, Iwamaru_0).

Il y a déjà une animation générée automatiquement, mais je n’en ai pas besoin, donc je la supprimerai plus tard. Il y a un menu déroulant appelé « IwamaruAnimation » que j’ai nommé cette fois-ci, alors cliquez dessus et sélectionnez « Créer un nouveau clip ».

Ensuite, la boîte de dialogue d’enregistrement apparaîtra. Étant donné que nous allons créer une animation du mouvement vers le bas, nous la laisserons comme « Iwamaru Down ».

Sélectionnez « Iwamaru_0 » dans la hiérarchie et changez l’animation en « IwamaruDown ».

Cette fois-ci, nous allons répéter l’animation en « gauche, milieu, droite, moyen », nous allons donc fixer le nombre d’échantillons à 4. Ensuite, la chronologie à droite sera divisée en 4 parties.

Déposez l’Iwamaru_0, l’image dans le coin supérieur gauche du projet, sur 0.0 dans la chronologie de l’animation.

Ensuite, déposez le « Iwamaru_1 » dans l’image du milieu ci-dessus à 0,1 et 0,3.

Enfin, abaissez le « Iwamaru_2 » dans l’image en haut à droite à 0,2.

Lorsque vous avez terminé, cliquez sur le bouton de lecture. Vous pouvez voir que le personnage de la vue se déplace et s’anime. (Cet exemple d’image est un peu difficile à comprendre, mais...)

Suivez les mêmes étapes pour créer des animations à gauche, à droite et en haut.

Le résultat final devrait ressembler à l’image ci-dessous.

Assurez-vous que chaque direction s’anime correctement.

Paramètres de transition de l’animation

Ensuite, double-cliquez sur « Iwamaru_0.controller » dans le projet pour l’ouvrir.

Ensuite, l’onglet Animateur s’ouvrira et vous verrez un écran comme celui illustré dans la figure. Cela est dû au fait que l’animation que vous venez de créer est « . contrôleur ».

Cliquez avec le bouton droit de la souris sur un espace vide et sélectionnez Créer un état -> à partir d’un nouvel arbre d’amis.

Un nouvel « arbre de fusion » sera créé, cliquez dessus avec le bouton droit de la souris et sélectionnez « Définir le calque comme état par défaut ».

L’entrée examinera alors l’arbre de fusion. Cela signifie que lorsque l’animation se déplace, l’arbre de fusion sera la première chose à bouger.

Nous allons configurer des animations dans l’arbre de fusion, nous allons donc supprimer toutes les animations existantes.

Il y a un onglet « Paramètres » sur la gauche, alors sélectionnez-le et ajoutez « Float » à partir du bouton +.

Puisqu’il y a deux paramètres, ils sont nommés respectivement « X » et « Y ».

Double-cliquez sur l’arbre de fusion.

Sélectionnez l’arbre de fusion qui s’affiche.

Dans l’inspecteur, définissez le type de fusion sur Dictionnaire simple 2D.

Réglez les paramètres sur « X » et « Y ».

À partir du bouton + de Motion, sélectionnez Ajouter un champ de mouvement 4 fois.

La valeur initiale peut être différente, mais elle doit ressembler à la figure.

Pour les quatre éléments Motion que nous avons ajoutés, nous allons définir les .anims haut, bas, gauche et droit dans le projet.

Ensuite, spécifiez la direction dans laquelle chaque animation doit se déplacer.

La configuration de l’animation est terminée.

Enfin, vous pouvez supprimer le fichier d’animation généré automatiquement car vous n’en avez pas besoin.

Contrôle des mouvements

Le mouvement se fait en appuyant sur une touche du clavier, ce qui vous permet de créer un script pour le contrôler. Cette fois-ci, le script sera attaché au personnage, nous le laisserons donc comme « CharacterMove ».

Le script ressemble à ceci :

using UnityEngine;
using UnityEngine.InputSystem;

public class CharacterMove : MonoBehaviour
{
  // あらかじめ Animator コンポーネントを持っておくようにする
  private Animator _animator;

  // 最初のフレーム更新の前に開始が呼び出されます
  void Start()
  {
    // オブジェクトに紐付いている Animator を取得する
    _animator = GetComponent<Animator>();

    // 最初の向き (下) を設定する
    _animator.SetFloat("X", 0);
    _animator.SetFloat("Y", -1);
  }

  /// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
  void FixedUpdate()
  {
    // キーボードの入力方向を取得
    var move = GetMove();

    if (move != Vector2.zero)
    {
      // 入力されている場合はアニメーターに方向を設定
      _animator.SetFloat("X", move.x);
      _animator.SetFloat("Y", move.y);

      // 入力した方向に移動
      transform.Translate(move * 0.2f);
    }
  }

  /// <summary>キーボード入力による移動方向を取得します。</summary>
  /// <returns>キーボード入力による移動方向。</returns>
  private Vector2 GetMove()
  {
    Vector2 move = Vector2.zero;
    if (Keyboard.current.upArrowKey.isPressed)
    {
      move += new Vector2(0, 1);
    }
    if (Keyboard.current.downArrowKey.isPressed)
    {
      move += new Vector2(0, -1);
    }
    if (Keyboard.current.leftArrowKey.isPressed)
    {
      move += new Vector2(-1, 0);
    }
    if (Keyboard.current.rightArrowKey.isPressed)
    {
      move += new Vector2(1, 0);
    }

    // 入力した値がある場合は正規化して返す
    return move == Vector2.zero ? move : move.normalized;
  }
}

Ce qui suit est une explication de chaque partie.

// あらかじめ Animator コンポーネントを持っておくようにする
private Animator _animator;

// 最初のフレーム更新の前に開始が呼び出されます
void Start()
{
  // オブジェクトに紐付いている Animator を取得する
  _animator = GetComponent<Animator>();

  // 最初の向き (下) を設定する
  _animator.SetFloat("X", 0);
  _animator.SetFloat("Y", -1);
}

Start Tout d’abord, obtenez le composant dans la Animator méthode. Update Cela sera utilisé dans , alors prenez-le à l’avance.

Animator.SetFloat La méthode peut définir une valeur pour le nom de paramètre spécifié. Dans les paramètres de l’animation, nous définissons l’animation à utiliser en fonction des valeurs X et Y. Si vous définissez la direction des paramètres X et Y, l’animation sera exécutée dans cette direction. Dans l’état initial, nous voulons faire face vers le bas, nous spécifions donc (X : 0, Y : -1). D’ailleurs, notez que les noms de paramètres sont sensibles à la casse.

/// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
void FixedUpdate()
{
  // キーボードの入力方向を取得
  var move = GetMove();

  if (move != Vector2.zero)
  {
    // 入力されている場合はアニメーターに方向を設定
    _animator.SetFloat("X", move.x);
    _animator.SetFloat("Y", move.y);

    // 入力した方向に移動
    transform.Translate(move * 0.2f);
  }
}

FixedUpdate Dans la méthode, nous vérifions périodiquement l’état d’entrée du clavier et le traitons lorsqu’il y a entrée.

GetMove La méthode est conçue pour renvoyer des directions en tant qu’entrées clavier. Le contenu du traitement est basé sur ce qui est décrit dans les conseils de saisie au clavier, je vais donc l’omettre.

Lorsqu’il y a une entrée au clavier, Animator.SetFloat définissez la direction de la méthode. Cela permet d’activer l’animation dans la direction dans laquelle vous vous êtes déplacé. transform.Translate Après cela, nous déplaçons l’objet avec la méthode.

Une fois que vous avez créé le script, attachez-le à l’objet personnage.

exécution

Cela complète l’ensemble du processus. Essayez de lancer le jeu et d’appuyer sur les touches de curseur de votre clavier pour le déplacer. Si le personnage se déplace dans la direction dans laquelle vous l’avez pressé et que l’animation de marche se déplace tandis que le graphique change de direction dans la direction à laquelle vous faites face, vous avez terminé.