네트워크 애니메이터(Network Animator)

 

네트워크 게임에서는 게임이나 유닛, 캐릭터 등의 상태를 동기화하는 것도 중요하지만 눈에 보이는 캐릭터들의 움직임, 즉 애니메이션 역시 동기화가 필요하다. 아무리 다른 동기화가 잘 되고 있다고 하더라도, 애니메이션 동기화가 진행되지 않아서 가만히 서있는 자세로 이동하거나 공격한다면 문제가 많을 것이다.

 

유니티 네트워크 시스템에서는 이러한 애니메이션 동기화를 위한 기본적인 기능을 제공하는데 그것이 바로 네트워크 애니메이터(Network Animator)다.

 

이번 섹션을 진행하기 위해서는 기본적인 유니티의 애니메이션 시스템과 애니메이터 컨트롤러에 대한 지식이 필요하다. 기반 지식이 부족하다면 유니티의 애니메이션 문서를 참조하여 공부를 해두는 것이 좋다.

 

그럼 이제부터 네트워크 애니메이터를 사용하는 방법을 알아보도록 하자.

 

 

네트워크 애니메이터 컴포넌트의 기본적인 요구사항

 

 

 

네트워크 애니메이터를 사용하기 위해서는 네트워크 애니메이터 컴포넌트가 있는 오브젝트와 같은 오브젝트에 에니메이터 컨트롤러와 네트워크 아이덴티티 컴포넌트가 있어야 한다.

 

 

네트워크 애니메이터의 작동 방식

 

 

네트워크 애니메이터의 작동 방식은 기본 애니메이터 컨트롤러의 파라메터가 변경되면 그 변경된 파라메터의 값을 네트워크 애니메이터를 통해서 클라이언트의 해당 네트워크 애니메이터로 전송하고 받은 측의 네트워크 애니메이터가 자신이 소유한 애니메이터 컨트롤러에 변경된 파라메터와 값을 알려서 애니메이션을 동작하게 한다.

 

 

 

 

 

네트워크 애니메이터를 사용하기 위한 준비

 

앞에서 네트워크 애니메이터의 기본적인 요구 사항과 작동 방식을 알아보았으니 이제 네트워크 애니메이터를 추가하고 사용하는 방법에 대해서 알아보도록 하자.

 

 

 

애니메이션 섹션의 단골인 박스맨이 이번 네트워크 애니메이터 섹션에서도 도움을 줄 것이다.

 

 

 

위의 이미지에 맞춰서 애니메이션 스테이트를 구성해보자. 박스맨 캐릭터는 대기(Idle) - 이동(Walk) - 공격(Attack), 세 가지 상태를 가지며, IsMove 파라메터의 상태에 따라서 대기와 이동 상태를 오가며, Attack 트리거를 받으면 공격 애니메이션을 재생하고 대기 상태로 돌아가는 아주 간단한 형태다.

 

 

 

위와 같이 게임 오브젝트와 컴포넌트를 세팅해주면 준비는 끝이다.

 

 

 

 

네트워크 애니메이터 추가하기

 

 

네트워크 애니메이터를 추가하는 방법은 간단하다. 애니메이션을 동기화하고자 하는 오브젝트에(애니메이터 컨트롤러 컴포넌트를 가지고 있어야 한다) 네트워크 애니메이터를 Add Component 해주면 된다. 그러면 네트워크 애니메이터와 함께 네트워크 통신에 필요한 Network Identity 컴포넌트가 자동으로 함께 추가된다.

 

 

 

네트워크 애니메이터를 추가한 후에는 네트워크 애니메이터 컴포넌트의 애니메이터 프로퍼티에 동기화되어야할 애니메이터를 추가해주면 된다.

 

 

그렇게하면 네트워크 애니메이터 컴포넌트에 동기화될 애니메이터의 파라메터들이 표시된다. 이 다음에는 네트워크 애니메이터를 컨트롤할 스크립트를 작성해야 한다.

 

using UnityEngine;
using UnityEngine.Networking;

public class PlayerCharacter : MonoBehaviour
{
    private NetworkAnimator netAnimator;

    void Start ()
    {
        netAnimator = GetComponent<NetworkAnimator>();
    }
   
    void Update ()
    {
        if (Input.GetKeyDown(KeyCode.W))
        {
            netAnimator.animator.SetBool("IsMove", true);
        }
        else if (Input.GetKeyUp(KeyCode.W))
        {
            netAnimator.animator.SetBool("IsMove", false);
        }

        if (Input.GetMouseButtonDown(0))
        {

            netAnimator.animator.SetTrigger("Attack");
            netAnimator.SetTrigger("Attack");
        }
    }
}

 

위와 같이 스크립트를 작성한 이후에 빌드하고 실행해서 한 쪽에서 서버를 열고 다른 쪽에서 클라이언트로 접속한 뒤 서버 측에서 W를 누르거나 마우스를 클릭했을때 애니메이션이 동기화됨을 확인할 수 있다.

 

 

위의 예시 코드에서 몇 가지 의문점이 있을 수 있는데, SetBool을 호출할 때는 networkAnimator.animator를 통해서 호출하고 SetTrigger를 호출할 때는 networkAnimator.SetTrigger()로 바로 호출하는가와 트리거를 사용하는 부분에서 왜 networkAnimator.animator.SetTrigger()와 networkAnimator.SetTrigger()를 중복해서 사용했는지가 그것이다.

 

첫 번째 의문점의 경우에는 Trigger는 NetworkAnimtor 클래스에서 호출할 수 있는 SetTrigger() 함수가 있지만, 다른 애니메이터의 파라메터(Int, Float, Bool)는 NetworkAnimator 클래스에서 바로 호출해서 사용하는 메서드가 따로 없고, NetworkAnimator의 멤버 변수인 animator를 통해서 SetBool(), SetInt(), SetFloat() 함수를 호출하도록 만들어져 있기 때문이다.

 

