Menerapkan animasi berjalan untuk karakter sprite 4 arah

Lingkungan verifikasi

Windows

• jendela 11

Editor Kesatuan

• 25f1/3/2020

Paket Sistem Input

• 1.2.0

Prasyarat untuk tip ini

Pengaturan berikut telah dikonfigurasi sebelumnya sebagai prasyarat untuk penjelasan tips ini.

• Memperkenalkan Paket Sistem Input
• Sejajarkan kamera (2D) dengan kanvas

Situs referensi

• Membuat RPG dengan Unity Part 1: Animasi dan Operasi Berjalan

Persiapan grafik berjalan

Pertama-tama, animasi berjalan dicapai dengan terus-menerus beralih di antara beberapa gambar agar terlihat seperti Anda sedang berjalan. Oleh karena itu, perlu menyiapkan gambar sebanyak yang diperlukan untuk menunjukkan arah gerakan dan berjalan.

Untuk mencapai animasi berjalan yang paling sederhana, biasanya menyiapkan gambar berikut. Pola ini juga digunakan di banyak RPG.

Pertama-tama, ini dibagi menjadi empat garis di atas dan di bawah, tetapi ini menunjukkan arah yang akan Anda hadapi saat berjalan. Dari atas, itu adalah "bawah, kiri, kanan, atas".

Dan untuk kiri dan kanan, itu akan menjadi gerakan berjalan ke arah itu. Aliran umumnya adalah "tengah, kiri, tengah, kanan, tengah ...".

Ukuran satu sel karakter yang disiapkan kali ini adalah 32x32px. Karena disiapkan untuk kotak 3x4, ukuran sebenarnya dari file gambar adalah 96x128px. Omong-omong, tidak ada batasan ukuran satu karakter, jadi 32x48px atau 64x64px juga dimungkinkan.

* Gambar yang disiapkan kali ini adalah Iwamaru-kun, yang aku buat sejak lama. Anda dapat menggunakannya sebagai verifikasi perilaku.

Membuat proyek dan menyiapkan gambar

Dalam sampel yang akan kita buat kali ini, kita akan mengasumsikan bahwa Anda dapat menempatkan karakter dan memindahkannya dengan tombol kursor pada keyboard.

Langkah pertama adalah membuat proyek 2D baru. Tambahkan gambar karakter yang Anda siapkan untuk proyek Anda.

Pilih gambar yang baru saja Anda tambahkan dan konfigurasikan pengaturan berikut di inspektur:

Setelah pengaturan, klik tombol "Terapkan" di bagian bawah.

Selanjutnya, pisahkan gambar sehingga Anda dapat beralih di antara keduanya di Unity. Ada tombol "Editor Sprite" di inspektur, jadi klik.

Ketika dialog Editor Sprite muncul, klik tarik-turun "Slice", atur "Type" ke "Grid By Cell Size", Masukkan ukuran piksel 32 (tergantung pada ukuran karakter Anda) dan klik tombol Slice.

Kemudian, gambar akan dibagi dengan ukuran yang ditentukan. Jika membingungkan, tekan tombol Ctrl untuk melihat garis pemisah.

Setelah memisahkan, klik tombol "Terapkan" untuk menutupnya.

Jika Anda mengklik tombol lingkaran kanan file gambar dalam proyek untuk memperluasnya, Anda dapat melihat bahwa gambar tersebut terbagi.

Membuat Data Animasi

Letakkan gambar yang dibuat di bagian sebelumnya ke dalam tampilan.

Kemudian, alih-alih menambahkan gambar, dialog simpan akan ditampilkan. Ini akan menyimpan pengaturan animasi, jadi untuk saat ini, simpan sebagai "nama gambar < >Animation.anim".

Ini akan membuat dua file dalam proyek, dengan gambar split dalam tampilan dan gambar selanjutnya dalam tampilan.

Ngomong-ngomong, jika Anda menjalankan game dalam keadaan ini, saya pikir karakternya akan beranimasi sendiri. Ini adalah keadaan di mana 12 gambar dialihkan dan ditampilkan kapan saja.

Jika game sedang berjalan, tutup dan pilih tab Animations. Jika tidak, pilih "Window -> Animation -> Animation" dari menu.

Anda telah memilih objek yang Anda buat dari hierarki (dalam hal ini, Iwamaru_0).

Sudah ada animasi yang dibuat secara otomatis, tetapi saya tidak membutuhkannya, jadi saya akan menghapusnya nanti. Ada drop-down yang disebut "IwamaruAnimation" yang saya beri nama kali ini, jadi klik di atasnya dan pilih "Buat Klip Baru".

Kemudian dialog simpan akan muncul. Karena kita akan membuat animasi gerakan turun, kita akan membiarkannya sebagai "Iwamaru Down".

Pilih "Iwamaru_0" dari hierarki dan ubah animasi menjadi "IwamaruDown".

