4방향 스프라이트 캐릭터에 대한 걷기 애니메이션 구현

검증 환경

윈도우

• 윈도우 11

유니티 에디터

• 2020.3.25에프1

입력 시스템 패키지

• 1.2.0

이 팁의 전제 조건

다음 설정은 이러한 팁을 설명하기 위한 전제 조건으로 미리 구성되어 있습니다.

• 입력 시스템 패키지 소개
• 카메라(2D)를 캔버스에 맞춥니다.

참조 사이트

• Unity로 RPG 만들기 1부: 걷기 애니메이션과 조작

걷기 그래픽 준비

우선, 걷는 애니메이션은 걷는 것처럼 보이도록 여러 이미지 사이를 지속적으로 전환하여 구현됩니다. 따라서 움직임과 보행의 방향을 보여주기 위해 필요한 만큼의 이미지를 준비할 필요가 있습니다.

가장 간단한 걷기 애니메이션을 구현하려면 다음 이미지를 준비하는 것이 일반적입니다. 이 패턴은 많은 RPG에서도 사용됩니다.

우선 위아래 4개의 선으로 나뉘어 있습니다만, 걸을 때 바라보는 방향을 나타내고 있습니다. 위에서 "아래, 왼쪽, 오른쪽, 위"입니다.

그리고 왼쪽과 오른쪽은 그 방향으로 걷는 동작이 될 것입니다. 일반적인 흐름은 "중간, 왼쪽, 중간, 오른쪽, 중간..."입니다.

이번에 준비한 문자의 셀 1 개의 크기는 32x32px입니다. 3x4 정사각형용으로 준비되어 있기 때문에 이미지 파일의 실제 크기는 96x128px입니다. 덧붙여서 한 문자의 크기에는 제한이 없기 때문에 32x48px 또는 64x64px도 가능합니다.

※ 이번에 준비한 이미지는 옛날에 만든 이와마루 군입니다. 행동 확인으로 사용할 수 있습니다.

프로젝트 만들기 및 이미지 준비

이번에 만들 샘플에서는 캐릭터를 배치하고 키보드의 커서 키로 이동할 수 있다고 가정합니다.

첫 번째 단계는 새 2D 프로젝트를 만드는 것입니다. 프로젝트를 위해 준비한 캐릭터 이미지를 추가합니다.

방금 추가한 이미지를 선택하고 인스펙터에서 다음 설정을 구성합니다.

설정 후 하단의 "적용" 버튼을 클릭합니다.

그런 다음 Unity에서 전환할 수 있도록 이미지를 분할합니다. 인스펙터에 "Sprite Editor" 버튼이 있으니 클릭하세요.

스프라이트 에디터 대화창이 나타나면 "슬라이스" 드롭다운을 클릭하고 "유형"을 "셀 크기별 그리드"로 설정합니다. 픽셀 크기를 32(캐릭터 크기에 따라 다름)로 입력하고 슬라이스 버튼을 클릭합니다.

그러면 이미지가 지정된 크기로 분할됩니다. 헷갈리면 Ctrl 키를 눌러 구분선을 표시합니다.

분할 후 "적용" 버튼을 클릭하여 닫습니다.

프로젝트에서 이미지 파일의 오른쪽 원 버튼을 클릭하여 확장하면 이미지가 분할된 것을 볼 수 있습니다.

애니메이션 데이터 생성

이전 섹션에서 만든 이미지를 뷰에 놓습니다.

그런 다음 이미지를 추가하는 대신 저장 대화 상자가 표시됩니다. 이렇게 하면 애니메이션 설정이 저장되므로 우선 "< 이미지 이름 >Animation.anim"으로 저장합니다.

이렇게 하면 프로젝트에 두 개의 파일이 생성되며, 분할된 이미지는 뷰에 있고 이후 이미지는 뷰에 있습니다.

덧붙여서 이 상태로 게임을 돌리면 캐릭터가 스스로 움직이기 쉽다고 생각합니다. 12개의 이미지가 수시로 전환되어 표시되는 상태입니다.

게임이 실행 중이면 게임을 종료하고 애니메이션 탭을 선택합니다. 그렇지 않은 경우 메뉴에서 "창 - > 애니메이션 - > 애니메이션"을 선택합니다.

계층에서 만든 개체(이 경우 Iwamaru_0)를 선택했습니다.

이미 자동 생성 애니메이션이 있지만 필요하지 않기 때문에 나중에 삭제하겠습니다. 이번에 이름을 붙인 「IwamaruAnimation」이라는 드롭다운이 있으므로, 그것을 클릭하고 「새로운 클립 만들기」를 선택합니다.

그러면 저장 대화 상자가 나타납니다. 다운 운동의 애니메이션을 만들기 때문에 "이와마루 다운"으로 남겨 둡니다.

계층에서 "Iwamaru_0"를 선택하고 애니메이션을 "IwamaruDown"으로 변경합니다.

