Triển khai hoạt ảnh đi bộ cho nhân vật sprite 4 chiều

Môi trường xác minh

Windows

• cửa sổ 11

Biên tập viên Unity

• 2020.3.25f1

Gói hệ thống đầu vào

• 1.2.0

Điều kiện tiên quyết cho mẹo này

Các cài đặt sau đây được cấu hình sẵn làm điều kiện tiên quyết để giải thích các mẹo này.

• Giới thiệu gói hệ thống đầu vào
• Căn chỉnh máy ảnh (2D) với khung vẽ

Trang web tham khảo

• Tạo một game nhập vai với Unity Phần 1: Hoạt hình và hoạt động đi bộ

Chuẩn bị đồ họa đi bộ

Trước hết, hoạt ảnh đi bộ đạt được bằng cách liên tục chuyển đổi giữa nhiều hình ảnh để làm cho nó trông giống như bạn đang đi bộ. Do đó, cần chuẩn bị càng nhiều hình ảnh càng cần thiết để hiển thị hướng di chuyển và đi bộ.

Để đạt được hình ảnh động đi bộ đơn giản nhất, người ta thường chuẩn bị hình ảnh sau đây. Mô hình này cũng được sử dụng trong nhiều game nhập vai.

Trước hết, nó được chia thành bốn dòng trên và dưới, nhưng nó cho thấy hướng bạn sẽ phải đối mặt khi đi bộ. Từ trên xuống, nó là "xuống, trái, phải, lên".

Và đối với bên trái và bên phải, nó sẽ là một chuyển động đi bộ theo hướng đó. Dòng chảy chung là "giữa, trái, giữa, phải, giữa...".

Kích thước của một ô của ký tự được chuẩn bị lần này là 32x32px. Vì nó được chuẩn bị cho các ô vuông 3x4, kích thước thực của tệp hình ảnh là 96x128px. Nhân tiện, không có giới hạn về kích thước của một ký tự, vì vậy 32x48px hoặc 64x64px cũng có thể.

* Hình ảnh được chuẩn bị lần này là Iwamaru-kun, mà tôi đã chụp từ lâu. Bạn có thể sử dụng nó như một xác minh hành vi.

Tạo một dự án và chuẩn bị hình ảnh

Trong mẫu chúng tôi sẽ tạo lần này, chúng tôi sẽ giả định rằng bạn có thể đặt một ký tự và di chuyển nó bằng các phím con trỏ trên bàn phím.

Bước đầu tiên là tạo một dự án 2D mới. Thêm hình ảnh nhân vật bạn đã chuẩn bị cho dự án của mình.

Chọn hình ảnh bạn vừa thêm và định cấu hình các cài đặt sau trong trình kiểm tra:

Sau khi cài đặt, nhấp vào nút "Áp dụng" ở dưới cùng.

Tiếp theo, chia nhỏ hình ảnh để bạn có thể chuyển đổi giữa chúng trong Unity. Có một nút "Sprite Editor" trong trình kiểm tra, vì vậy hãy nhấp vào nó.

Khi hộp thoại Sprite Editor xuất hiện, nhấp vào menu thả xuống "Slice", đặt "Loại" thành "Lưới theo kích thước ô", Nhập kích thước pixel là 32 (tùy thuộc vào kích thước nhân vật của bạn) và nhấp vào nút Cắt.

Sau đó, hình ảnh sẽ được chia theo kích thước được chỉ định. Nếu nó gây nhầm lẫn, hãy nhấn phím Ctrl để xem đường phân chia.

Sau khi tách, nhấp vào nút "Áp dụng" để đóng nó.

Nếu bạn nhấp vào nút tròn bên phải của tệp hình ảnh trong dự án để mở rộng nó, bạn có thể thấy rằng hình ảnh được chia.

Tạo dữ liệu hoạt hình

Thả hình ảnh đã tạo trong phần trước vào chế độ xem.

Sau đó, thay vì thêm hình ảnh, hộp thoại lưu sẽ được hiển thị. Thao tác này sẽ lưu cài đặt hoạt ảnh, vì vậy hiện tại, hãy lưu nó dưới dạng "< tên hình ảnh >Animation.anim".

Thao tác này sẽ tạo hai tệp trong dự án, với hình ảnh được chia nhỏ trong chế độ xem và hình ảnh sau trong chế độ xem.

Nhân tiện, nếu bạn chạy trò chơi ở trạng thái này, tôi nghĩ nhân vật sẽ tự hoạt hình. Đây là trạng thái trong đó 12 hình ảnh được chuyển đổi và hiển thị bất cứ lúc nào.

Nếu trò chơi đang chạy, hãy thoát khỏi trò chơi và chọn tab Hoạt ảnh. Nếu không, hãy chọn "Window -> Animation -> Animation" từ menu.

Bạn đã chọn đối tượng mà bạn đã tạo từ hệ thống phân cấp (trong trường hợp này là Iwamaru_0).

Đã có một hình ảnh động được tạo tự động, nhưng tôi không cần nó, vì vậy tôi sẽ xóa nó sau. Có một trình đơn thả xuống có tên là "IwamaruAnimation" mà tôi đặt tên lần này, vì vậy hãy nhấp vào nó và chọn "Tạo clip mới".

Sau đó, hộp thoại lưu sẽ xuất hiện. Vì chúng tôi sẽ tạo một hình ảnh động của chuyển động xuống, chúng tôi sẽ để nó là "Iwamaru Down".

Chọn "Iwamaru_0" từ hệ thống phân cấp và thay đổi hoạt ảnh thành "IwamaruDown".