두 번째 문제는 트리거를 사용하는 부분에서 왜 networkAnimator.animator.SetTrigger()와 networkAnimator.SetTrigger()를 중복해서 사용했는지 인데, 이것은 networkAnimator.animator.SetTrigger() 함수를 통해서 동작하는 애니메이션은 서버에서만 재생되고, networkAnimator.SetTrigger() 함수를 통해서 동작하는 애니메이션은 클라이언트에서만 재생되기 때문이다. 즉, 서버에서도 애니메이션을 재생하고 클라이언트에서도 애니메이션을 재생하기를 원한다면 위의 예시 코드와 같이 작성되어야 한다. 특히 서버 측에서 애니메이션 이벤트를 통해서 애니메이션이 진행되는 도중에 특정한 동작이 발생되도록 로직이 짜여있다면 서버에서도 애니메이션이 동작되어야 하기 때문에 반드시 위의 코드처럼 작성되어야만 한다. 하지만 이후에도 설명하겠지만, 애니메이션을 재생하는 처리는 상당히 무거운 작업에 속하기 때문에, 클라이언트가 서버의 역할을 함께하는 P2P 방식이 아닌 순수한 서버라면 애니메이션 재생 도중 호출되는 애니메이션 이벤트는 반드시 배제해야 한다. 그리고 서버에서는 애니메이션이 완전히 동작하지 않도록 하는 것이 좋다.

 

 

 

 

추가로 : 네트워크 애니메이터에 대한 중요한 사실

 

유니티에서 기본적으로 제공하는 네트워크 애니메이터가 있기 때문에 우선은 소개하고 사용법에 대해서 알려주지만, 사실 기본 네트워크 애니메이터를 사용하는 것은 추천하지 않는다. 오히려 직접 커스텀 네트워크 애니메이터를 따로 구현해서 사용하도록 권장하고 싶다. 지금은 주요 작업을 2017.3.03f 버전의 유니티로 하고 있기 때문에 이후의 버전에서는 더 좋게 바뀌었는지 모르겠지만, 이 버전과 이전 버전에서는 기본 네트워크 애니메이터에 상당한 문제가 있기 때문이다.

 

첫 번째 문제는, 기본 네트워크 애니메이터가 소모하는 데이터량이 너무 많다. 커스텀 애니메이터를 잘 구현한다면 기본 네트워크 애니메이터를 사용할 때보다 훨씬 데이터 소모량을 많이 줄일 수 있다.

 

두 번째 문제는, 꽤나 심각한 문제인데, 기본 네트워크 애니메이터가 굉장히 많은 가비지(Garbage)를 발생시켜서 GC로 인한 프레임드랍이 심각하다고 여겨질 만큼 발생한다는 것이다. 이것에 대한 이슈는 구글링해보면 해외 개발자들도 상당히 심각하게 느끼도 있다는 것을 알 수 있다. 실제 개발에서 네트워크 애니메이터로 애니메이션을 동기화 했다가 이 문제 때문에 네트워크 애니메이터를 모두 제거하고 커스텀 네트워크 애니메이터를 구현해서 사용해야 했었다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

잘못된 애니메이션 리소스로 인해서 발생하는 버그

 

게임 제작에서 일반적으로 버그라고 하면, 프로그래머의 전유물 되는 경우가 많다. 물론 대다수의 게임 버그는 프로그래머의 실수나 설계 미스로 인해서 발생하는 것이지만, 잘못된 리소스로 인해서 발생하는 경우도 꽤나 있다. 대표적인 리소스로 인한 버그를 예로 들자면 3D 모델을 3ds 맥스나 마야같은 3D 툴에서 작업할 때, 실수로 폴리곤을 뒤집어서 내보내는 것과 같은 것이 있다. 이렇게 폴리곤이 뒤집힌 모델은 게임 엔진에 올릴 경우, 해당 부위가 뻥 뚫려서 보이는 문제가 발생한다. 이렇게 눈에 바로 보이는 버그라면 다행이지만 눈에 보이지 않는 리소스로 인한 버그라면 찾아내기가 매우 어려울 것이다.

 

찾아내기 어려운 리소스 버그 중에 하나가 바로 잘못된 애니메이션 리소스로 인해서 발생하게 되는 버그이다. 단지 애니메이션이 이상하게 움직이는 버그라면 상관이 없지만, 애니메이션은 정상적으로 동작하지만 어느 순간부터인가 캐릭터의 로테이션이 돌아가있다던지 정상적인 위치를 조금씩 벗어나게 되는 문제가 발생한다면 어떨까? 프로그래머나 엔진 작업자는 우선 캐릭터의 로테이션이나 포지션에 관여하는 모든 코드를 검토해야할 것이다. 이상한 현상을 보일 수 있는 코드가 있는지 모든 부분을 확인해야 한다. 만약 규모가 있는 프로젝트라면 이 작업만으로도 엄청난 시간을 소모해야 하지만, 이 과정을 거친 이후에 코드에 문제가 없음을 확인했다면 어떨까? 만약 이러한 문제에 대한 경험이 없다면 큰 혼란에 빠질 것이다.

 

나는 최근에 이렇게 코드에 문제가 없음에도 불구하고 캐릭터가 회전하는 문제와 원래 위치를 조금씩 벗어나서 움직이는 버그를 모두 겪어본 적이 있다. 코드를 검토했음에도 불구하고 코드에는 문제가 없음을 확인했지만 여전히 캐릭터가 이상한 회전이나 이동을 하는 문제가 발생했는데, 그때가 되어서야 나는 코드가 아닌 리소스를 의심해보기로 했다. 우선은 어떤 상황에서 이런 문제가 발생하는지 명확하게 확인해야 했다. 여러 번 테스트해본 결과 캐릭터의 로테이션이 이상한 각도로 변하는 문제는 캐릭터가 사망하고 난 이후에, 오브젝트 풀링으로 재활용해서 가져왔을 때 발생했고, 캐릭터가 원래 위치를 벗어나는 문제는 캐릭터가 공격 모션을 취한 다음에 조금씩 이동하는 것을 확인할 수 있었다. 그렇게 해서 우선 문제가 발생하는 원인이 사망 애니메이션과 공격 애니메이션이라는 것을 알 수 있었고, 그 이후에는 유니티에서 캐릭터의 본들의 트랜스폼을 분석해서 특정한 본이 애니메이션 이후에 원래 상태로 돌아가지 않고 이상한 각도를 유지하거나 이상한 위치를 유지하는 것을 확인할 수 있었다. 이러한 문제를 애니메이터에게 알려주고 수정된 애니메이션 리소스를 받아서 적용한 이 후에는 이 버그는 해결되었다.

 

버그는 코드에만 있지 않다. 스크립트에 캐릭터의 회전이나 이동에 이산한 동작을 하는 코드가 없음에도 불구하고 이상한 회전을 보인다거나 원래 위치를 조금씩 벗어나서 이동하는 버그를 보게 된다면 애니메이션 리소스의 버그를 의심해보라.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Character Joint - 캐릭터에 물리효과를 받는 본 추가하기

 

