[유니티] 2D도트 캐릭터 애니메이션

 

 

Box Collider 2D 를 추가합니다.

크기를 조절해줍니다.

 

물리를 적용 시켜야 하므로 (중력 받기 위함) 캐릭터에 rigid body 2D를 추가합니다.

 

 

그럼 잘 작동하는지 확인하기 위해, 게임을 시작했을 때 상자에 떨어지도록 하겠습니다!

Bottom이라는 오브젝트를 추가하여, Box Collider 2D 를 추가했습니다.

 

오 잘 작동합니다!

그런데, Collider size조절도 잘 했는데도 캐릭터와 상자 사이에 아주 미세한 틈이 있는 경우가 있을 겁니다.

도트가 매우 작은 픽셀일 때 이런 현상이 발생한다고 합니다.

 

이는 Edit > Progject Setting > Physics 2D

Default Contact Offset을 0으로 바꿔주시면 됩니다. (0.0001이 최소) 

 

 

아틀라스

아틀라스란 텍스쳐를 모아놓은 커다란 텍스쳐입니다.

게임에서는 캐릭터 한 개만해도 이동/공격/점프/스킬사용 등등 다양한 모션이 필요하죠.

또한, 한 모션당 여러 개의 텍스쳐로 애니메이션이 구현되므로 텍스쳐들을 개별적으로 사용하는 것은 매우 비효율적입니다. 그래서 텍스쳐를 모아 하나의 아틀라스로 만든다고 합니다.

아래처럼요!

출처 : https://developer.playcanvas.com/en/user-manual/assets/texture-atlas/

 

 

01) 아틀라스 자르기

Inspector에서 Sprite Mode를 single -> Mulitple로 변경해줍니다.

single은 그 텍스쳐를 통으로 사용하겠다는 의미로, 만약 아틀라스가 아닌 하나하나의 텍스쳐로 이루어졌다면 single을 사용하면 됩니다.

다른 것들도 아래와 같이 변경해주세요.

• Pixels Per Unit : 32 (텍스처에 맞게)
• Filter Mode : Point
• Compression : None

이제 잘라봅시다.

Sprite Editor을 눌러보면 새로운 창이 뜹니다.

위 Slice는 어떤 방식으로 자를지 결정해주는 모드입니다.

• AutoMatic(자동)
• Grid By Cell Size(셀 크기에 따라)
• Grid By Cell Count (셀 수에 따라)

AutoMatic로 잘 잘려져 있으시면 나가셔도 됩니다!

이제 Sprite를 펼쳐보면 잘린 모습을 볼 수 있습니다.

 

 

Animation

플레이어 이동(Run)

Run 애니메이션에 사용되는 이미지 전부 선택(드래그 or 컨트롤) 합니다.

이를 그대로 애니메이션을 적용할 캐릭터 오브젝트에 드래그해서 끌어가서..

Asset안에다가 새로운 폴더 Animation을 만들어 Walk로 저장해주었습니다.

 

2개가 생겨나게 됩니다.

• Animator(Animation controller) : 애니메이선을 관리하는 컴포넌트

 

이 상태에서 게임을 실행해보면 캐릭터가 제자리에서 Run 애니메이션을 수행합니다.

 

Window->Animation->Animation 을 누른 후, 캐릭터 오브젝트를 클릭하면 Run 애니메이션을 볼 수 있습니다. 

Animation 에 보이는 점들은 Key Frame : 애니메이션 값을 가진 프레임 입니다. (하나하나가 sprite)

시간 간격을 조절함으로써 애니메이션을 조절 가능합니다. (간격 좁게하면 달리기, 간격 넓게하면 걷기 등)

 

 

Animator 상태 관리

한 Animator 안에선 여러 개의 Animation 을 제어 가능합니다.

저는 Run(뛰기)과 Idle(가만히 서있음) Animation 들을 제어하겠습니다.

 

Window > Animation > Animator 에 들어갑니다.

이 창에서 어떤 상황에서 어떤 애니메이션을 보낼지 정할 수 있습니다

• Entry : 맨 처음 시작 시, 수행할 애니메이션

 

01) 애니메이션 파라미터 설정

• 좌우, Run 상태 파라미터

 

02) ✨Blend Tree

📍Blend Tree : 하는 역할이 비슷한 애들끼리 모아서 관리해주는 트리

Blend Tree를 사용하기 위해 모든 State를 지웁니다.

아래처럼 Blend Tree를 생성해줍니다.

• Idle Tree
• Run Tree

각 트리 더블 클릭

• 2D로 바꿔주기

이 상태로 모션을 만들어 줍니다.

모션에 채워넣습니다.

 

03) 상태 전이

상태 끝났을 때, 바로 끝나도록 체크 풀고 0초로 세팅하기

 

 

스크립트 제어

public Animator anim;		// 애니메이션

private void Start() {
    anim = GetComponent<Animator>();
}

public void Move() {		// 이동
    // "Horizontal" : 우 방향키(1), 좌 방향키(-1) 리턴
    // "Vertical"   : 상 방향키(1), 하 방향키(-1) 리턴
    float x = Input.GetAxisRaw("Horizontal");
    float y = Input.GetAxisRaw("Vertical");

    // 1프레임 당 이동거리 계산
    float moveX = x * speed * Time.deltaTime;
    float moveY = y * speed * Time.deltaTime;

    // Idle
    if (moveX == 0.0f) {
        anim.SetBool("isRun", false);
    }
    // Run
    else {
        anim.SetBool("isRun", true);
    }

    anim.SetFloat("DirX", moveX);// -1이면 left, 1d이면 right

    transform.Translate(new Vector3(moveX, moveY, 0));
}

 

 

 

🦕🦕🦕