유니티 에셋공부 <DOTween Pro> - (1)

물론 핑계지만..이것저것 일이 많았어서.. 블로그에 글 올릴 시간이 많이 없었다.

 

회사에서는 새 프로젝트의 프로토타입 작업을 하고 있고,  

이끌어주실 과장님도 들어오셔서 밑에서 열심히 배우려고 하고있다.

변수명 통일부터 시작해서 전반적인 지식이나 협업관련해서 부족한게 많아서 과장님께 늘 죄송하긴 하지만..

 

아무튼 본격적으로 프로젝트 작업에 들어가기전에 프로젝트에 필요한 에셋을 하나씩 공부해볼까 한다.

---

DOTween 

DOTween Pro | 비주얼 스크립팅 | Unity Asset Store

DOTween Pro | 비주얼 스크립팅 | Unity Asset Store

 

 

현업에서도 많이 쓰이는 에셋으로 알고있고, 잠깐 써보니 15달러의 값어치는 확실히 할것같다.

우리가 일반적으로 유니티에서 사용하는 이동,회전, 값 변경, 텍스트 , 컬러 등등.. 여러가지 기능들을 쉽게 구현하게 만들어주는 에셋이다.

---

가볍게 컴포넌트로 사용해보기

 

 

DOTween 에셋을 임포트하고 컴포넌트 추가에서 검색해보면 'DOTween Animation 이라는것이 뜬다.

 

 

 

SELF 버튼 밑에 드롭박스를 클릭해보면 많은 프로퍼티들이 나오는데,

너무 많아서 다 해보진 못하고 가장 많이 쓰는 Move를 설정했다.

 

 

 

위의 프로퍼티들을 바꾸면 아래의 항목들도 바뀌게 된다.

Move로 설정했을때

 

Duration - 몇 초 만에 가게 할지

Delay - 지연 시간 (직접 해보니 1이라고 설정하면 1초 후에 실행된다.)

Ignore TimeScale - 해보진 않았지만 당연히 유니티의 TimeScale에 영향을 받게 할건지를 묻는것 같다.

Ease - 움직임을 부드럽게 한다던지, 변환을 준다던지 하는 방식을 고를 수 있다.
(ex. 우리가 그냥 움직이게 할때랑 보간을 사용해서 움직이게 할때를 생각하면 편할 것 같다.)

Loops - 얼마나 반복할건지를 묻는데, Loops를 1보다 높게 설정하면 Loop Type을 따로 설정 가능하다.

 

 

마지막으로 가장중요한 To - From / value - Target

 

To -> 어디로  /  From -> 어디에서 부터
value -> 값 / Tartget -> 타겟 직접 지정

 

 

 

<TO , value (0,3,0) 으로 설정하고 이동시킨 장면>

위 움짤은 To 와 value로 설정하여 이동시켜봤다.

vector3 (0,3,0)

 

 

위 움짤은 From 과 Target(오른쪽 네모)으로 설정하여 이동시켜봤다.

 

그리고 굳이 실행시키지 않아도 컴포넌트 상단에 Preview mode 재생을 통해 확인이 가능하기 때문에 간편하다.

벡터값이 다 float이기 때문에 스크립트로 이동시키기가 정말 귀찮은데, 참 간편하게 느껴진다.

 

 

텍스트를 한글자씩 찍는것도 상당히 귀찮은 작업중에 하나였는데.. 

정말 간편하게 사용이 가능하다.

스크립트에서는 TextMeshPro가 되는거 같은데, 그냥 컴포넌트로 했을때는 인식을 못하는거 같다.

 

---

기본 정보들

 

DOTween에서 기본적으로 쓰이는 것들을 한번 정리 해봤다.

 

기본 용어

Tweener : 값을 제어하고 애니메이션을 하는 트윈 (DOTween에서 모든걸 수행하는 일꾼이라 보면 됨)
Sequence : 값을 제어하지는 않지만 그룹 애니메이션을 하는 특수 트윈
Tween : 위에 트위너와 시퀀스를 칭하는 말
Nested tween : 시퀀스안에 포함되어있는 트윈

 