지난 섹션들에서 래그돌을 만들고 사용하는 방법을 배우면서 Character Joint의 존재와 사용법에 대해서 알게 되었을 것이다. 그리고 이전 섹션까지는 애니메이션이 적용된 오브젝트와 Character Joint가 적용된 래그돌 오브젝트를 따로 사용한 것 역시 기억할 것이다. 테스트를 해보면 알겠지만 앞 섹션의 예시처럼 애니메이션이 적용된 모델링에는 일반적으로 Character Joint를 추가해도 물리 기능이 작동하지 않는 것을 알 수 있다.

 

하지만 디테일한 묘사를 원하는 개발자의 경우라면, 캐릭터의 허리 춤에 매달린 장비나 포니테일 같은 묶인 머리가 물리 효과를 받아서 자연스럽게 흔들리는 것을 원할 것이다. 이번 섹션에서 다룰 주제는 바로 그것에 대한 내용이다.

 

 

 

3D 모델 준비

 

 

 

 

흔들리는 '포니테일'을 구현하기 위해 간단한 말 모델을 만들어 봤다. 꼬리의 물리 효과에만 집중할 것이기 때문에 다른 부위는 크게 구현하지 않았다. 우선 모델 파일은 스키닝만 한 상태로 애니메이션을 포함하지 않고 익스포트했다.

 

 

그리고 말이 달릴 때 사용할 애니메이션을 간단하게 만들었다. 이 애니메이션을 만드는 과정에서 주의할 점은 Character Joint로 물리 효과를 사용할 본에는 절대로 애니메이션 키를 잡아서는 안된다. 만약 애니메이션을 만드는 과정에서 물리 효과를 적용하려고 하는 본에 키를 잡아버리면 그 본은 Character Joint를 적용해도 애니메이션 대로만 움직이고 원하는 움직임을 보이지 않게 된다. 이런 방식으로 애니메이터가 애니메이션 작업을 할 때, 애니메이션을 넣지 않은 본을 Jiggle bone이라고 부른다.

 

테스트할 때 사용할 이 귀여운 말의 모델과 애니메이션은 여기에서(

Horse.zip
다운로드

) 다운받을 수 있다.

 

 

 

 

유니티에 모델링과 애니메이션 넣기

 

3ds 맥스에서 필요한 모델과 애니메이션을 모두 익스포트했다면, 이제는 이것들을 유니티 엔진에 적용할 차례다.

 

 

우선은 모델과 애니메이션 파일을 유니티에 넣어준다.

 

 

모델과 애니메이션 파일을 가져왔다면 씬을 다음과 같이 구성해보자. 씬 한가운데에 말의 모델링을 넣고 추가된 말의 오브젝트에 애니메이션을 관리할 애니메이터를 넣어주는 것이다.

 

 

그리고 나서 플레이 버튼을 누르고 애니메이터의 isMove 파라메터를 활성화시키면 말이 달리듯이 위아래로 움직이는 것을 볼 수 있다. 하지만 말의 꼬리는 전혀 움직이지 않는 것을 확인할 수 있을 것이다.

 

 

 

꼬리에 Character Joint 적용하기

 

이제부터 꼬리에 물리 효과를 주기 위해 아까 전에 모델과 애니메이션을 만들 때, 애니메이션 키를 잡아주지 않았던 본들에 Character Joint와 Collider를 넣을 것이다.

 

 

유니티의 Hierarchy 뷰에서 말의 본들을 확인할 수 있다. 이 중에서 실제로 Character Joint가 들어갈 본은 3~5번 본이고 2번 본은 애니메이션 키가 적용된 본으로서 단지 Character Joint가 적용된 본들이 연결될 본이며, 2번 본에는 물리효과가 들어가지 않을 것이다.

 

물리 효과를 적용하기 위해서 다음의 순서를 따라해보자.

 

1. 2번 본에 Rigidbody를 추가한다.

 

 

2. 3~5번 본에 Character Joint를 추가해준다. Connected Body의 경우는 각 본마다 Rigidbody가 적용된 바로 한 단계 전의 본을 넣어주면 된다. 예를 들자면 3번 본의 경우에는 2번 본, 4번 본의 경우에는 3번 본을 넣어주는 식이다.

 

 

3. Character Joint가 추가된 본에 충돌 처리를 해줄 Collider를 넣어주고 적절한 크기로 만들어준다.

 

 

위의 과정을 모두 마치고 난후 플레이 버튼을 눌러보면 말의 꼬리가 자연스럽게 아래로 처지는 것을 볼 수 있다. 그리고 애니메이션을 실행시켰을때에도 물리효과를 받고 있는 것을 알 수 있는데, 아직 모자란 점이 눈에 보일 것이다.

 

 

분명 꼬리는 물리 효과를 받아서 흔들리고 있지만 애니메이션이 위아래로 움직이고 있지만 꼬리는 그 영향을 전혀 받고 있지 않음을 알 수 있다. 이 부분에 대해서는 관성을 처리해주는 별도의 스크립트를 추가로 작성해야 한다.

 

using UnityEngine;

public class JiggleBonePhysics : MonoBehaviour
{
    /// <summary>
    /// 부모 본의 트랜스폼
    /// </summary>
    Transform parentTransform;
    /// <summary>
    /// 이 스크립트가 포함된 본 오브젝트의 리지드 바디
    /// </summary>
    Rigidbody boneRigidbody;
    /// <summary>
    /// 이전 프레임까지의 부모 본의 위치
    /// </summary>
    Vector3 prevFrameParentPosition = Vector3.zero;
    /// <summary>
    /// 관성 가중치
    /// </summary>
    public float power = 0f;
    /// <summary>
    /// 변경된 위치의 크기의 제한. 제한 값이 너무 크면 이 본이 제대로 따라가지 못해서
    /// 각 관절들이 이상한 위치로 날아가는 문제가 발생할 수 있다.
    /// </summary>
    public float clampDist = 0.03f;

    void Start()
    {
        parentTransform = transform.parent;
        prevFrameParentPosition = parentTransform.position;

        boneRigidbody = GetComponent<Rigidbody>();
    }

    void FixedUpdate()
    {
        Vector3 delta = (prevFrameParentPosition - parentTransform.position);
        boneRigidbody.AddForce(Vector3.ClampMagnitude(delta, clampDist) * power);

        prevFrameParentPosition = parentTransform.position;
    }
}

 

위의 코드가 바로 관성을 처리해주는 코드이다. 이전 부모 본의 위치와 현재 부모 본의 위치로 계산해서 이전 위치에 남아있으려는 힘을 본의 Rigidbody에 전해주는 방식이다. 이 스크립트를 Character Joint 컴포넌트를 가진 모든 본에 추가해주면 된다.

 

 

