[ 내일배움캠프 ] TIL.20 - 애니메이션 블렌드 ( 4방향 애니메이션 )

 

 

개인과제를 제작하는 중 캐릭터의 애니메이션 처리가 정말 마음에 안 들어서 편리한 애니메이션이 없을까? 찾는 중 애니메이션 블랜드에 대해 알게 되어 적용을 하고 간단하게 처리할 수 있어 관련 내용을 작성해 보고자 한다.

 

위에 이미지를 처음 애니메이션 처리를 한 부분이다. 정말 위, 아래를 움직일 때 옆으로 걸어가는 애니메이션 자체로 처리되고 있어 정말 마음에 안 들어 변경을 하려고 한다. 3D, 2D 모두 사용할 수 있으나 2D 중 4방향으로 애니메이션을 처리하는 과정을 작성하려고 한다.

 

🔷 애니메이션 블렌드 사용법

🔸 Animator > Create State > From New Blend Tree 

: 새로운 블렌드 노드를 생성

 

 

🔸 새로 생성된 블랜드 노드를 선택하여 Inspector > 이름을 변경

 

 

🔸 MoveTree를 더블클릭

 

🔸 Blend Tree 클릭 > Inspector > Blend Typd > 2D Simple Directional

 

 

🔸 Parameters > float 타입의 xDir, yDir 생성, bool 타입 isWalk 추가

◾ isWalk : 플레이어의 이동을 체크하기 위해

◾ xDir, yDir : Vector2 형식의 movement가 float 형식

 

 

🔸 Blend Tree Inspector 창의 Add Motion Field 4개 추가한다.

 

 

🔸 애니메이션 창에서 4개의 애니메이션이 추가된 것을 확인할 수 있다.

 

 

🔸 PosX, PosY를 아래와 같이 작성해 준다

 

 

🔸 Idle > MoveTree 상태 전환, MoveTree > Idle로 상태 전환을 만든다.

 

 

Conditons의 경우

◾ Idle > MoveTree : isWalk = true 

◾ MoveTree > Ide : isWalk = false로 설정해주었습니다.

 

NewInputSystem으로 키보드 입력에 대한 값을 받았으며 애니메이션 부분만 코드를 추가하였습니다.

private readonly float magnituteThreshold = 0.5f;

...

private void Move(Vector2 vector)
{
    animator.SetBool(isWalking, vector.magnitude > magnituteThreshold);

    animator.SetFloat("xDir", vector.x);
    animator.SetFloat("yDir", vector.y);
}

 

vector.magnitude > magnituteThreshold 

백터의 거리가 클 때, 작을 때를 비교하여 isWalking을 체크

 

 

🔷 문제 사항

 

위의 방식으로 하면 오른쪽, 왼쪽, 위, 아래 방향으로 가는 4개의 스프라이트가 있어야 하지만 내가 사용하는 스프라이트의 경우 아래 이미지와 같이 오른쪽, 위, 아래 방향만 있었다.

 

출처 : https://game-endeavor.itch.io/mystic-woods

 

처음 그럼 3개의 애니메이션을 추가하고 x값을 비교하면 되지 않을까?라는 생각을 하여 Blend Tree 설정을 아래와 같이 설정하였다.

 

...

private void Move(Vector2 vector)
{
    animator.SetBool(isWalking, vector.magnitude > magnituteThreshold);

    playerRanderer.flipX = vector.x < 0;

    animator.SetFloat("xDir", Mathf.Abs(vector.x));
    animator.SetFloat("yDir", vector.y);
}

playerRanderer.flipX = vector.x < 0 : vector.x가 음수있경우 flipX를 true로 설정

Mathf.Abs(vector.x) : 오른쪽 왼쪽의 경우 양수 값만 사용하기 때문에 절댓값 이용

 

위의 방법을 이용하면 좌우는 잘 이동이 되지만 아래로 이동을 하면 오른쪽으로 가는 애니메이션이 실행되는 걸 확인할 수 있었다. 뭔가 오른쪽과 아래쪽으로 가는 조건이 서로 충돌하는 게 아닐까 추측을 하였다.

 

 

어떻게 해결하는 게 좋을까?

 

 

충돌을 하기 위해 블랜드를 추가하자!라는 생각이 들어 간단하게 위에서 설명했던 것과 같이 Motion의 종류를 4개를 만들어서 해결했다. 4방향을 체크하기 때문에 vector.x의 절댓값은 필요가 없어 수정하였다.

...

private void Move(Vector2 vector)
{
    animator.SetBool(isWalking, vector.magnitude > magnituteThreshold);

    playerRanderer.flipX = vector.x < 0;

    animator.SetFloat("xDir", vector.x);
    animator.SetFloat("yDir", vector.y);
}

 

정상적으로 애니메이션이 출력되는 걸 확인할 수 있었다..!

 

출처 : https://bagong-games.itch.io/hana-caraka-base-character

 

🔷 마지막

지금은 4방향에 대한 스프라이트만 있어 해당 부분만 해보았지만 다른 스프라이트를 구해서 8방향의 애니메이션을 진행시켜 더 세밀한 애니메이션을 만들어보고 싶다는 생각이 들고 8방향도 추가적으로 만들게 되면 다시 한번 작성하고 싶다..!

 

애니메이션도 뭔가 많은 것 같아  어렵다..ㅠㅜ

 

 

 

🔷 참고사이트

#8-3 유니티 캐릭터(Player) 이동하기_애니메이션(블렌드트리)

[Unity] 유니티 애니매이션 블렌드 트리