Melaksanakan animasi berjalan untuk watak sprite 4 hala

Persekitaran pengesahan

Windows

• Windows 11

Penyunting Perpaduan

• 2020.3.25f1

Pakej Sistem Input

• 1.2.0

Prasyarat untuk petua ini

Tetapan berikut telah diprakonfigurasi sebagai prasyarat untuk penjelasan petua ini.

• Memperkenalkan Pakej Sistem Input
• Jajarkan kamera (2D) dengan kanvas

Laman rujukan

• Membuat RPG dengan Unity Part 1 Walking Animation and Operation

Penyediaan grafik berjalan kaki

Pertama sekali, animasi berjalan dicapai dengan sentiasa beralih antara pelbagai imej untuk menjadikannya kelihatan seperti anda berjalan. Oleh itu, adalah perlu untuk menyediakan seberapa banyak imej yang diperlukan untuk menunjukkan arah pergerakan dan berjalan.

Untuk mencapai animasi berjalan yang paling mudah, adalah perkara biasa untuk menyediakan imej berikut. Corak ini juga digunakan dalam banyak RPG.

Pertama sekali, ia dibahagikan kepada empat baris di atas dan di bawah, tetapi ia menunjukkan arah yang akan anda hadapi apabila anda berjalan. Dari bahagian atas, ia adalah "bawah, kiri, kanan, ke atas".

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

Saiz satu sel watak yang disediakan kali ini ialah 32x32px. Oleh kerana ia disediakan untuk petak 3x4, saiz sebenar fail imej ialah 96x128px. Dengan cara ini, tidak ada had kepada saiz satu watak, jadi 32x48px atau 64x64px juga mungkin.

* Imej yang disediakan kali ini ialah Iwamaru-kun, yang saya buat lama dahulu. Anda boleh menggunakannya sebagai pengesahan tingkah laku.

Cipta projek dan sediakan imej

Dalam sampel yang akan kami buat kali ini, kami akan menganggap bahawa anda boleh meletakkan watak dan mengalihkannya dengan kekunci kursor pada papan kekunci.

Langkah pertama ialah mencipta projek 2D baharu. Tambah imej aksara yang anda sediakan untuk projek anda.

Pilih imej yang baru sahaja anda tambahkan dan konfigurasikan tetapan berikut dalam pemeriksa:

Selepas menetapkan, klik butang "Terapkan" di bahagian bawah.

Seterusnya, pisahkan imej supaya anda boleh bertukar antara mereka dalam Perpaduan. Terdapat butang "Editor Sprite" dalam pemeriksa, jadi klik.

Apabila dialog Editor Sprite muncul, klik juntai bawah "Potong", tetapkan "Jenis" kepada "Grid Mengikut Saiz Sel", Masukkan saiz piksel 32 (bergantung pada saiz watak anda) dan klik butang Hiris.

Kemudian, imej akan dibahagikan dengan saiz yang ditentukan. Jika ia mengelirukan, tekan kekunci Ctrl untuk melihat garis pembahagi.

Selepas berpecah, klik butang "Terapkan" untuk menutupnya.

Jika anda mengklik butang kanan bulatan fail imej dalam projek untuk mengembangkannya, anda dapat melihat bahawa imej dibahagikan.

Mencipta Data Animasi

Jatuhkan imej yang dicipta dalam seksyen sebelumnya ke dalam pandangan.

Kemudian, daripada menambah imej, dialog simpan akan dipaparkan. Ini akan menyimpan tetapan animasi, jadi buat masa ini, simpannya sebagai "< nama imej >Animation.anim".

Ini akan mencipta dua fail dalam projek, dengan imej pisah dalam pandangan dan imej kemudian dalam pandangan.

Dengan cara ini, jika anda menjalankan permainan di negeri ini, saya fikir watak itu akan bernyawa sendiri. Ini adalah keadaan di mana 12 imej ditukar dan dipaparkan pada bila-bila masa.

Jika permainan sedang berjalan, keluarkannya dan pilih tab Animasi. Jika tidak, pilih "Window -> Animation -> Animation" daripada menu.

Anda telah memilih objek yang anda cipta daripada hierarki (dalam kes ini Iwamaru_0).

Sudah ada animasi yang dihasilkan secara automatik, tetapi saya tidak memerlukannya, jadi saya akan memadamkannya kemudian. Terdapat drop-down yang dipanggil "IwamaruAnimation" yang saya namakan kali ini, jadi klik padanya dan pilih "Buat Klip Baru".

Kemudian dialog simpan akan muncul. Oleh kerana kita akan mencipta animasi pergerakan bawah, kita akan meninggalkannya sebagai "Iwamaru Down".

Pilih "Iwamaru_0" daripada hierarki dan ubah animasi kepada "IwamaruDown".

