4 yönlü hareketli grafik karakteri için yürüme animasyonu uygulayın

Doğrulama ortamı

Windows

• pencereler 11

Unity Düzenleyicisi

• 2020.3.25f1

Giriş Sistemi Paketleri

• 1.2.0

Bu ipucu için önkoşullar

Aşağıdaki ayarlar, bu ipuçlarının açıklanması için bir önkoşul olarak önceden yapılandırılmıştır.

• Giriş Sistemi Paketinin Tanıtımı
• Kamerayı (2D) tuvalle hizalayın

Referans sitesi

• Unity ile RPG Yapmak Bölüm 1: Yürüme Animasyonu ve Operasyonu

Yürüme grafiklerinin hazırlanması

Her şeyden önce, yürüme animasyonu, yürüyormuş gibi görünmek için sürekli olarak birden fazla görüntü arasında geçiş yapılarak elde edilir. Bu nedenle, hareketin ve yürüyüşün yönünü göstermek için gerektiği kadar görüntü hazırlamak gerekir.

En basit yürüme animasyonunu elde etmek için aşağıdaki görüntüyü hazırlamak yaygındır. Bu model birçok RPG'de de kullanılır.

Her şeyden önce, yukarıda ve altta dört çizgiye bölünmüştür, ancak yürüdüğünüzde yüzünüzü göreceğiniz yönü gösterir. Yukarıdan "aşağı, sol, sağ, yukarı" dır.

Ve sol ve sağ için, bu yönde bir yürüme hareketi olacaktır. Genel akış "orta, sol, orta, sağ, orta..."dır.

Bu sefer hazırlanan karakterin bir hücresinin boyutu 32x32px'dir. 3x4 kareler için hazırlandığı için görüntü dosyasının gerçek boyutu 96x128px'tir. Bu arada, bir karakterin boyutunda bir sınırlama yoktur, bu nedenle 32x48px veya 64x64px de mümkündür.

* Bu sefer hazırlanan görsel uzun zaman önce yaptığım Iwamaru-kun. Bunu bir davranış doğrulaması olarak kullanabilirsiniz.

Bir proje oluşturun ve görseller hazırlayın

Bu sefer oluşturacağımız örnekte, klavyedeki imleç tuşları ile bir karakter yerleştirip hareket ettirebileceğinizi varsayacağız.

İlk adım, yeni bir 2D proje oluşturmaktır. Projeniz için hazırladığınız karakter görselini ekleyin.

Yeni eklediğiniz görüntüyü seçin ve denetçide aşağıdaki ayarları yapılandırın:

Ayarladıktan sonra, alttaki "Uygula" düğmesini tıklayın.

Ardından, Unity'de aralarında geçiş yapabilmek için görüntüyü bölün. Denetçide bir "Sprite Editor" düğmesi var, bu yüzden tıklayın.

Sprite Editor iletişim kutusu göründüğünde, "Dilim" açılır menüsünü tıklayın, "Tür" ü "Hücre Boyutuna Göre Izgara" olarak ayarlayın, 32 piksel boyutu girin (karakterinizin boyutuna bağlı olarak) ve Dilim düğmesini tıklayın.

Ardından, görüntü belirtilen boyuta bölünecektir. Kafa karıştırıcıysa, bir bölme çizgisi görmek için Ctrl tuşuna basın.

Bölündükten sonra, kapatmak için "Uygula" düğmesine tıklayın.

Projedeki görüntü dosyasını genişletmek için sağ daire düğmesine tıklarsanız, görüntünün bölündüğünü görebilirsiniz.

Animasyon Verileri Oluşturma

Önceki bölümde oluşturulan görüntüyü görünüme bırakın.

Ardından, görüntüyü eklemek yerine bir kaydetme iletişim kutusu görüntülenecektir. Bu, animasyon ayarlarını kaydedecektir, bu nedenle şimdilik "< görüntü adı >Animation.anim" olarak kaydedin.

Bu, bölünmüş görüntü görünümde ve sonraki görüntü görünümde olmak üzere projede iki dosya oluşturur.

Bu arada oyunu bu haliyle çalıştırırsanız karakterin kendi kendine canlanacağını düşünüyorum. Bu, herhangi bir zamanda 12 görüntünün değiştirildiği ve görüntülendiği bir durumdur.

Oyun çalışıyorsa, oyundan çıkın ve Animasyonlar sekmesini seçin. Değilse, menüden "Pencere -> Animasyon -> Animasyonu" nu seçin.

Hiyerarşiden oluşturduğunuz nesneyi seçtiniz (bu örnekte Iwamaru_0).

Zaten otomatik olarak oluşturulmuş bir animasyon var, ancak buna ihtiyacım yok, bu yüzden daha sonra sileceğim. Bu sefer adlandırdığım "IwamaruAnimation" adlı bir açılır menü var, bu yüzden üzerine tıklayın ve "Yeni Klip Oluştur" u seçin.

Ardından kaydet iletişim kutusu görünecektir. Aşağı hareketin bir animasyonunu oluşturacağımız için bunu "Iwamaru Down" olarak bırakacağız.

Hiyerarşiden "Iwamaru_0" seçeneğini seçin ve animasyonu "IwamaruDown" olarak değiştirin.