이번에는 애니메이션을 "왼쪽, 중간, 오른쪽, 중간"으로 반복하므로 샘플 수를 4로 설정합니다. 그러면 오른쪽의 타임라인이 4부분으로 나뉩니다.

프로젝트의 왼쪽 위 모서리에 있는 이미지인 Iwamaru_0를 애니메이션 타임라인의 0.0에 놓습니다.

그런 다음 위 가운데 이미지의 "Iwamaru_1"를 0.1과 0.3으로 떨어뜨립니다.

마지막으로 오른쪽 상단 이미지의 "Iwamaru_2"를 0.2로 떨어뜨립니다.

완료되면 재생 버튼을 클릭합니다. 뷰의 캐릭터가 걷고 애니메이션되는 것을 볼 수 있습니다. (이 샘플 이미지는 조금 이해하기 어렵습니다 만...)

동일한 단계에 따라 왼쪽, 오른쪽 및 위쪽 애니메이션을 만듭니다.

최종 결과는 아래 이미지와 비슷해야 합니다.

각 방향이 올바르게 애니메이션되는지 확인합니다.

애니메이션 전환 설정

그런 다음 프로젝트에서 "Iwamaru_0.controller"를 두 번 클릭하여 엽니다.

그러면 애니메이터 탭이 열리고 그림과 같은 화면이 나타납니다. 방금 만든 애니메이션이 "이기 때문입니다. 컨트롤러" 파일.

빈 공간을 마우스 오른쪽 버튼으로 클릭하고 Create State -> From New Friend Tree를 선택합니다.

새로운 "블렌드 트리"가 생성되면 마우스 오른쪽 버튼을 클릭하고 "레이어를 기본 상태로 설정"을 선택합니다.

그러면 엔트리가 블렌드 트리를 살펴봅니다. 즉, 애니메이션이 움직일 때 블렌드 트리가 가장 먼저 움직입니다.

블렌드 트리에서 애니메이션을 구성할 것이므로 기존 애니메이션을 모두 삭제하겠습니다.

왼쪽에 "Parameters"탭이 있으므로 그것을 선택하고 + 버튼에서 "Float"를 추가합니다.

두 개의 매개변수가 있으므로 각각 "X"와 "Y"로 명명됩니다.

블렌드 트리(Blend Tree) 를 더블클릭합니다.

표시되는 블렌드 트리를 선택합니다.

인스펙터에서 블렌드 타입을 2D Simple Dictional로 변경합니다.

매개변수를 "X" 및 "Y"로 설정합니다.

Motion의 + 버튼에서 Add Motion Field를 4번 선택합니다.

초기 값은 다를 수 있지만 그림과 같아야 합니다.

추가한 4개의 모션 항목에 대해 프로젝트에서 top, bottom, left, right .anims를 설정합니다.

그런 다음 각 애니메이션이 이동해야 하는 방향을 지정합니다.

이것으로 애니메이션 설정이 완료되었습니다.

마지막으로 자동으로 생성된 애니메이션 파일은 필요하지 않으므로 삭제할 수 있습니다.

움직임 제어

이동은 키보드의 키를 눌러 수행되므로 스크립트를 만들어 제어할 수 있습니다. 이번에는 캐릭터가 스크립트가 붙기 때문에 "CharacterMove"로 둡니다.

스크립트는 다음과 같습니다.

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

다음은 각 부분에 대한 설명입니다.

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

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

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

Start 먼저 메서드에서 Animator 구성 요소를 가져옵니다. Update 이것은 에서 사용되므로 미리 준비하십시오.

Animator.SetFloat 메서드는 지정된 매개 변수 이름에 대한 값을 설정할 수 있습니다. 애니메이션 설정에서 X 및 Y 값에 따라 사용할 애니메이션을 설정합니다. X 및 Y 파라미터의 방향을 설정하면 해당 방향으로 애니메이션이 실행됩니다. 초기 상태에서는 아래를 향하고 싶기 때문에 (X : 0, 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);
  }
}

FixedUpdate 이 방법에서는 주기적으로 키보드의 입력 상태를 확인하고 입력이 있을 때 처리합니다.

GetMove 이 메서드는 키보드 입력으로 방향을 반환하도록 설계되었습니다. 처리 내용은 키보드 입력 팁에 설명 된 내용을 기반으로하므로 생략하겠습니다.

키보드 입력 Animator.SetFloat 이 있는 경우 방향을 메서드로 설정합니다. 이렇게 하면 이동한 방향으로 애니메이션을 사용할 수 있습니다. transform.Translate 그런 다음 메서드로 개체를 이동합니다.

스크립트를 만들었으면 문자 개체에 첨부합니다.

실행

이것으로 전체 프로세스가 완료됩니다. 게임을 실행하고 키보드의 커서 키를 눌러 이동해 보세요. 캐릭터가 누른 방향으로 움직이고 그래픽의 방향이 사용자가 향하는 방향으로 바뀌는 동안 걷기 애니메이션이 움직이면 완료된 것입니다.