게임를 개발함에 있어서 트위닝은 굉장히 중요하고 그렇기에 DOTween을 다룰 줄 아는게 중요하다고 생각한다. 성능이나 제작 효율 측면에서 DOTween은 애니메이터의 좋은 대안이기도 하다. DOTween에 대한 스터디를 진행할 예정이고 계속해서 업데이트해 나갈 예정이다.
이 글은 배운 내용 및 알아두고 있으면 좋은 점, 그리고 추후에 실제 개발에서 검색해서 사용할 수 있도록 남기는 기록 같은 역할을 하는 글이 있으면 좋을 것 같아서 남긴다.
이 글은 DOTween 함수를 쓰되 UVS를 위주로 구현한다. 스크립트 형식의 구현은 추후에 DOTWeen + Script 에서 다룰 예정이다.
DOTween?
원래 우리는 게임 오브젝트 컨트롤이나 UI의 변화에 대해서 Time.deltaTime과 Lerp 또는 애니메이터를 사용해서 게임 오브젝트 컨트롤 방식으로 제어를 했다. DOTween 좀 더 편리하게 오브젝트 컨트롤을 할 수 있도록 해준다. (성능 + 제작 효율에서 굉장히 유리하다. )
Tween : 오브젝트의 시간당 변화!
Tweening : 두 키 프레임 사이의 중간 상태를 자동으로 생성하여 부드러운 효과를 주는 것!
일단 먼저 UVS로 어떤 느낌으로 UI가 만들어지는지를 보고, 스크립트에 대한 공부를 진행할 예정이다. DOTween Pro를 기준으로 진행한다.
일단 프로젝트를 하나 만들고 패키지 매니저에서 DOTween을 불러온다.
DOTween을 import하면 DOTween Utility Panel이 이렇게 켜진다. 일단은 지금 쓰지 않을 것이기 때문에 꺼준다.
창을 다시 열고 싶으면 Tools > Demigiant에 있다.
일단 간단한 화면을 만들어보자. 원형 스프라이트를 생성하고 Border를 실제 사이즈의 절반씩으로 설정하면 모서리가 둥근 사각형을 만들어줄 수 있다.
Pixel Per Unit Multiplier를 조절해서 둥근 정도를 조절할 수 있다.
버튼 두 개를 추가해준다.
UVS
Unreal의 BluePrint와 굉장히 흡사해서 그렇게 어렵지는 않다! 간단한 UI 애니메이션 기능은 이걸로 해도 편할 듯하다.
버튼에 Script Machine 컴포넌트를 추가해준다. Script Machine은 Visual Script와 게임 오브젝트를 연결해준다.
- Graph : 스크립트 그래프를 별도 에셋으로 저장
- Embed : 그래프를 씬 안에 저장
embed로 설정하고 title을 입력하고 Edit Graph를 누르면 Script Graph 창이 뜬다.
버튼 이벤트 > 점수 표시 기능은 버튼, 점수, 별도의 관리 오브젝트에 붙일 수도 있지만 편의상 버튼에 해당 클릭 이벤트를 붙여보자.
아래와 같이 노드를 만들어준다.
하이러키 창에서 오브젝트를 끌어와서 target에 넣어 연결 시켜 줄 수 있다.
실행 후에 버튼을 누르면 1000이 입력된다.
Reset Button도 동일하게 작성해주었다.
잘 작동한다
애니메이션 추가
닷트윈의 DOCounter 함수를 이용하면 숫자를 쉽게 카운팅 할 수 있다.
DOTween의 여러 함수들은 DOTween 공식 문서에 있다.
https://dotween.demigiant.com/documentation.php
Visual Scripting에서 DOTween 함수를 쓰고 싶으면 Edit > Project Settings > Visual Scripting의 Node Library에 DOTWeen을 추가해준다.
Type Options > DOTWeen Module UI를 추가해준다.
이제 하단의 Regenerate Nodes를 클릭하면 Visual Scripting에서 DOTween 노드 사용이 가능하다.
DOTween의 다른 기능을 쓰고 싶다면 동일한 방식으로 더 많은 노드를 추가할 수 있다.
DO Counter
Do Counter > Add Thousands Separator : 1000 단위로 쉼표를 찍어줌
Culture : 지역과 언어를 설정하는 항목, 일단은 Null을 연결해서 사용한다.
숫자가 순차적으로 잘 올라간다!
From과 End Value와 Duration을 잘 설정만 하면 카운트다운도 손쉽게 구현 가능하다.
이제 점수를 쌓을 수 있는 형태로 수정해보자. 단순히 변수 하나만 만들어서 해당 값을 업데이트 해주면 된다.
BlackBoard에서 변수들을 선언하고 관리할 수 있다.
- Graph : 그래프 내에서 사용되는 변수
- Object : 하나의 게임 오브젝트에서 다른 컴포넌트들이 접근할 수 있는 변수
- Scene : 씬에 있는 다른 게임 오브젝트와 컴포넌트들이 접근할 수 있는 변수
- App : 프로젝트에 다른 씬에서 접근할 수 있는 변수
- Saved : 실행을 종료해도 저장해서 남는 변수
우리는 Scene 타입으로 curScore 변수를 만들어서 사용한다. 그리고 1000을 더해서 도달할 목표 점수 targetScore도 만들어놓자.
이제 점수가 계속해서 올라간다. Reset Button에서 Current Score를 초기화 시켜주는 노드를 추가해준다.
TextMesh Pro
DOTWeen Pro는 TextMesh Pro에서도 사용할 수 있다.
일단 DOTween Utility Panel을 켜준다.
Tools > Demigiant
Setup DOTween으로 가서 TextMesh Pro를 체크하고 Apply를 한다.
그 다음 아까 위에서 노드를 추가했던 과정처럼 Type Options > Shortcut Extenseion TMP TEXT를 해주면 TextMesh Pro UGUI용 DO Counter 노드를 생성할 수 있다.