접두사

Do : 모든 트윈의 단축키 접두사
 ex. transform.DOMoveX(100,1);

Set : 모든 설정 접두사
 ex. myTween.SetLoops(4, LoopType.Yoyo).SetSpeedBased();

On: 콜백 접두사
ex. myTween.OnStart(myStartFunction).OnComplete(myCompleteFunction);

 

DOTween.Init

기본적으로 트윈을 만들면 자동으로 초기화가 되지만, 커스텀 하기 위해서는 이 함수를 통해 따로 초기화 해줄수가 있다.

 

---

스크립트로 DOTween 이용하기

 

아마 직접 인스펙터에서 작업하기 보다는 스크립트로 작동할때가 많지 않을까 싶다.

그 이용법을 조금 공부해봤다.

 

 

첫번째로 DG.Tweening 네임스페이스를 추가해줘야한다.

 

스크립트로 이용하기 위한 방법은 두가지가 있다.

참고로 스크립트로 작동시킬때는 위에서 만져봤던 'DOTween Animation' 컴포넌트가 없어도 작동한다.

 

---

첫번째 방법, static DOTween.To(getter,setter,to,float duration)

 

 

DOTween 도큐먼트를 보면 이렇게 설명이 되어있다.(번역기 돌림)

 

아까 보여드렸던 움짤에서 네모와, 타겟 네모의 트랜스폼 변수를 설정해주었다.

그리고 아래의 함수를 이용하면 아까 보여드렸던 움짤처럼 잘 움직인다.

 

 

뒤에다가 .From() 만 붙이면 반대로 작동한다.

 

---

두번째 방법, 접두사 활용하기

 

아마 위의 방법 보다는 이 방법이 편하고 직관적이고 그동안 써왔던 방법과 비슷하기 때문에 이 방법을 다들 선호하지 않을까 싶다.

 

그냥 transform 뒤에 DO - 접두사를 붙인 함수를 사용해주면 끝이다. 

DOTween.To를 사용했던 코드와 똑같이 작동한다.

 

mysqure.transform.DOMove(target_square.transform.position, 1.0f).From();

위 코드처럼 From()을 붙여줘도 되고,

 

 mysqure.transform.DOMove(target_square.transform.position, 1.0f).SetLoops(5, LoopType.Restart);

 

Set- 접두사를 통해 Loop의 횟수를 설정해줄수도 있다.

 

 mysqure.transform.DOMove(target_square.transform.position, 1.0f).SetLoops(5, LoopType.Restart).From();

 

이 코드 역시 뒤에 .From() 만 붙여주면 반대로 작동한다.

 

그 뒤에 on- 접두사를 통해 콜백을 이용해봤다.

앞에 작업이 끝났을때 스케일이 커지는 함수를 만들어놓고 onComplete에 넣어주었다.

 

도큐먼트에 있는대로 따라하다가 계속 안돼서 원래 델리게이트를 사용하는 방식으로 했더니 됐다 ㅡㅡ..

내가 잘못한건지.. 잘 모르겠다

 

On- 접두사들을 쓰는 콜백들은 TweenCallback 이라는 형식이다.

 

트윈 콜백은 그냥 인자가 하나도 없는 void형 델리게이트다.

 

 

의도한대로 3번 반복하고 커지는것을 볼 수 있다.

 

---

일단 기본적인 기능들만 사용해봤는데, 프로젝트 진행하기 전까지 계속 공부해볼 예정이다.

공부는 아래 두 사이트를 보면서 했다.

 

- DOTween 도큐먼트

DOTween - Documentation (demigiant.com)

DOTween - Documentation

 

- 정리가 잘 되어있는 두야님의 블로그

 

[Asset] Unity3D 'DOTween' 1 : 기본 기능과 팁 : 네이버 블로그 (naver.com)

[Asset] Unity3D 'DOTween' 1 : 기본 기능과 팁