[Unity] 생생함을 더하다! Animation과 Animator 기초 다지기 ⏳

안녕하세요 게임 개발자 GamJia 입니다

 

오늘은 Unity에서 2D Animation 부터 3D Mixamo Animation까지,

캐릭터를 움직이는 다양한 방법을 배워보겠습니다.

 

✍️ 이 글에서 다룰 내용
✅ 프로젝트 준비: 2D Sprite 및 3D Model 불러오기
✅ 2D Sprite Animation 제작
✅ Animator Controller 설정 및 입력 연동
✅ Mixamo Animation 적용

---

일단 시작 하기 전에 이 귀여운 버섯돌이를 Import 해주세요

( 귀여운 Sprite를 제공해주신 Caz Creates Games님께 감사드립니다!)

https://caz-creates-games.itch.io/cute-mushroom-character-sprite

Cute Mushroom Character Sprite by Caz Creates Games

Sprite를 불러왔다면, Camera 컴포넌트에서 Projection를

Perspective에서 Orthographic으로 변경해주세요.

Perspective는 원근감이 있는 투영 방식이지만,

Orthographic은 원근감이 없습니다.

2D 게임에서는 물체의 크기가 거리에 상관없이

일정하게 보여야 하므로 Orthographic을 사용한답니다.

설정이 완료되었다면, 이제 불러온 Sprite를 확인해볼게요.

처음에는 Texture Type이 Default로 되어 있을 텐데요.

Default는 3D Texture용이라 2D Sprite로는 적합하지 않아요.

2D 게임에서는 이미지를 개별 스프라이트로 인식해야 하므로,

Texture Type을 Sprite (2D and UI)로 변경해 주겠습니다.

 

이 상태로 Scene에 Sprite를 한번 넣어볼게요

보면 저렇게 전부 붙어서 나오게 됩니다

자세히 보면 이미지도 깨지는 것 같고..

다시 Inspector로 돌아가서 Sprite의

Pixel Per Unit과 Filter Mode를 변경해 줄게요.

이 값은 1 Unity Unit당 몇 픽셀을 표현할지를 정합니다.

기본값인 100은 이미지를 작게 만드는데, 25로 줄이면 이미지가 4배 커져

게임 화면에서 캐릭터가 더 선명하고 존재감 있게 보일 거예요.

 

Bilinear는 이미지를 부드럽게 보정하지만, 픽셀이 흐릿하게 보이게 만들어요.

No Filter로 변경하면 픽셀이 뭉개지지 않고 선명하게 보여서

도트 그래픽 같은 2D 픽셀 아트 게임에 더 잘 어울린답니다.

설정 변경 후 저장해보면 이미지가 Wow

확대해도 픽셀이 안 깨지고 선명하게 보이죠?

이번에는 저 Sprite들을 분리해보겠습니다

이제 Sprite Mode를 Multiple로 변경하고, Sprite Editor를 열어줄게요.

Single 모드는 이미지가 하나의 독립적인 Sprite 일 때 사용해요.

Multiple 모드는 여러 Animation Frame(또는 여러 UI 요소)이

하나의 Image 파일에 모여 있을 때 사용합니다.

Multiple로 설정해야 각 프레임을 개별 Sprite로 잘라낼 수 있답니다.

왼쪽부터 순서대로 Automatic, Cell Size, Cell Count 입니다!

Sprite Editor에 들어가면 다양한 Slice Type이 있습니다

Automatic은 객체마다 크기가 달라질 수 있어서

Cell Size 또는 Cell Count로 잘라줄게요!

이름	속성
Automatic	스프라이트의 크기를 자동으로 감지하여 잘라주는 방식입니다. 이미지 내에 여백이 충분하고 각 스프라이트가 명확히 구분될 때 편리해요.
Grid By Cell Size	각 Cell의 정확한 Pixel 크기를 지정하여 그리드에 맞춰 잘라줍니다. Sprite들이 규칙적인 간격과 크기로 배열되어 있을 때 유용해요.
Grid By Cell Count	그리드의 행(Row)과 열(Column)의 개수를 지정하여 균등하게 잘라줍니다. Sprite의 개수가 명확하고 일정한 그리드 안에 들어있을 때 사용하기 좋습니다.

 

Single Type, Multiple Type + Slice를 거친 Sprite를

서로 비교해보니 차이가 확 와닿죠?

 

---

이렇게 분리된 Sprite들로 Animation을 만들어볼게요!

분리된 버섯돌이를 하나 Scene에 넣어주고

버섯돌이에 Animator Component를 연결해주겠습니다

왜 Animation이 아니고 Animator냐구요?

주로 Legacy 애니메이션 시스템에서 사용되었던 방식으로,

