🎮2D 애니메이션 + Blend Tree - 유니티 구현

이전 캐릭터 이동구현에 이어서 애니메이션 적용 방법이다.

이번에도 YHJ님이 제작하신 에셋을 사용한다.

---

🔮애니메이션 클립 만들기

사실 준비된 애셋만 있다면 간단한데 우선 애니메이션으로 변화될 연속된 스프라이트를 전체 선택해준다.

그리고 드래그해서 Hierarchy 씬에 올리면

이런 창이 뜨는데 원하는 이름과 저장 위치를 설정해주고 만들어주면 된다.

---

🔮컨트롤러 만들기

요런 방법으로 컨트롤러를 만들어 주면

이런 화면이 생성되는데

우선 파라미터 부터 알아보자

왼쪽 위 +버튼을 누르면 네가지 타입의 파라미터를 생성할 수 있는데
컨트롤러에서 사용하는 변수 느낌으로 생각하면 좋을 것 같다.

스크립트에서 값을 전달해서 원하는 조건에 원하는 애니메이션을 작동하게 만들 수 있는데 Float, Int, Bool은 기본 프로그래밍 언어에서 사용하는 용도와 같고

Trigger는 다른 파라미터들과 다르게 한번 신호를주면 한번만 반응한다.

이제 상태를 만들어 애니메이션 클립을 입히거나 연결하면 되는데

컨트롤러에서 아무것도 없는 배경에 마우스 우클릭(맥 트랙패드는 두손가락 클릭 편의상 앞으로 우클릭으로 통일)해주어 Empty를 만들면 비어있는 상태가 만들어진다.

또는 프로젝트에서 에셋 파일을 바로 화면에 올리면 클립이 들어가 있는 상태가 생성된다.

이렇게 상태들을 노가다를 통해 다 만들었다면 이제 이동경로를 만들어 주어야하는데

시작하고 싶은 상태에서 마우스 우클릭을 통해

Make Transition을 클릭한뒤 이동 목적지 상태에 클릭해주면 화면과 같이 길이 만들어 진다.

Transition을 클릭해 나오는 inspector에서 설정한 파라미터 값을 conditions에서 조정하여 이동조건을 만들어 주면 된다.

Has Exit Time이 체크되어있으면 진행중인 애니메이션이 끝날때까지 상태를 바꾸지 않는다.

위 작업을 반복해서 만들어 주면

극단적이긴 하지만 이런 모양이 나오는데 그냥 보기만해도 복잡하고 비효율적인것이 느껴지는데 이때 제목에 있는 블랜드 트리를 사용하면 깔끔하게 바꿀 수 있다.

---

🔮Blend Tree

'섞다'라는 Blend의 뜻처럼 한 상태에서 파라미터를 이용해서 파라미터 값에 따라 섞어 재생해주는 역할을 한다.

각 Idle 과 Walk 애니메이션이 상하좌우로 나누어져 있으니 캐릭터가 향하는 x값y값(3D에선 달라질 수 있음)을 받아와 방향으로 애니메이션을 정하게 해주려고 한다.

컨트롤러 배경에서 Create State -> From New Blend Tree로 생성해준다.

상하좌우를 조절할 X와Y,그리고 Idle과 Walk를 조절할 speed를 파라미터로 설정해준다.

그 뒤 Blend Tree 인스펙터창에서 Motion에 있는 Blend Tree로 들어간다.

사용할 용도에 따라 Blend Type을 선택할 수 있는데

• 1D - 파라미터 1개
• 2D Simple Directional - 파라미터 2개,방향만 고르는 경우
• 2D Freeform Directional - 파라미터 2개, 각도 기반 방향
• 2D Freeform Cartesian - 파라미터 2개, X/Y 좌표기반
• Direct - 각 모션마다 가중치 파라미터를 직접 설정

이라는 특징이 있지만 우리는 파라미터 2개로 방향만 설정하니 2D Simple Directional사용한다.(다른 2D를 설정해도 동작은 똑같이 잘한다)

4개의 모션이 있으니 Motion에서 +를 4번 눌러서 추가해주고
각각 x,y값을 설정한 뒤 해당하는 위치에 애니메이션을 넣어준다.

여기까지 해주었다면 이제 스크립트를 통해 파라미터를 전달해주기만 하면 된다.

---

🔮애니메이션 스크립트

기본적인 구조는

• 애니메이터 컴포넌트 가져오기
• 움직임을 계속 저장해 바라보는 방향 가져오기
• 애니메이터로 파라미터 넘겨주기

순서대로 진행하면 된다.

이런식으로 컴포넌트를 받아와 주고

이런 식으로 업데이트 함수에서 인풋이 있으면 마지막 방향을 가져와 저장해준다.

대각선 보정은 구현할때 같은 1의 힘일때 동시에 두개를 눌러 대각선을 만들면 값이 루트2가 되기 때문에 일정한 속도유지를 위해서 설정해준다.

마찬가지로 업데이트 함수내에서 이런식으로 애니메이터한테 값을 전달해주면 끝이다.

물론 애니메이터 컨트롤러에 앞서 만든 컨트롤러를 넣어줘야한다.

🔮결과 및 전체 코드

using UnityEngine;
using UnityEngine.InputSystem;
public class chmove : MonoBehaviour
{
    public float moveSpeed = 4f;

    public InputAction moveAction;

    Rigidbody2D rb;
    Animator anim;

    Vector2 input;
    Vector2 lastDir = Vector2.down; // 정지 시 바라볼 기본 방향

    void Awake()
    {
        rb = GetComponent<Rigidbody2D>();
        anim = GetComponent<Animator>();
    }

    void OnEnable()
    {
        moveAction.Enable();
    }

    void OnDisable()
    {
        moveAction.Disable();
    }

    void Update()
    {
        // 새 Input System에서 Vector2 읽기
        input = moveAction.ReadValue<Vector2>();

        // 대각선 보정
        if (input.sqrMagnitude > 1f)
            input.Normalize();

        // 마지막 바라보는 방향 유지(4방향 기준)
        Vector2 dir = lastDir;
        if (input.sqrMagnitude > 0.0001f)
        {
            if (Mathf.Abs(input.x) > Mathf.Abs(input.y))
                dir = new Vector2(Mathf.Sign(input.x), 0f);
            else
                dir = new Vector2(0f, Mathf.Sign(input.y));

            lastDir = dir;
        }

        // 애니메이터 파라미터
        anim.SetFloat("Movex", lastDir.x);
        anim.SetFloat("Movey", lastDir.y);
        anim.SetFloat("speed", input.sqrMagnitude);
    }

    void FixedUpdate()
    {
        rb.linearVelocity = input * moveSpeed;
    }
}

끝!