[압량(Amnyang)] #3. 2D 주인공 캐릭터 Idle, Walk, EyeBlink 애니메이션 클립 만들기

 

이전 글에서 눈 부위는 따로 머리 뼈대(Head Bone) 자식 오브젝트로 달아줬었는데, 원래라면 눈도 포토샵 작업에서 따로 레이어(Layer)를 나눠서 한 PSB 파일에 같이 있는 게 좋긴 하다.

/*   뼈대 자식으로 넣어주지 않으면, 뼈대가 움직일 때 해당 오브젝트는 같이 움직이지 않는다.   */

 

그런데, 기존에는 눈 깜빡임을 구현할 생각이 없었는데 좀 더 사실적인 연출을 위해 넣어야 하다보니 디자이너님께서 다시 재작업을 해야하는 상황이 일어났다. 그러는 과정에서 눈이 없는 캐릭터 파일과 눈만 따로 있는 파일 2개를 받게 된 것이다.

/*   이전 글에서 눈이 처음에 없었던 이유였다.   */

 

음.. 일단 이걸로 눈 깜빡임을 구현해보자.

 

 

 

1. 눈 깜빡임 애니메이션 및 랜덤 깜빡임 스크립트 제작

눈 깜빡임 애니메이션 제작

 

눈을 깜빡이는 애니메이션 클립 이름을 Girl_EyeBlink 이라고 지어주고, 페이지 애니메이션으로 구현했다.

 

일정 프레임마다 눈의 스프라이트(Sprite)를 교체해주는 방식으로 구현

 

눈 깜빡임 애니메이션 (+2022.01.26 수정 : 이제보니 스프라이트를 하나 잘못 끼워줬었네요)

 

눈을 깜빡이는 속도는 저 정도면 충분할 것 같다. "Girl Controller"라는 애니메이터(Animator)를 만들어주고, 주인공 캐릭터(Girl)에 부착해줬다. 그리고 애니메이터를 열어서, 애니메이션 레이어(Animation Layer)를 새로 하나 만들어줬다.

 

눈 깜빡임만 담당할 "Eye" 애니메이션 레이어

 

이렇게 눈 깜빡이는 걸 따로 애니메이션 레이어를 통해 재생하게 되면 나중에 어떤 동작을 해도 제어하기가 편하다.

위와 같이 애니메이션 레이어를 나누지 않았다면, 나는 걷기나 달리기 애니메이션을 제작할 때도 눈 깜빡이는 경우의 수를 고려해서 제작해야 한다.

 

하지만 위와 같이 기능별로 레이어를 나눴다면, 걷기나 달리기 애니메이션을 제작할 때 눈을 신경쓰지 않아도 된다.

즉, 달리기 애니메이션을 재생하는데 눈도 자동으로 깜빡여주는 편리한 효과가 발생하는 것이다.

 

그리고 "Eye" 애니메이션 레이어에 들어가서 다음과 같이 배치를 했다.

 

"Eye" 애니메이션 레이어 스테이트 머신 모습

 

이 때, 눈 깜빡임을 계속 반복 재생하면 안 되므로 Girl_EyeBlink 애니메이션의 Loop Time 옵션을 꺼줬다.

 

Loop Time 비활성화

 

그리고, 트리거 매개변수(Trigger Parameters)를 "EyeBlink"라는 이름으로 하나 만들어줬다.

 

트리거 매개변수

 

이 매개변수는 "Girl_EyeBlink"에서 "Exit"로의 상태 전이(Transition)의 조건으로 사용할 것이다. 이제 스크립트(Script) 내용으로 넘어가보자.

 

 

 

EyeBlink 스크립트 제작

 

랜덤 함수 Random.Range()를 이용하여, 랜덤 주기마다 눈을 깜빡이게 코드를 작성했다. 골드메탈님 유튜브를 보면서 영감을 얻은 재귀함수(Recursion Function) 방법을 통해 구현해봤다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EyeBlink : MonoBehaviour
{

    [SerializeField]
    private Animator animator;
    
    void Start()
    {
        Blink();
    }
    void Blink()
    {
        int time = Random.Range(2, 5);
        _Invoke(time);
    }

    void _Invoke(int time)
    {
        animator.SetTrigger("EyeBlink");
        Invoke("Blink", time);
    }
}

 