개별 애니메이션 클립을 직접 재생하는 역할을 해요.

복잡한 애니메이션 흐름이나 상태 전환을 관리하기는 어렵고,

주로 간단한 효과나 스크립트에서 직접 제어하는 경우에 쓰입니다.

 

반면 Animator는 Animator Controller라는 것을 참조하여 작동해요.

Animator Controller는 여러 개의 Animation Clip들을 한데 모아놓고,

이 클립들 사이의 Transition 조건과 흐름을 시각적으로 관리할 수 있게 해준답니다.

 

캐릭터의 다양한 상태 애니메이션을 유기적으로 연결하고,

코드에서 특정 파라미터를 조작하여 원하는 애니메이션을

자연스럽게 재생할 수 있게 해주는 훨씬 강력하고 유연한 시스템이죠.

Hierarchy 창 상단의 + Create 버튼을 클릭하거나,
Hierarchy 창의 빈 공간에 마우스 우클릭을 해줄게요.

나타나는 메뉴에서 Animator Controller를 선택해주세요.

만들어준 Animator를 Component에 연결할게요

Animation창이나 Create > Animation 클릭해서

Animation Clip을 생성해줍니다

Idle Sprite를 잘랐으니 Idle이라고 이름 붙일게요

그 다음 Windows에서 Animation창을 열어주고 분리해준 Sprite들을

한번에 선택해서 Animation창에 넣어주겠습니다.

재생 버튼을 눌러 Animation을 재생해볼게요!

재생해보니 Animation이 조금 빠른거 같네요

그럴 때는 Animation Frame을 선택해서 간격을 넓혀보세요

Samples 값을 줄이는 방법으로도 속도를 늦출 수 있으니,

둘 중 편한 방법으로 조절하면 됩니다.

Walk Animation도 여태까지 진행한 과정과

동일하게 작업해주시면 됩니다

 

여기서 꿀팁!🍯

Walk 같은 Animation은 처음 Frame을 복사해

마지막에 넣어주면 더 자연스럽게 연출할 수 있답니다

이런 팁은 이 버섯돌이뿐만 아니라

다양한 2D 스프라이트 애니메이션에 적용하면 좋답니다.

특히 여러 프레임으로 이루어진 복잡한 애니메이션일수록

그 효과를 더 크게 체감할 수 있을 거예요.

---

 

이번에는 만든 Animator와 Animation,

그리고 저번 주에 배운 Input System을 이용해 키보드 입력에 따라

걷기/멈춤 애니메이션이 자동으로 재생되도록 연결해 봅시다.

아까처럼 Windows에서 Animator창을 활성화 해주세요.

그럼 이런 느낌의 화면을 보게 될거예요.

지금은 Idle이 Entry Animation입니다

게임이 실행될 때 가장 먼저 실행되는 Animation입니다

Animator 창 왼쪽 위에 보면 Parameters 탭이 있습니다.

이곳에서 애니메이션 전환에 필요한 매게변수를 추가할 수 있는데요.

Parameter란 Script에서 Animator의 동작을

제어하기 위해 사용하는 값입니다.

이 값들을 변경함으로써 특정 애니메이션을 재생하거나,

다른 애니메이션으로 전환하는 조건을 만들 수 있죠.

 

이름	속성
Float	실수 값을 나타냅니다. 이동 속도에 따라 걷기/달리기 애니메이션을 조절할 때 사용될 수 있습니다
Int	정수 값을 나타냅니다. 여러 공격 모션 중 특정 공격을 선택하거나, 캐릭터 상태(0: idle, 1: walk, 2: run)를 숫자로 구분할 때 유용합니다.
Bool	참(True) 또는 거짓(False)을 나타내는 논리 값입니다. 주로 "걷는 중인가?", "점프 중인가?"와 같이 어떤 상태가 활성화되었는지 여부를 표현할 때 사용됩니다.
Trigger	Bool과 비슷하지만, 한 번만 작동하고 자동으로 초기화되는 일회성 신호입니다. 공격, 피격, 사망처럼 특정 액션을 단발적으로 실행할 때 사용하면 편리합니다.

 

저희는 Bool Parameter를 이용해서

걷고 있는지, 걷고 있지 않는지를 확인하고 그에 따른

Animation을 재생시켜주겠습니다

IsWalk라는 이름의 Bool Parameter를 생성해 주세요.

이때, 옆에 체크박스에는 표시하지 않을게요.

저게 체크되어 있으면 이 Bool 값이 true에서 시작하게 되고,

아무것도 안 했는데 Move Animation이 재생될 수 있기 때문입니다

그 다음, Animator 창에서 Idle Clip을 우클릭해