그리고 나서 애니메이션을 동작시켜보면 말의 움직임에 따라 꼬리가 물리효과를 받는 것을 볼 수 있다. 여기에 추가적으로 간단하게 말을 움직이게 만들어 본다면 다음과 같은 장면을 얻을 수 있다.

 

 

이 Jiggle Bone 기능을 만들 때에는 Rigidbody와 Character Joint의 프로퍼티 값들을 세밀하게 살피면서 잘 조절해주어야 자연스러운 움직임을 연출할 수 있다. 위의 과정을 응용하면 이런 말의 꼬리 이외에도 앞서 말한 캐릭터의 허리춤에 매달린 도구, 묶은 머리, 쇠사슬 등 캐릭터에 추가적으로 달린 여러 가지를 흔들리게 만들 수 있다. 물론 잘 설정하면 신체 부위도 가능하다. 가슴이라던가... 바스트라던가... 엉덩이라던가... 개발자라면 도전해볼만한 기능이다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

2D 스프라이트 시퀀스 애니메이션

 

애니메이션은 게임에 생동감을 불어넣어 준다. 그런 애니메이션은 2D와 3D 애니메이션으로 나누어 지는데 3D 모델에 본을 심어서 움직이는 3D 애니메이션과 달리 2D 애니메이션은 고전적으로 시퀀스 이미지를 사용해왔다(최근 들어서는 2D 이미지를 부위 별로 나누고 거기에 본을 심어서 움직이는 스파인이나 라이브 2D 같은 방식의 애니메이션도 사용된다).

 

 

시퀀스 이미지란 위의 이미지처럼 진행될 애니메이션을 이미지로 그려서 나열해 놓은 것을 의미한다. 일반적으로는 위의 이미지처럼 하나의 시퀀스 이미지를 뽑아서 가져온 뒤에 오프셋을 이동시키는 방법으로 시퀀스 애니메이션을 사용했지만 유니티에서는 시퀀스 이미지를 각 프레임별로 이미지를 잘라서 사용한다.

 

잘라서 가져온 스프라이트 이미지

 

유니티 엔진에서 스프라이트 시퀀스 애니메이션은 크게 2가지 용도로 사용이 가능하다. 하나는 2D게임을 제작할 때, 2D 오브젝트에 애니메이션을 넣는 것이고, 다른 하나는 UI에서 2D 이펙트를 주거나, 기존의 키 애니메이션이 아닌 방식으로 UI에 애니메이션을 넣고 싶을때 사용하는 것이다.

 

이 2D 시퀀스 애니메이션을 사용하는 방법은 매우 간단하다.

 

 

우선은 간단하게 시퀀스 애니메이션을 적용할 2D 스프라이트 오브젝트를 생성하자.

 

 

그리고 Hierarchy 창에서 생성한 스프라이트 오브젝트를 선택하고 애니메이션 창을 열면 해당 오브젝트에는 아직 애니메이션이 없음을 볼 수 있다. 여기서 Create 버튼을 누르면 새로운 애니메이션을 만들 수 있다.

 

 

새로운 애니메이션을 생성한 이후에 한 애니메이션에 사용될 시퀀스 이미지들을 애니메이션 창에 드래그&드롭하면 그 생성한 애니메이션 클립에 시퀀스 이미지들이 들어가면서 스프라이트 시퀀스 애니메이션이 완성된다. 참고로 1프레임당 시퀀스 이미지 1장이 들어가기 때문에 적당한 속도로 애니메이션을 출력하기 위해서는 애니메이션의 속도 조절을 해야할 것이다. 다음 이미지가 0.5배속으로 만든 스프라이트 애니메이션이 적용된 모습이다.

 

 

2D 스프라이트 시퀀스 애니메이션을 사용할 때,시퀀스 이미지의 프레임이 늘어나면 애니메이션이 부드러워 보이고 퀄리티가 높아지지만 그만큼 더 많은 리소스를 사용하게 된다는 점을 기억해야 한다.

 

또한 시퀀스 애니메이션 작업을 할 때는 애니메이션에 사용되는 시퀀스 이미지들을 한꺼번에 선택해야 하는 경우가 많은데, 만약 시퀀스 이미지들의 해상도가 높거나 이미지들의 개수가 너무 많은 경우, 이미지들을 선택하는 것만으로도 유니티 엔진이 버벅대는 사태가 발생할 수 있다.

 

유니티 엔진의 Project 뷰에서 다량 혹은 고해상도의 이미지를 선택해야하는 작업의 경우에는 Inspector 뷰 우측 상단의 자물쇠 표시를 눌러서 잠궈주고, 하단의 프리뷰 창을 내려주는 것이 많은 도움이 될 것이다.

 

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

유니티 애니메이션 레이어(Animation Layer) 사용하기

 

 

 

지난 애니메이션 섹션에서는 비슷하지만 방향성이 다른 동작, 혹은 비슷하지만 속도가 다른 동작을 섞는데 사용하는 애니메이션 블랜드(Animation Blend)에 대해서 이야기해 보았다. 이번 섹션에서는 애니메이션 위에 일정 부분에 애니메이션을 덮어씌우는 애니메이션 레이어(Animation Layer)에 대해서 배울 것이다.

 

지난 애니메이션 블랜드 섹션 :: http://wergia.tistory.com/54

 

애니메이션 레이어는 여러 종류의 게임에서 이용될 수 있지만, 대표적으로는 FPS나 TPS 형식의 게임에서 주로 이용될 수 있다. 이러한 형식의 게임의 경우 캐릭터는 한 순간에 한 가지 행동만을 하는 것이 아니라, 하나 이상, 일반적으로는 두 개 정도의 행동을 하는 일이 많다. 간단하게 예를 들자면 총 같은 화기를 사용하는 FPS 게임이라면 캐릭터는 달리거나 걷는 동시에 총을 쏠 수도 있고, 단검을 휘두를 수도 있으며, 탄창을 교체하기도 한다. 앞서 이야기한 행동들을 하기 위해서 걸음을 멈추는 경우는 거의 없다. 평소에는 상체와 하체 모두 달리는 애니메이션을 취하지만, 달리는 도중에 다른 행동을 취한다면 하체는 여전히 달리는 모션을 출력하지만, 상체는 총을 쏘거나, 단검을 휘두르거나, 탄창을 교체하는 애니메이션을 출력하게 되는 것이다.

 

