Unity) 애니메이션 필수 에셋 -DOTween(Pro)-

이번 글에서는 유니티의 필수 에셋 중 하나로

평가받을 정도로 유명한 에셋인 DOTween (Pro)에 대해 소개하겠다.

 

먼저, Tween이란 두 개 이상의 상태를 매끄럽게 보간 하는 걸 의미한다.

이걸 우리는 애니메이션이라는 말로도 표현할 수 있다.

근데 사실 유니티로도 부드러운 애니메이션을 만들 수 있는 방법이 있다.

 

Update()에 넣어서 한 프레임씩 움직이게 하여 부드럽게 보이게 하던가

코루틴을 이용해서 애니메이션 형태로 만드는 방법,

Animation 컴포넌트가 제공하는 자동 보간 등 다양한 방법이 있다.

 

하지만 이런 에셋이 이렇게나 유명해진 이유는 위에서

언급한 Tween 기능들이 복잡하고, 기능이 다양하지 않기 때문이다.

아무튼, 그런 기능들을 쉽게 처리하도록 해주는 에셋, DOTween을 알아보자.

 

(DOTween은 무료 버전과 유료 버전이 있음)

---

1. 설치 및 기본 세팅

가장 먼저, 설치부터 해보자.

 

항상 그렇듯 [Window] -> [Package Manager]를 클릭해 주자.

 

그 후에는 Packages: 를 My Assets로 바꿔준다. (좌측 상단에 있음)

 

다음으로는 DOTween (Pro) 에셋을 찾아서 Download, Import 버튼을 차례로 눌러주면 된다.

 

그럼 이렇게 자동적으로 SetUp을 위한 창이 뜨게 된다.

"Open DOTween Utility Panel" 버튼을 눌러주자.

 

그럼 이렇게 새로운 창이 하나 더 나오는데, 

누가 봐도 누르라고 강조되어 있는 Setup DOTween... 버튼을 눌러주자.

 

그다음에는 설치되는 걸 잠시 기다렸다가 Apply 버튼이 활성화된 후 누르면 된다.

이러면 설치와 기본세팅은 완료된 것이다.

---

2. 사용법.

여기서 무료 버전과 유료 버전의 차이점이 드러난다.

무료 버전은 무조건 "코드"를 사용해서만 기능을 쓸 수 있다.

 

유료 버전은 게임을 실행하지 않고, 따로 제공되는

컴포넌트에 있는 Play 버튼으로 미리 애니메이션을 볼 수 있다.

---

아무튼, 직접 사용해 보자.

먼저, 유료 버전인 사람들도 코드는 언젠가는 짜야하기 때문에

코드로 조작하는 방법을 소개해보겠다.

using DG.Tweening;

가장 먼저 위의 네임스페이스를 추가해주어야 한다.

 

그리고 DOTween은 "한 번"의 실행으로 이후의 애니메이션이 나오기에

Update()에 넣으면 안 되고 Start()처럼 한 번만 실행하는 곳에 넣어야 한다.

 

transform.DO를 쳐보면 아래와 같이 수많은 자동완성이 뜬다.

가장 기본적으로, DOMove를 써보자.

 

void Start()
{
    transform.DOMove(new Vector3(5,0,0), 5);
}

이런 코드를 짜보았다.

첫 번째 파라미터는 이동할 위치를 나타낸다.

두 번째는 이동할 시간을 나타낸다.

종합적으로 보면 "(5,0,0)의 위치로 5초 동안 간다"가 된다.

처음 위치

5초후 위치

이 스크립트를 움직일 오브젝트에 넣고 실행해 보면

5초 동안 저 위치로 가는 걸 볼 수 있을 것이다.

 

원래라면 최소한 3-4줄은 나왔어야 할 코드가 한 줄로 끝났다.

이렇게 간단히 표현이 가능하기에 많이 애용되는 것이다.

 

https://dotween.demigiant.com/documentation.php

DOTween - Documentation

물론 DOMove 말고도 다양한 메서드들이 존재한다.

위의 사이트로 들어가서 확인하여 잘 사용하길 바란다.

2-1. Sequence

추가로, DOTween에는 Sequence라는 기능이 있다.

함수 뒤에. 을 붙이고 Sequence를 이어 붙여 더욱 다양한 기능을 수행한다.

 

void Start()
{
    transform.DOMove(new Vector3(5,0,0), 5).SetDelay(5);
}

예를 들어, 코드를 실행하고 5초 뒤에 움직임을 시작하고 싶다면,

이렇게 코드를 짜주면 된다. Set이 붙은 메서드들이 모두 Sequence 들이다.

이것 또한 위의 사이트에 다 나와 있으니 확인했으면 좋겠다.

---

3. DOTween Pro

이번에는 Pro의 기능들을 알아보겠다.

 

가장 먼저, 컴포넌트가 제공된다.

 

이렇게 기능을 선택해서 Play버튼을 누르면 실행하지 않고도 볼 수 있다.

 

또한 무료버전은 그냥 Text만 지원하지만,

유료버전은 TextMeshPro도 지원하는 모습을 보인다.

 

여러 개의 움직임을 동시에 구현하고 싶다면 컴포넌트를 이어 붙이면 되는 방식이다.

또한 동작하는 움직임의 주기 함수도 바꿔줄 수 있다. (Ease)

 

Ease라는 세팅값에 엄청나게 많은 함수들이 있다.

변화하는 주기를 조정할 수 있는 함수들이다.

예시로, linear을 선택하면 일차함수라는 뜻으로 "일정하게" 움직인다.

표가 있으니 참고하라.

---

여기까지 유니티의 필수에셋 DOTween을 소개해봤다.

DOTween의 매력을 느낄 수 있는 글이었는지 모르겠다.

나는 개인적으로 굉장히 좋은 에셋이라 평가하고 싶다.

 

가격도 굉장히 싸고, 내가 하기 힘든 작업을 해준다.

앞으로는 프로젝트할 때마다 첫 번째로 추가하는 에셋이 될 것 같다.

---

이상으로 도움이 되었길 바라며,

 

끝.

 

+)

이 글은 제가 실제로 사용해 본 제품에 대한 솔직한 이야기입니다. 저는 이 제품을 유니티로부터 지원받아 이 글을 작성하게 되었고 링크를 통해 구매하시는 경우, 저에게는 소정의 커미션이 지급됩니다. 하지만, 이로 인해 저의 평가가 편향되지 않았음을 명확히 말씀드리고 싶습니다. 돈도 물론 중요하지만 진실한 글임을 인정받을 때 돈도 따라온다고 생각하기 때문입니다. 이 글의 목적은 전적으로 여러분들의 고민을 돕는 것이며 "광고"로만 보지 않아 주셨으면 합니다. 감사합니다.

(커미션 진짜 얼마 안 됩니다... ㅠㅠ)