대략 2~5초 사이의 주기로 눈을 깜빡이면 좋을 것 같아서 위와 같이 작성하고, 눈(Eye) 오브젝트에 부착해줬다.

캐릭터는 처음 게임을 시작하면 눈을 깜빡이고, 해당 애니메이션이 끝났더라도 Exit 상태로의 전이가 일어나려면 2~5초 사이의 랜덤 주기를 기다려야 하고, Loop Time을 꺼놨기 때문에 눈을 한 번만 깜빡이고 재생을 다했다면 멈출 것이다.

 

Exit 상태로의 상태 전이가 일어났다면, 다시 Entry로 들어와서 Girl_EyeBlink로의 상태 전이가 바로 일어나니, 대략 이런 로직으로 눈 깜빡임을 구현했다.

 

순서가 잘못되긴 했는데, 캐릭터 Idle 상태까지 다 구현하고 찍은 눈 깜빡임 랜덤 주기 영상

 

마지막으로 애니메이션 레이어의 가중치 조절을 해줬다. 가중치가 1에 가깝다면, 해당 애니메이션만 보일 것이고, 0에 가깝다면 안 보일 것이다. 즉, 다른 애니메이션 레이어들과의 혼합 비율을 설정하는 작업이다.

 

0.7 정도로 하니, Base Layer와 잘 혼합돼서 재생되었다.

 

이렇게 눈 깜빡이는 애니메이션 제작이 완성되었다. 다음은 Idle, Walk 애니메이션을 제작해볼 차례다.

 

 

 

2. 캐릭터 Idle, Walk 애니메이션 제작

Idle 애니메이션 제작

 

사실 Idle 애니메이션 제작은 별 거 없었다. 그냥 프레임 주기를 조금 길게 해서 마치 캐릭터가 들숨 날숨을 쉬는 것처럼 뼈대를 조정해주면 됐다. 척추, 흉추, 목을 살짝 위로 회전했다가 원상복구 시키고, 팔이랑 다리가 가만히 있으면 이질감이 들어서 얘네들도 살짝씩만 움직여줬다.

 

오른손에 있는 라이트(Light)는 신경쓰지 않아도 된다. 작업 다 한 후에 글을 쓰다보니 순서가 잘못돼서 그렇다.

 

자. 다시 한 번 주의깊게 봐야 하는 부분이 있는데, 나는 여기서 눈을 건들지 않았다. 이 Idle 애니메이션을 Base Layer에 넣고, Default로 지정했다. Loop Time은 활성화되어 있는 게 기본 값이므로, 이대로 게임을 시작해보면 신기한 광경이 벌어진다.

 

Idle 상태인데, 눈도 깜빡이고 있다.

 

이걸 위해, 위에서 애니메이션 레이어를 분리했던 것이다. 작업하는 게 훨씬 수월해진다.

 

이제 걷기(Walk) 애니메이션을 만들 차례다. 아무래도 모션이 많이 들어가는 동작이다 보니 굉장히 어려웠다. 자연스러운 동작을 구현한다고 몇 시간을 쏟아 부었다. 디자이너님께 참고가 될 만한 사진을 받아서 그걸 토대로 만들었다.

 

출처를 안 남겨주셔서,,,문제가 될 시 삭제하겠습니다.

 

우선 위 사진을 토대로 다리 움직임을 최대한 자연스럽게 구현해봤다. 사람은 다리가 움직이면 그에 따라 자동으로 팔, 몸통, 목, 머리 또한 움직인다. 그래서 다리 움직임을 다 만든 후에, 추가적으로 위와 같은 부분들도 만들어줬다.

 

Walk 애니메이션 완성

 

진짜 거짓말 안 치고 처음하는 작업이다 보니(심지어 나는 디자인계열도 아니다), 3시간은 걸린 것 같다. 그래도 정말 잘 나와서 뿌듯하고 기뻤다.

 

나중에 배경 맵 리소스를 받게 되면, 발이 땅바닥에 닿게 하는 Target Matching이라는 것도 공부해서 적용해 줘야겠지만, 그건 나중에 하기로 하고 지금은 이 기쁨을 즐기자.

 

Walk 애니메이션까지 잘 뽑았으니, 이제 키 입력을 받아 캐릭터를 좌우로 움직이는 걸 해봐야 한다.

하지만, 그것까지 적다간 약속 시간에 늦을 것 같아 갔다와서 포스팅하도록 한다.