물론 이러한 애니메이션들을 일일이 만들어 내는 방법도 있지만 이것은 너무 비효율적인 일이다. 만약에 애니메이션 레이어를 사용하지 않고 모든 애니메이션을 만든다면, 가만히 서서 위의 세 가지 행동을 하는 애니메이션, 걸으면서 다른 행동을 하는 애니메이션, 달리면서 행동을 하는 애니메이션 등을 모두 만들어내야 할 뿐만 아니라, 만약 점프하면서 폭탄을 던지는 모션을 만들고자 한다면 점프하는 모션 중 어느 타이밍에 폭탄을 던지는 모션을 추가해야할지 골머리를 앓게 될 것이다.

 

하지만 애니메이션 레이어를 사용하게 된다면, 걷는 애니메이션, 달리는 애니메이션, 서있는 애니메이션, 점프 애니메이션, 그리고 각각의 행동을 취하는 애니메이션 정도만 만든다면 위에서 설명한 표현들을 손쉽게 할 수 있게 된다.

 

 

이번 예시를 들기 위해서 지난 애니메이션 블랜드 섹션에서 사용했던 달리기 모션과 함께 이번에 간단하게 만든 팔을 휘두르는 애니메이션을 사용할 것이다. 공격이라고 보기엔 귀엽지만 공격 모션이다. 애니메이션 레이어와 달리는 모션, 그리고 가만히 서서 공격하는 모션만 있다면 달리면서 공격하는 모션을 만들 수 있다.

 

애니메이션 레이어 사용법을 배우기 위해 다음의 튜토리얼을 따라해보도록 하자.

 

 

 

1. 애니메이션 레이어에 사용할 Animator Controller를 생성하고 그 이름을 Animation Layer라고 짓도록 하자.

 

 

2. 생성한 애니메이터 컨트롤러를 열면 다음과 같이 빈 애니메이터 컨트롤러 창이 보일 것인데 그 중에 Layers라는 항목이 있을 것이다. 그 항목을 선택하면 Base Layer가 있는데 이 레이어는 애니메이션에서 기본적으로 제공하는 레이어이다. 이 레이어의 이름을 바꿀 수도 있고 나중에 다른 레이어를 추가한다면 기본 레이어를 삭제할 수도 있다.

 

3. 기본적인 달리기 애니메이션을 애니메이터 컨트롤러에 추가한다. 그리고 이 애니메이터 컨트롤러를 씬에 추가한 캐릭터의 애니메이터 컴포넌트에 넣고 플레이 버튼을 누르면 이 박스맨은 계속해서 달리기만 할 것이다.

 

4. 이 다음 작업은 아바타 마스크(Avatar Mask)를 생성하는 것이다. 이 아바타 마스크는 애니메이션 레이어를 사용할 때, 위에 덮어쓴 애니메이션이 적용될 본을 지정하는 것으로, 해당 레이어에서 원하는 본만 애니메이션이 작동하고 그 외의 본은 그 아래 레이어의 애니메이션을 작동하도록 만드는 것이다.

 

5. 생성한 아바타 마스크를 열어보면 Humanoid 방식과 Transform 방식이 있는 것을 알 수 있다. 휴머노이드 방식의 경우는 사진을 보면 알다시피 일반적인 사람형태의 본에 대해서 손쉽게 마스크를 지정할 수 있게 하는 것이고, 트랜스폼 방식은 직접 만든 특별한 형태의 본을 가져와서 원하는 애니메이션이 적용될 본을 직접 선택하는 방식이다.

 

6. 이번엔 None이라고 비어있는 Avatar 란에 직접 만든 박스맨의 본을 가져와야 한다. 이 본은 BoxMan@Attack을 열어보면 목각인형 상체 모양의 BoxMan@AttackAvatar를 볼 수 있는데 이것을 끌어와서 넣어주면 된다. 그리고 Import skeleton 버튼을 클릭하면 박스맨에 적용된 본들이 아바타 마스크의 인스펙터 창에 표시된다.

 

7. 이번 섹션의 작업에서 우리가 동작하기 바라는 것은 왼팔 하나뿐이다. 박스맨의 본들 중에 왼팔에 해당하는 본은 Bone005(mirrored)이다. 이 본만이 움직이길 원하기 때문에 Bone005(mirrored)를 제외한 모든 본의 체크를 꺼준다.

 

8. 이제 아까 만든 AnimationLayer 애니메이터 컨트롤러로 돌아와서 Layers 항목의 아래 쪽에 +버튼을 클릭하여 새 레이어를 만들고 그 이름을 UpperBody로 변경한다.

 

9. 잠시 Parameters 항목으로 넘어가서 애니메이터 컨트롤러의 매개변수에 "Attack"라는 이름의 트리거를 생성한다.

 

10. UpperBody 레이어에 NoneAttack 상태를 만들고 애니메이션은 비워둔다. 아무것도 하지 않는 동작이기 때문에 비워두는 것이다. 만약 아무것도 하지 않는 동작이기 때문에 아래쪽의 베이스 레이어와 맞춰서 달리는 동작으로 해줘야 한다고 생각할 수 있는데 그런 식으로 달리는 애니메이션을 넣었다가는 하체의 달리는 모션과 상체의 팔 휘두르는 모션의 싱크가 일치하지 않게되는 현상을 겪을 수도 있다.

 

11. Attack 상태를 추가하고 Attack 애니메이션을 넣어준 다음에 NoneAttack 상태에서 Attack 상태로 넘어가는 조건에 아까 만든 Attack 트리거를 넣어준다. 이렇게 함으로서 이제 애니메이션 컨트롤러에 Attack 트리거 신호가 들어오면 캐릭터는 어택 모션을 취하게 될 것이다(설정에 실수를 했는데 Inspector 창에서 Has Exit Time의 체크는 해제해야 한다).

 

12. 다음 작업은 레이어 설정을 해주는 것이다. 레이어 이름 옆에 톱니바퀴 버튼을 클릭하면 레이어 옵션을 볼 수 있는데 여기서 두 가지를 설정해주면 된다. 첫 번째는 Weight 값인데 이 값은 현재 레이어와 아래 레이어의 애니메이션 비중을 의미한다. 1에 가까울 수록 캐릭터는 현재 레이어에 가까운 모션을 취한다. 즉, 1값이면 캐릭터는 현재 레이어의 애니메이션만 취한다. 그리고 Mask 옵션인데 이것은 애니메이션을 출력하고자 하는 부위만 출력하도록 해주는 것이다. 아까 전에 만든 왼팔만 적용되는 마스크를 넣어준다.

 

애니메이션 레이어에 필요한 모든 설정을 끝냈다. 이제 플레이 버튼을 클릭하고 캐릭터의 달리는 모션이 출력되는 도중에 Attack 트리거를 켜보면 다음 이미지와 같이 박스맨 캐릭터가 달리기 모션을 취하면서도 왼팔만은 정상적으로 휘두르는 것을 볼 수 있다.

 

 

 

 