Kali ini, kami akan mengulangi animasi di "kiri, tengah, kanan, sederhana", jadi kami akan menetapkan bilangan sampel kepada 4. Kemudian garis masa di sebelah kanan akan dibahagikan kepada 4 bahagian.

Jatuhkan Iwamaru_0, imej di sudut kiri atas projek, ke 0.0 dalam garis masa animasi.

Seterusnya, jatuhkan "Iwamaru_1" dalam imej tengah di atas kepada 0.1 dan 0.3.

Akhirnya, jatuhkan "Iwamaru_2" di imej kanan atas kepada 0.2.

Apabila anda selesai, klik butang main. Anda dapat melihat bahawa watak dalam pandangan sedang berjalan dan menganimasi. (Imej sampel ini agak sukar difahami, tetapi ...)

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

Hasil akhirnya harus kelihatan serupa dengan imej di bawah.

Pastikan setiap arah bernyawa dengan betul.

Seting peralihan animasi

Seterusnya, klik dua kali "Iwamaru_0.controller" dari projek untuk membukanya.

Kemudian tab Animator akan dibuka dan anda akan melihat skrin seperti yang ditunjukkan dalam gambar itu. Ini kerana animasi yang baru anda buat ialah ". controller" fail.

Klik kanan pada ruang kosong dan pilih Buat Negeri -> Daripada Pokok Rakan Baru.

"Pokok Campuran" baru akan dibuat, klik kanan padanya dan pilih "Tetapkan Lapisan sebagai Keadaan Lalai".

Entri kemudiannya akan melihat Pokok Campuran. Ini bermakna apabila animasi bergerak, Pokok Campuran akan menjadi perkara pertama yang bergerak.

Kami akan menyediakan animasi dalam Blend Tree, jadi kami akan memadamkan semua animasi sedia ada.

Terdapat tab "Parameter" di sebelah kiri, jadi pilih dan tambah "Terapung" dari butang +.

Oleh kerana terdapat dua parameter, mereka masing-masing dinamakan "X" dan "Y".

Dwiklik pada Pokok Campuran.

Pilih Pokok Campuran yang muncul.

Daripada Pemeriksa, tukar jenis campuran kepada 2D Simple Dictional.

Tetapkan parameter kepada "X" dan "Y".

Daripada butang + dalam Gerakan, pilih Tambah Medan Gerakan sebanyak 4 kali.

Nilai awal mungkin berbeza, tetapi ia sepatutnya kelihatan seperti angka itu.

Untuk empat item Gerakan yang kami tambah, kami akan menetapkan bahagian atas, bawah, kiri, dan kanan .anims dalam projek itu.

Kemudian, tentukan arah mana setiap animasi harus bergerak.

Ini melengkapkan persediaan animasi.

Akhirnya, anda boleh memadamkan fail animasi yang dijana secara automatik kerana anda tidak memerlukannya.

Kawalan pergerakan

Pergerakan dilakukan dengan menekan kekunci pada papan kekunci, jadi anda boleh membuat skrip untuk mengawalnya. Kali ini, skrip akan dilampirkan pada watak, jadi kami akan meninggalkannya sebagai "CharacterMove".

Skrip kelihatan 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 adalah penjelasan setiap bahagian.

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

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

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

Start Pertama, dapatkan komponen dalam kaedah iniAnimator. Update Ini akan digunakan dalam , jadi dapatkannya terlebih dahulu.

Animator.SetFloat Kaedah ini boleh menetapkan nilai untuk nama parameter yang ditentukan. Dalam seting animasi, kami menetapkan animasi yang akan digunakan mengikut nilai X dan Y. Jika anda menetapkan arah parameter X dan Y, animasi akan dilaksanakan ke arah itu. Dalam keadaan awal, kita mahu menghadapi, jadi kita tentukan (X: 0, Y: -1). Dengan cara ini, ambil perhatian bahawa nama parameter adalah sensitif huruf.

/// <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 kaedah ini, kami secara berkala menyemak status input papan kekunci dan memprosesnya apabila terdapat input.

GetMove Kaedah ini direka untuk mengembalikan arah sebagai input papan kekunci. Kandungan pemprosesan adalah berdasarkan perkara yang diterangkan dalam Petua Input Papan Kekunci, jadi saya akan meninggalkannya.

Apabila terdapat input papan kekunci, Animator.SetFloat tetapkan arah kepada kaedah. Ini membolehkan animasi dalam arah yang anda alihkan. transform.Translate Selepas itu, kami memindahkan objek dengan kaedah tersebut.

Sebaik sahaja anda telah mencipta skrip, lampirkannya pada objek aksara.

Pelaksanaan

Ini melengkapkan keseluruhan proses. Cuba jalankan permainan dan tekan kekunci kursor pada papan kekunci anda untuk mengalihkannya. Jika aksara bergerak ke arah yang anda tekan dan animasi berjalan bergerak semasa grafik mengubah arah ke arah yang anda hadapi, anda sudah selesai.