Make Transition을 선택하고 Walk 애니메이션을 클릭해 연결해주세요.
마찬가지로 Walk 클립에서 Idle 애니메이션으로도

Make Transition을 만들어 연결하면 됩니다!

Transition 화살표를 클릭해보면 Inspector에서 설정을 바꿀 수 있는데요.
먼저, Has Exit Time을 비활성화해 주세요.

이게 켜져 있으면 애니메이션이 끝날 때까지 기다렸다가 전환돼요.

 

그리고 Conditions에 IsWalk를 true로 설정합니다.
반대로 Walk에서 Idle로 가는 화살표는 IsWalk를 false로 설정해야겠죠?

using UnityEngine;
using UnityEngine.InputSystem; 

public class MushroomController : MonoBehaviour
{
    [Header("Movement Settings")]
    public float moveSpeed = 5f; 

    [Header("Animation Settings")]
    private Animator animator; 

    private Vector2 moveInput = Vector2.zero; // 현재 입력 방향 (X, Y)

    void Awake()
    {
        if (animator == null)
        {
            animator = GetComponent<Animator>();
        }
    }

    void Update()
    {
        Vector3 movement = new Vector3(moveInput.x * moveSpeed * Time.deltaTime, 0f,0f);
        transform.position += movement;

        // 캐릭터 좌우 방향 전환 (선택 사항: 2D 캐릭터가 바라보는 방향을 입력에 따라 변경)
        SpriteRenderer spriteRenderer = GetComponent<SpriteRenderer>();
        if (spriteRenderer != null)
        {
            if (moveInput.x > 0) // 오른쪽 이동
            {
                spriteRenderer.flipX = false; // 오른쪽 볼 때 정상
            }
            else if (moveInput.x < 0) // 왼쪽 이동
            {
                spriteRenderer.flipX = true; // 왼쪽 볼 때 뒤집기
            }
        }
    }

    public void OnMove(InputValue value)
    {
        moveInput = value.Get<Vector2>(); // 입력 값을 Vector2로 받아옴

        // 애니메이션 파라미터 설정은 입력이 변경될 때만!
        // moveInput.x의 절대값이 0.1f보다 크면 걷는 중, 아니면 멈춘 상태
        bool isWalking = Mathf.Abs(moveInput.x) > 0.1f;
        animator.SetBool("IsWalk", isWalking); // Animator의 "IsWalk" Bool 파라미터 설정
    }
}

 

저번 시간에 내용을 응용해서 Controller를 하나 만들었습니다

Input System의 OnMove 함수가 호출될 때마다

IsWalk 값을 조절해서 애니메이션을 바꾸고,

이동 방향에 맞게 Sprite를 뒤집는 기능까지 넣어봤습니다.

 

작성한 Script, Player Input Component를

버섯돌이에 연결해주고 게임을 실행해 보세요.

버섯돌이가 입력에 따라 Animation을 출력하고 있어요!

좌우로도 잘 이동하고, Sprite 방향 전환까지 더해져

훨씬 더 자연스러운 움직임을 보여주고 있습니다.

---

마지막으로 3D를 잘 못 다루는 개발자분들을 위한

사이트 하나 추천하고 이번 시간 마치도록 하겠습니다

바로 Mixamo라는 사이트입니다

 

Adobe 계정이 필요하긴 한데 유료 결제를

해야 쓸 수 있는 사이트는 아닙니다

계정이 없다면 하나 만드시는걸 추천드려요

이 사이트의 장점 중 하나는 바로 가지고 있는 3D 모델을 불러와

그 자리에서 다양한 애니메이션을 바로 적용하고 확인할 수 있다는 점이에요!

덕분에 모델과 애니메이션이 잘 어울리는지 쉽게 파악할 수 있답니다.

Upload Character를 클릭해서 모델 파일을 업로드 해보세요

저는 Unity Chan을 업로드 하고

브레이크 댄스 Animation을 다운 받았습니다!

Animation을 불러와 Unity Chan 모델에 연결해주니,
짜잔! Unity Chan이 멋지게 브레이크 댄스를

추는 모습을 확인할 수 있습니다!💃

---

오늘은 Unity에서 Animation과 Animator의 기본 개념부터,

2D Animation 제작, 그리고 Mixamo 적용까지 함께 해봤습니다.

Animation과 Animator까지 익히셨다면, 이제 캐릭터들이

생생하게 살아 움직이는 듯한 경험을 만들어낼 수 있을 거예요!

 

앞으로도 Unity를 처음 시작하는 분들을 위해
실전 팁과 초보자용 가이드를 계속 공유할 예정이니,
다음 글도 기대해주세요!

 

감사합니다!