이것처럼 애니메이션 레이어를 사용하면 애니메이션 작업양을 획기적으로 줄이면서도 다양한 동작을 취하도록 할 수 있다. 하지만 이 예시는 매우 간단하게 제작된 본과 모델링을 사용하는 것으로, 일반적으로 게임 제작에 사용되는 복잡한 형태의 본과 모델을 사용하는 경우에는 본의 구조나 리깅된 면의 정상적인 움직임을 위한 면밀한 연구가 필요할 것이다.

 

마지막으로 다음의 링크에서 위의 예시로 제작된 간단한 애니메이션 레이어 예제를 받을 수 있다.

 

AnimaitonLayerExample.zip
다운로드

 

 

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

유니티에서 애니메이션 블랜드 사용하기

 

작성 기준 버전 :: 5.6 - 2019.4

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

 

게임에서 자연스러운 애니메이션은, 캐릭터에 생명을 불어넣어 주는 요소 중에 하나이다. 다양한 종류의 애니메이션을 제작하면 캐릭터의 움직임은 더욱 자연스러워 질 것이다. 예를 들어 캐릭터가 움직이는 방향에 따라서 정면으로 움직일 때는 바르게 걷고 정면을 본체로 왼쪽으로 움직이면 왼쪽으로 옆걸음을 하는 방식으로 제작한다면 만약 왼쪽 정면 대각선 방향을 향해서 이동하면 어색한 움직임을 보일 것이다. 그것을 자연스럽게 처리하려면 왼쪽 정면 대각선 방향으로 움직이는 애니메이션을 만들어주어야 하고, 또 거기서 더 자연스러운 애니메이션을 만들고자 한다면 그 정면과 왼쪽 정면 대각선 사이, 왼쪽과 왼쪽 정면 대각선 사이의 애니메이션을 만들어서 추가해주어야 하는 것이다. 하지만 그렇다고 해서 게임 제작자가 모든 경우의 애니메이션을 일일이 다 만들 수는 없다. 그런 작업은 쉽지 않을 뿐만 아니라 게임제작에 들어가는 자원과 시간이 부족하다.

 

이러한 문제를 해결하기 위해서 사용되는 기능이 바로 애니메이션 블랜드이다.

 

이번 예시를 설명하기 위해 간단한 박스맨을 제작했고, 걷기 모션과 달리기 모션을 만들었다. 이동속도에 따른 걷기/달리기 애니메이션 블랜드는 가장 대표적이고 유용한 예제이다. 캐릭터의 이동 속도에 따라서 캐릭터의 보폭이나 발걸음 이동속도 역시 유동적으로 변하는 편이 자연스럽게 보일 것이다.

 

 

 

간단하게 걷는 모션과 달리는 모션의 차이를 주기 위해서 걷는 모션은 팔다리를 가볍게 움직이고 달리는 모션은 팔다리를 격하게 흔들도록 만들어 보았다.

 

 

 

애니메이션 블랜드를 사용하기 위해서는 우선 캐릭터의 애니메이션을 관리할 애니메이터 컨트롤러(Animator Controller)를 생성해야 한다.

 

 

애니메이터를 생성해서 열어보면 텅 빈 애니메이터 화면이 보일 것이다.

 

 

빈 화면에 우클릭해서 Create State > From New Blend Tree 항목을 선택하면 다음과 같이 Blend Tree라는 이름의 애니메이션 스테이트가 생성되고 Parameters에는 Blend라는 이름의 float 형식의 매개변수가 생성될 것이다 :

 

 

이 Blend라는 이름의 매개변수는 애니메이션 블랜드에서 두 여러 애니메이션이 섞일 때, 어느 애니메이션으로 치우쳐서 출력될 것인지를 결정하는데 도움을 줄 것이다. 현재는 캐릭터의 이동 모션에 따라 걷기/달리기 모션 블랜드를 할 것이기 때문에 이 변수의 이름을 "MoveSpeed"로 변경하도록 하자.

 

 

그리고 애니메이터 창에서 Blend Tree 스테이트를 더블 클릭해보면 다음과 같이 블랜드 트리로 내려가게 될 것이다.

 

 

위의 그림에서처럼 블랜드 트리를 선택하고 인스펙터 창(Inspector View)을 보면 Blend Type과 Parameter 그리고 Motion을 볼 수 있다. 우선 블랜드 타입은 파라메타의 변화에 따라서 어떻게 애니메이션이 블랜드 될 것인지를 정하는 것이다. 그리고 파라메터는 현재 애니메이션의 파라메터 중에 이 블랜드 트리에서 사용할 값을 정하는 것이며, 모션은 이 블랜드 트리에서 섞을 애니메이션을 정하는 것이다.

 

 

지금은 이동 속도의 변화에 따라서 모션을 블랜드할 것이기 때문에 가만히 정지 > 걷기 > 달리기 이 세 가지 모션을 추가하겠다. 모션 밑에 있는 + 버튼을 누르고 Add Motion Field 항목을 선택하면 다음과 같이 화면이 변한다. 이제 모션들을 추가해보자.

 

 

각 모션에 애니메이션들을 추가해주면 위의 그림처럼 각 애니메이션 노드가 생성되서 블랜드 트리와 연결되는 것을 볼 수 있다. 여기서 또 조정할 수 있는 옵션은 Threshold이다. Threshold는 한계점이나 역치라는 의미로 여기서는 각 애니메이션의 그래프 상의 위치를 의미한다. 위의 그림에서는 Stand의 Threshold는 0, Walk의 threshold는 0.5, Run의 threshold는 1이다. 이 의미는 MoveSpeed의 값이 0~1사이에서만 움직일 것이고 0~0.5 값이면 Stand와 Walk 모션이 블랜드가 되고 0.5~1 값이면 Walk와 Run 모션이 블랜드된다는 것이다. 하지만 일반적으로 게임에서는 이동 속도 값을 0~1로 사용하지 않기 때문에 그럴 때는 Automate Thresholds 체크를 풀어주면 값을 적절하게 조절해줄 수 있게 된다.

 

만약에 최대 이동 속도가 50이고 걷는 속도가 10이라고 한다면 그 값을 아래와 같이 입력해주면 된다. 이렇게 설정해주고 캐릭터의 스크립트에서 이동 모션을 출력하면서 이동 속도에 따라서 animator.SetFloat("MoveSpeed", moveSpeed);를 호출해주면 애니메이터는 자동으로 변화하는 이동 속도에 따라 어느 애니메이션들을 얼마나 출력할지 결정하고 출력해줄 것이다.

 

 

 

 

