이번에는 닷트윈 시퀀스를 사용해보자.
먼저 Edit > Project Settings > Visual Scripting의 type Options에서 shortcut Extensions/Tween Settings Extensions/DO Tween/Tween를 추가해주고 Regenerate Nodes를 눌러준다.
닷트윈 시퀀스
만약에 아래로 움직이는 Tween1, 오른쪽으로 움직이는 Tween2, 다시 위로 올라오는 움직임 Tween3가 있다고 할 때 세 가지의 트윈을 실행하고 싶다면 아래와 같이 Delay를 주어야하지만 시퀀스를 사용하면 트윈 뒤에 또 다른 트윈을 덧붙여서 손쉽고 직관적으로 구현할 수 있다.
Append
시퀀스에 Tween을 추가할 때 덧붙이는 기능을 하는 함수이다.
이런 식으로 붙이면 Tween1이 실행되고 난 이후에 Tween2가 실행횐다.
이런식으로 시퀀스를 만들었다고 해보자
버튼을 눌러보면 동전이 아래로 내려온 후에 오른쪽으로 이동하는 것을 확인할 수 있다.
그냥 순차적으로 Do Move를 한거랑 뭐가 다를까?
그냥 Do Move를 연결해버리면 Tween1 이 끝나기도 전에 Tween2가 실행되서 최종 위치로 순차적으로 가는게 아니라 바로 최종 위치로 한번에 이동한다.
Join
움직임과 동시에 투명하게 Tween을 동시에 적용시킨다고 해보자. Join을 이용하면 두 가지 트윈이 동시에 일어나도록 아래와 같이 배치할 수 있다. 즉, Append와 마찬가지로 Sequence에 Tween을 붙일 수 있는데 차이점은 Append는 앞의 Tween이 끝난 후에 재생, Join은 앞의 Tween과 동시에 진행된다.
Image Color의 alpha 값이 0이 되는 DO Color Tween을 Join 시켜 놓았다.
두 번째 Tween(오른쪽으로 이동) 하면서 동시에 투명해진다.
이런 식으로 Append와 Join으로 손쉽게 트윈의 앞뒤를 연결하고 동시 실행이 가능하다.Insert
Insert 함수를 통해 시퀀스 내의 임의의 시작 지점을 찾아서 트윈을 시퀀스에 넣을 수 있다. 이런 Insert 된 트윈은 넣는 순서에 따라서 재생 순서가 결정되지 않는다. 대신 지정하는 임의의 시점에 트윈을 재생한다. 따라서, 지정하는 시점에 따라서 원하는 트윈 사이에서 재생할 수 있다.
아래와 같이 노드를 작성해보자.
이 때 At Position이 트윈이 시작할 시점을 시간으로 지정하는 변수이다. ( 0 = 0초에 시작, 0.5 = 0.5초에 시작 )
이렇게 Insert를 이용하면 임의로 지정된 시간에 Tween을 실행할 수 있다.
계수기 스타일의 숫자 연출
버튼을 눌러 카운팅이 될 때 DO Counter로 숫자를 증가시키고 숫자가 목표치에 도달하면 사이즈가 살짝 커졌다 작아지면서 원래 색으로 돌아간다.
문제점
시퀀스가 쌓이는 문제
같은 시퀀스가 있으면 해당 시퀀스를 삭제하고 새 시퀀스를 배정하도록 한다.
아래와 같이 "Set String Id로 시퀀스에 아이디를 지정 + Do Tween Kill로 동일한 ID의 시퀀스가 있으면 제거"를 통해서 문제를 해결할 수 있다.
앞서 재생되던 시퀀스가 중첩되서 쌓이는 문제는 해결했다.
Punch의 Scale 조정 문제
버튼을 빠르게 눌렀을때 Tween이 동시에 실행되면서 사이즈가 비정상적으로 커진다.
DO Punch는 현재 scale을 기준으로 1.25배 사이즈 크기만큼 제한하고 Punch 효과를 주는걸로 scale이 커진 상태에서 DO Punch가 또 들어오면 1.25 * 1.25배로 계산이 된다.
따라서 글자의 크기를 초기화할 수 있는 노드를 배치하자. 크기 초기화 위치는 적절히 원하는 곳에 배치하면 해결된다.
완성본
완성된 Script Graph는 아래와 같다.
일제로 UVS로 닷트윈의 모든 기능을 구현하기는 어려워서 스크립트로 구현하는 방법을 더 자세히 공부하고, UVS는 정말로 간단한 Tween 효과를 구현할 때만 사용하는 방식으로 가면 될듯하다.