Bu sefer animasyonu "sol, orta, sağ, orta" olarak tekrarlayacağız, bu yüzden örnek sayısını 4 olarak ayarlayacağız. Ardından sağdaki zaman çizelgesi 4 bölüme ayrılacaktır.

Projenin sol üst köşesindeki görüntü olan Iwamaru_0 animasyon zaman çizelgesinde 0,0'a bırakın.

Ardından, yukarıdaki ortadaki resimdeki "Iwamaru_1" i 0.1 ve 0.3'e bırakın.

Son olarak, sağ üstteki görüntüdeki "Iwamaru_2" i 0.2'ye bırakın.

İşiniz bittiğinde oynat düğmesini tıklayın. Görünümdeki karakterin yürüdüğünü ve animasyon yaptığını görebilirsiniz. (Bu örnek görseli anlamak biraz zor ama...)

Sol, sağ ve üst animasyonlar oluşturmak için aynı adımları izleyin.

Sonuç, aşağıdaki resme benzer görünmelidir.

Her yönün doğru şekilde canlandırıldığından emin olun.

Animasyon geçiş ayarları

Ardından, açmak için projeden "Iwamaru_0.controller" seçeneğine çift tıklayın.

Ardından Animatör sekmesi açılacak ve karşınıza şekildeki gibi bir ekran çıkacaktır. Bunun nedeni, az önce oluşturduğunuz animasyonun ". denetleyici" dosyası.

Boş bir alana sağ tıklayın ve Yeni Arkadaş Ağacından Durum Oluştur >'ı seçin.

Yeni bir "Karışım Ağacı" oluşturulacak, üzerine sağ tıklayın ve "Katmanı Varsayılan Durum Olarak Ayarla" yı seçin.

Giriş daha sonra Karışım Ağacına bakacaktır. Bu, animasyon hareket ettiğinde ilk hareket eden şeyin Karışım Ağacı olacağı anlamına gelir.

Blend Tree'de animasyonlar ayarlayacağız, bu nedenle mevcut tüm animasyonları sileceğiz.

Solda bir "Parametreler" sekmesi var, bu yüzden onu seçin ve + düğmesinden "Float" ekleyin.

İki parametre olduğu için sırasıyla "X" ve "Y" olarak adlandırılırlar.

Karışım Ağacı'nı çift tıklatın.

Görüntülenen Karışım Ağacı'nı seçin.

Inspector'dan, karışım türünü 2B Basit Sözlük olarak değiştirin.

Parametreleri "X" ve "Y" olarak ayarlayın.

Hareket bölümündeki + düğmesinden 4 kez Hareket Alanı Ekle'yi seçin.

Başlangıç değeri farklı olabilir, ancak şekle benzemelidir.

Eklediğimiz dört Motion öğesi için projedeki üst, alt, sol ve sağ .anim'leri ayarlayacağız.

Ardından, her animasyonun hangi yönde hareket etmesi gerektiğini belirtin.

Bu, animasyon kurulumunu tamamlar.

Son olarak, ihtiyacınız olmadığı için otomatik olarak oluşturulan animasyon dosyasını silebilirsiniz.

Hareket kontrolü

Hareket, klavyedeki bir tuşa basılarak yapılır, böylece onu kontrol etmek için bir komut dosyası oluşturabilirsiniz. Bu sefer script karaktere eklenecek, bu yüzden "CharacterMove" olarak bırakacağız.

Komut dosyası şuna benzer:

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;
  }
}

Aşağıda her bölümün bir açıklaması yer almaktadır.

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

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

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

Start İlk olarak, yöntemdeki Animator bileşeni alın. Update Bu, 'de kullanılacak, bu yüzden önceden alın.

Animator.SetFloat Yöntem, belirtilen parametre adı için bir değer ayarlayabilir. Animasyon ayarlarında X ve Y değerlerine göre hangi animasyonun kullanılacağını belirliyoruz. X ve Y parametrelerinin yönünü ayarlarsanız, animasyon bu yönde yürütülür. İlk durumda, aşağı bakmak istiyoruz, bu yüzden (X: 0, Y: -1) belirtiyoruz. Bu arada, parametre adlarının büyük/küçük harfe duyarlı olduğunu unutmayın.

/// <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 Yöntemde, klavyenin giriş durumunu periyodik olarak kontrol ediyoruz ve giriş olduğunda işliyoruz.

GetMove Yöntem, klavye girişleri olarak yönleri döndürmek için tasarlanmıştır. İşleme içeriği, Klavye Giriş İpuçları'nda açıklananlara dayanmaktadır, bu yüzden onu atlayacağım.

Klavye girişi olduğunda, Animator.SetFloat yönü yönteme ayarlayın. Bu, hareket ettiğiniz yönde animasyon sağlar. transform.Translate Bundan sonra, nesneyi yöntem ile hareket ettiriyoruz.

Komut dosyasını oluşturduktan sonra, karakter nesnesine ekleyin.

idam

Bu, tüm süreci tamamlar. Oyunu çalıştırmayı ve hareket ettirmek için klavyenizdeki imleç tuşlarına basmayı deneyin. Karakter bastığınız yönde hareket ediyorsa ve grafik baktığınız yöne doğru yön değiştirirken yürüme animasyonu hareket ediyorsa, işiniz tamamlanmış demektir.