Kali ini, kita akan mengulangi animasi di "kiri, tengah, kanan, sedang", jadi kita akan mengatur jumlah sampel menjadi 4. Kemudian timeline di sebelah kanan akan dibagi menjadi 4 bagian.

Letakkan Iwamaru_0, gambar di sudut kiri atas proyek, ke 0,0 di garis waktu animasi.

Selanjutnya, jatuhkan "Iwamaru_1" pada gambar tengah di atas menjadi 0,1 dan 0,3.

Terakhir, jatuhkan "Iwamaru_2" di gambar kanan atas ke 0,2.

Setelah selesai, klik tombol putar. Anda dapat melihat bahwa karakter dalam tampilan sedang berjalan dan menjiwai. (Gambar contoh ini agak sulit dimengerti, tapi ...)

Ikuti langkah yang sama untuk membuat animasi kiri, kanan, dan atas.

Hasil akhirnya akan terlihat mirip dengan gambar di bawah ini.

Pastikan bahwa setiap arah beranimasi dengan benar.

Pengaturan transisi animasi

Selanjutnya, klik dua kali "Iwamaru_0.controller" dari proyek untuk membukanya.

Kemudian tab Animator akan terbuka dan Anda akan melihat layar seperti yang ditunjukkan pada gambar. Ini karena animasi yang baru saja Anda buat adalah ". pengontrol" file.

Klik kanan pada ruang kosong dan pilih Create State -> From New Friend Tree.

"Blend Tree" baru akan dibuat, klik kanan padanya dan pilih "Set Layer as Default State".

Entri kemudian akan melihat Pohon Campuran. Ini berarti bahwa ketika animasi bergerak, Pohon Campuran akan menjadi hal pertama yang bergerak.

Kita akan mengatur animasi di Blend Tree, jadi kita akan menghapus semua animasi yang ada.

Ada tab "Parameter" di sebelah kiri, jadi pilih dan tambahkan "Float" dari tombol +.

Karena ada dua parameter, mereka diberi nama "X" dan "Y" masing-masing.

Klik dua kali Pohon Campuran.

Pilih Pohon Campuran yang muncul.

Dari Inspektur, ubah jenis campuran menjadi 2D Simple Dictional.

Atur parameter ke "X" dan "Y".

Dari tombol + di Motion, pilih Add Motion Field 4 kali.

Nilai awal mungkin berbeda, tetapi harus terlihat seperti angka.

Untuk empat item Motion yang kami tambahkan, kami akan mengatur .anims atas, bawah, kiri, dan kanan dalam proyek.

Kemudian, tentukan ke arah mana setiap animasi harus bergerak.

Ini menyelesaikan pengaturan animasi.

Terakhir, Anda dapat menghapus file animasi yang dibuat secara otomatis karena Anda tidak membutuhkannya.

Kontrol gerakan

Gerakan dilakukan dengan menekan tombol pada keyboard, sehingga Anda dapat membuat skrip untuk mengontrolnya. Kali ini, skrip akan dilampirkan ke karakter, jadi kami akan membiarkannya sebagai "CharacterMove".

Skripnya terlihat seperti ini:

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

Berikut penjelasan masing-masing bagiannya.

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

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

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

Start Pertama, dapatkan komponen dalam Animator metode. Update Ini akan digunakan dalam , jadi miliki terlebih dahulu.

Animator.SetFloat Metode ini dapat menetapkan nilai untuk nama parameter yang ditentukan. Dalam pengaturan animasi, kita mengatur animasi mana yang akan digunakan sesuai dengan nilai X dan Y. Jika Anda mengatur arah parameter X dan Y, animasi akan dieksekusi ke arah itu. Dalam keadaan awal, kami ingin menghadap ke bawah, jadi kami menentukan (X: 0, Y: -1). Omong-omong, perhatikan bahwa nama parameter peka huruf besar/kecil.

/// <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 Dalam metode ini, kami secara berkala memeriksa status input keyboard dan memprosesnya ketika ada input.

GetMove Metode ini dirancang untuk mengembalikan arah saat input keyboard. Konten pemrosesan didasarkan pada apa yang dijelaskan dalam Tips Input Keyboard, jadi saya akan menghilangkannya.

Ketika ada input keyboard, Animator.SetFloat atur arah ke metode. Ini memungkinkan animasi ke arah Anda bergerak. transform.Translate Setelah itu, kita memindahkan objek dengan metode.

Setelah Anda membuat skrip, lampirkan ke objek karakter.

eksekusi

Ini menyelesaikan seluruh proses. Coba jalankan game dan tekan tombol kursor pada keyboard Anda untuk memindahkannya. Jika karakter bergerak ke arah Anda menekannya, dan animasi berjalan bergerak saat grafik berubah arah ke arah yang Anda hadapi, Anda sudah selesai.