애니메이션 블랜드를 사용할 때, 주의할 점은 블랜드된 애니메이션이 자연스럽게 보이기 위해서는 블랜드 되는 모션들이 비슷한 동작을 취해야하고 타이밍이 비슷해야 한다는 것이다. 하지만 예외적으로 애니메이션의 길이가 다른 것은 블랜드의 결과에 영향을 미치지 않는다. 그 이유는 정확한 블랜드를 위해서 두 애니메이션의 길이를 똑같게 맞추는 정규화 작업을 한 이후에 블랜드를 하기 때문이다.

 

간단한 위의 예제는 다음 링크에서 다운로드 받아서 실행해볼 수 있다.

 

AnimationBlendPractice.zip
다운로드

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Animation Event 사용법

 

 

새로운 버전의 글!

 

이 버전의 글은 약간의 오류를 포함하고 있으며 이를 수정한 최신 버전의 글을 링크를 통해서 보실 수 있습니다.

 

 

개요(Overview)

게임을 제작할 때, 애니메이션이 실행되는 도중에 적절한 타이밍에 맞춰서 무언가가 실행되어야 하는 경우가 종종 발생한다. 예를 들자면 대표적으로는 캐릭터가 걷거나 뛸 때 발소리가 나거나 먼지가 일어나야 한다던지 캐릭터가 무기를 휘두를 때 맞는 타이밍에 맞춰서 데미지가 들어가야 한다던지 하는 경우가 있을 수 있다. 이러한 문제를 해결하는 하드한 방법으로는 계산해낸 타이밍에 맞춰서 해당 함수를 실행시킨다던지, 콜라이더를 원하는 위치에 붙여서 그 콜라이더가 충돌했을때 처리하는 방법이 있지만, 이러한 방법들은 매우 비효율적이다.

 

계산해낸 타이밍에 맞춰서 원하는 함수를 실행하는 방법의 경우에는 공격 속도나 이동 속도에 맞춰서 모션의 속도가 변하는 유동적인 상황에 대처하기가 매우 어렵고, 특히 콜라이더를 사용하는 방법은 겨우 발소리나 발움직임에 맞춰 먼지 이펙트를 만드는데 쓰기에는 매우 비용이 비싸다. 공격 애니메이션에 맞춰서 데미지를 주는 경우에는 무기나 데미지를 주는 부위에 콜라이더를 붙여서 사용하는 것을 고려해볼만 하지만, 이러한 방법은 주로 공격의 명중이 확정되지 않은 게임, 즉 논타겟(None-Target) 방식의 게임에 적합한 방법이며, 공격의 명중이 확정되어있는 게임의 경우에는 역시 사용하기가 곤란하다.

 

 

 

애니메이션 이벤트(Animation event)

그래서 존재하는 것이 바로 유니티의 애니메이션 이벤트(Animation event)라는 기능이다. 이 기능은 애니메이션의 실행 도중, 원하는 시점에 원하는 함수를 호출할 수 있게 해준다. 이 문장 하나만으로도 개요에서 설명한 상황에 전부 대처가 가능할 것임을 알 수 있다.

 

이 애니메이션 이벤트를 사용하는 방법은 2가지가 있는데 FBX 모델과 함께 임포트된 애니메이션에서 사용하는 방법과 애니메이션 클립(Animation clip)에서 사용하는 방법이다.

 

 

방법 1 : FBX 모델과 함께 임포트된 애니메이션에서 애니메이션 이벤트 사용하기

 

 

프로젝트 창(Project view)에서 임포트한 FBX파일을 선택하면 Inspector 창에 그 FBX파일의 정보들이 보일 것이다. 그 중에서 상단의 Animations라는 탭을 선택하면 그 FBX에 포함된 애니메이션의 정보를 볼 수 있다. 우리가 필요로 하는 애니메이션 이벤트 기능은 그 중에서 Events라는 곳 안에서 사용할 수 있다. 그 항목을 열면 다음과 같은 내용을 볼 수 있다 :

 

 

노란색으로 표시된 버튼을 누르면 다음과 같이 애니메이션이 재생되는 도중에 실행될 이벤트가 새로 생성된다 :

 

 

위의 이미지에서 파란색으로 표시된 것을 드래그하면 이 이벤트가 실행될 시점을 조절할 수 있으며 그 아래의 입력 필드의 내용들은 다음과 같다 :

 

 필드 이름 내용
 Function 이벤트 시점에 실행될 함수의 이름
 Float  함수에 float형 매개변수가 있을 때 들어갈 값
 Int  함수에 int형 매개변수가 있을 때 들어갈 값
 String  함수에 string형 매개변수가 있을 때 들어갈 값
 Object  실행할 함수가 들어있는 스크립트

 

이번 예시로는 공격 애니메이션의 타이밍에 맞춰 데미지를 주는 것으로 진행 해보겠다. 먼저 적에게 데미지를 주는 작업을 할 스크립트를 생성한다.

 

예제이기 때문에 자세한 과정에 대한 코드를 생략하고 AttackComponent 스크립트는 다음과 같은 함수를 가지고 있다.

 

using UnityEngine;

public class AttackComponent : MonoBehaviour
{
    public void AttackDamage()
    {
        // 적에게 데미지를 주는 처리
        Debug.Log("데미지 60!");
    }
}

 

공격 애니메이션에서 적에게 무기가 맞는 시점이 위의 Events 이미지에서 0:050라고 가정하자. 다음과 같이 이전에 생성한 이벤트를 0:050 지점으로 옮기고 Object에 생성한 AttackComponent 스크립트를 넣어주고 Function에는 AttackDamage 함수 이름을 입력해주면 된다.

 

 

다음과 같은 과정을 끝내고 나면 애니메이션이 실행되고 0:050 지점을 지날 때마다 유니티 에디터에서 "데미지 60!"이라는 로그가 출력될 것이다.

 

 

 

방법 2 : 애니메이션 클립에서 애니메이션 이벤트 사용하기

 

 

 

 

애니메이션 클립은 3D 모델 없이 애니메이션에 대한 정보만을 가지고 있는 것을 이야기한다. 물론 임포트한 FBX 모델 파일에서 애니메이션만 꺼내와서 사용하는 것도 가능하다. 이러한 애니메이션 클립에서 애니메이션 이벤트를 사용하는 방법은 이전에 소개한 FBX 모델에 포함된 애니메이션에서 사용하는 방법과 상당히 비슷하다.

 