Lần này, chúng tôi sẽ lặp lại hoạt ảnh trong "trái, giữa, phải, trung bình", vì vậy chúng tôi sẽ đặt số lượng mẫu thành 4. Sau đó, dòng thời gian bên phải sẽ được chia thành 4 phần.

Thả Iwamaru_0, hình ảnh ở góc trên bên trái của dự án, vào 0,0 trong dòng thời gian hoạt hình.

Tiếp theo, thả "Iwamaru_1" ở hình giữa ở trên xuống 0,1 và 0,3.

Cuối cùng, thả "Iwamaru_2" ở hình ảnh phía trên bên phải xuống 0,2.

Khi bạn hoàn tất, hãy nhấp vào nút phát. Bạn có thể thấy rằng nhân vật trong khung cảnh đang đi bộ và hoạt hình. (Hình ảnh mẫu này hơi khó hiểu, nhưng ...)

Làm theo các bước tương tự để tạo hoạt ảnh trái, phải và trên cùng.

Kết quả cuối cùng sẽ trông tương tự như hình ảnh bên dưới.

Đảm bảo rằng mỗi hướng hoạt hình chính xác.

Thiết đặt chuyển tiếp hoạt hình

Tiếp theo, nhấp đúp vào "Iwamaru_0.controller" từ dự án để mở nó.

Sau đó, tab Animator sẽ mở ra và bạn sẽ thấy một màn hình giống như màn hình được hiển thị trong hình. Điều này là do hoạt ảnh bạn vừa tạo là ". bộ điều khiển" tập tin.

Nhấp chuột phải vào một khoảng trống và chọn Create State -> From New Friend Tree.

Một "Blend Tree" mới sẽ được tạo, nhấp chuột phải vào nó và chọn "Set Layer as Default State".

Mục nhập sau đó sẽ nhìn vào Blend Tree. Điều này có nghĩa là khi hoạt ảnh di chuyển, Blend Tree sẽ là thứ đầu tiên di chuyển.

Chúng tôi sẽ thiết lập hoạt ảnh trong Blend Tree, vì vậy chúng tôi sẽ xóa tất cả các hoạt ảnh hiện có.

Có một tab "Tham số" ở bên trái, vì vậy hãy chọn tab đó và thêm "Nổi" từ nút +.

Vì có hai tham số, chúng được đặt tên lần lượt là "X" và "Y".

Bấm đúp vào Blend Tree.

Chọn Blend Tree xuất hiện.

Từ Inspector, thay đổi blend type thành 2D Simple Dictional.

Đặt các tham số thành "X" và "Y".

Từ nút + trong Chuyển động, chọn Thêm trường chuyển động 4 lần.

Giá trị ban đầu có thể khác nhau, nhưng nó sẽ trông giống như hình.

Đối với bốn mục Chuyển động mà chúng tôi đã thêm, chúng tôi sẽ đặt .anims trên cùng, dưới cùng, trái và phải trong dự án.

Sau đó, chỉ định hướng mà mỗi hoạt ảnh sẽ di chuyển.

Điều này hoàn thành thiết lập hoạt hình.

Cuối cùng, bạn có thể xóa tệp hoạt hình được tạo tự động vì bạn không cần nó.

Điều khiển chuyển động

Chuyển động được thực hiện bằng cách nhấn một phím trên bàn phím, vì vậy bạn có thể tạo một tập lệnh để điều khiển nó. Lần này, kịch bản sẽ được đính kèm với nhân vật, vì vậy chúng tôi sẽ để nó là "CharacterMove".

Kịch bản trông như thế này:

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

Sau đây là lời giải thích của từng phần.

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

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

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

Start Đầu tiên, lấy thành phần trong Animator phương thức. Update Điều này sẽ được sử dụng trong , vì vậy hãy có nó trước.

Animator.SetFloat Phương thức có thể đặt giá trị cho tên tham số được chỉ định. Trong cài đặt hoạt ảnh, chúng tôi đặt hoạt ảnh nào sẽ sử dụng theo giá trị X và Y. Nếu bạn đặt hướng của các tham số X và Y, hoạt ảnh sẽ được thực thi theo hướng đó. Ở trạng thái ban đầu, chúng tôi muốn úp xuống, vì vậy chúng tôi chỉ định (X: 0, Y: -1). Nhân tiện, lưu ý rằng tên tham số phân biệt chữ hoa chữ thường.

/// <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 Trong phương pháp, chúng tôi kiểm tra định kỳ trạng thái đầu vào của bàn phím và xử lý nó khi có đầu vào.

GetMove Phương pháp này được thiết kế để trả về chỉ đường khi bàn phím nhập vào. Nội dung xử lý dựa trên những gì được mô tả trong Mẹo nhập liệu bằng bàn phím, vì vậy tôi sẽ bỏ qua nó.

Khi có đầu vào bàn phím, Animator.SetFloat hãy đặt hướng cho phương thức. Điều này cho phép hoạt ảnh theo hướng bạn di chuyển. transform.Translate Sau đó, chúng ta đang di chuyển đối tượng bằng phương thức.

Khi bạn đã tạo tập lệnh, hãy đính kèm nó vào đối tượng ký tự.

Thực hiện

Điều này hoàn thành toàn bộ quá trình. Hãy thử chạy trò chơi và nhấn các phím con trỏ trên bàn phím của bạn để di chuyển nó. Nếu nhân vật di chuyển theo hướng bạn nhấn và hoạt ảnh đi bộ di chuyển trong khi đồ họa thay đổi hướng theo hướng bạn đang đối mặt, bạn đã hoàn tất.