프로젝트 창에서 애니메이션클립을 선택하고 애니메이션 탭을 열면 다음과 같은 화면을 볼 수 있다.(만약 애니메이션 탭이 보이지 않는다면 상단의 Windows 메뉴에서 Animation을 찾아서 열거나 Ctrl+6 단축키를 이용해서 열 수 있다)

 

 

애니메이션 탭에서도 FBX 파일 애니메이션의 이벤트에서 봤던 것과 같은 모양의 버튼을 볼 수 있는데 이것을 통해서 이벤트를 생성할 수 있고 드래그를 통해서 이벤트의 시점을 이동시킬 수도 있다.

 

 

그리고 이 이벤트를 선택하면 Inspector 창에서 다음과 같은 내용을 볼 수 있다 :

 

 

이 이후에는 방법 1에서 진행한 것과 같이 진행하면 원하는 결과를 얻을 수 있게 된다.

 

 

 

마무리...

 

이 애니메이션 이벤트를 사용할 때, 프레임이 씹힐 경우에 애니메이션 이벤트가 같이 스킵되는 경우가 발생한다는 이야기도 있다. 다른 이야기로는 이 문제는 레거시(Legacy) 애니메이션을 사용할 때 주로 발생하며, 메카님에서는 개발자의 실수로 트랜지션 구간을 잘못 설정했을 때 발생하는 문제이며 일반적으로는 발생하지 않는 문제라고도 한다. 이런 문제가 발생하면 애니메이션의 트랜지션에서 블랜드되는 과정을 잘 확인해보는 것이 우선일 것 같다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

유니티 애니메이션 속도 조절 방법

 

 

게임을 제작할 때 개발자는 애니메이션의 속도에 관여해야하는 경우가 자주 발생한다. 대표적인 예시를 들자면 캐릭터의 공격 속도 수치가 변할 수 있는 게임에서 캐릭터의 공격 속도와 공격 애니메이션의 속도를 맞추기 위해 관여하는 것이다. 이러한 두 속도를 세심하게 맞추는데 실패한다면 캐릭터의 공격 애니메이션이 끝나지 않았는데 캐릭터가 이동을 한다던지, 공격 애니메이션과 데미지가 들어가는 타이밍이 다르다던지 하는 상당히 부자연스러운 상황이 발생하게 될 것이다. 이러한 상황은 게임의 타격감이라는 요소를 떨어뜨리는 심각한 문제가 될 수도 있다.

 

그렇게 때문에 적절한 순간에 애니메이션의 속도를 조절하는 방법을 알아둘 필요가 있다. 유니티에서는 애니메이션의 속도를 조절하는 방법을 여러가지 지원하는데 하나씩 알아보도록 하자.

 

 

방법 1 : Animator에서 선택한 State의 Speed를 Inspector 창에서 애니메이션 속도 직접 변경하기

 

 

위의 그림에서 표시된 Speed 값을 직접 변경하는 것으로 애니메이션의 속도를 변경할 수 있다. 하지만 이 방법은 게임 내에서 애니메이션의 속도가 동적으로 변경되지 않을 것이라는 보장이 있을 때에만 사용이 가능하다.

 

 

방법 2 : Animator를 소유한 스크립트에서 코드를 통해 애니메이션 속도 변경하기

 

다음은 스크립트에서 코드로 애니메이션의 속도를 변경하는 예제이다.

 

using UnityEngine;

public class AnimationSpeedExample : MonoBehaviour
{
    public float animSpeed = 1.0f;
    public Animator animator;
   
    // Update is called once per frame
    void Update ()
    {
        animator.speed = animSpeed;
    }
}

 

위의 코드를 이용하면 animSpeed라는 변수의 값이 변경될 때마다 Animator 내에 있는 애니메이션들의 속도가 자동으로 변하게 될 것이다. 이 방법은 자유롭게 게임이 실행되는 와중에 애니메이션의 속도를 변경할 수 있지만, animator.speed를 통해서 애니메이션의 속도를 조절하면 해당 animator에 속하는 모든 애니메이션의 속도가 변한다는 단점이 있다. 예를 들자면, 공격 모션의 속도를 빠르게 하기 위해 speed를 1에서 2로 바꾸었는데, 공격 모션 뿐만 아니라, 이동 모션, 대기 모션 등 모든 모션의 속도가 2배 빨라지는 현상이 나타날 수 있다는 것이다. 그렇기 때문에 이 방법은 애니메이션이 블랜드되는 상황에서는 사용하기 부적합하며, 속도를 빠르게 한 애니메이션의 출력이 끝난 이후에는 다음 애니메이션의 정상적인 출력을 위해서 속도 값은 원상복귀시켜 주어야 한다는 단점이 존재한다.

 

방법 3 : Animator의 Parameter와 Multiplier를 이용한 애니메이션 속도 변경하기

 

공격 속도가 증가했는데 공격 애니메이션 이외의 애니메이션의 속도가 빨라지는 것은 부적절하며, 뛰어가면서 총을 쏜다던가 하는 방법의 애니메이션 블랜드에서는 모든 애니메이션의 속도가 변경되면 좋지 않다는 것을 앞선 방법에서 이야기했다. 그렇다면 우리가 알아야 할 방법은 속도의 변경이 필요하지 않은 애니메이션은 놔두고, 필요한 몇몇의 애니메이션의 속도만 조절하는 것이다.

 

이 방법을 위해서 필요한 것은 Animator의 Parameter와 Multiplier라는 것이다.

 

Animator의 parameter

 

 

Animator에서 State를 선택했을 때, Inspector 창에서 찾을 수 있는 Multiplier

 

이 방법을 적용하는 순서는 다음과 같다.

 

1. Animator의 Parameter에서 +를 눌러서 float형의 "AttackSpeed"라는 parameter를 만들어 준다.

 

2. 속도를 조절하고자 하는 State를 선택하고 Multiplier의 Parameter를 체크하고 추가한 AttackSpeed를 선택한다.

 

3. 속도 변경을 위해 animator의 "AttackSpeed" parameter를 변경하는 코드를 작성한다.

 

using UnityEngine;

public class AnimationSpeedExample : MonoBehaviour
{
    public float animSpeed = 1.0f;
    public Animator animator;
   
    // Update is called once per frame
    void Update ()
    {
        animator.SetFloat("AttackSpeed", animSpeed);
    }
}

 

위의 과정을 끝내고나면 Animator.SetFloat()을 통해 원하는 parameter의 값을 조정해 주는 것만으로 원하는 애니메이션의 속도를 조절할 수 있게 된다.

 

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts