오늘은 DoTween과 Visual Scripting(이하 UVS로 통일)을 활용하여
UI 연출을 해보도록 하겠습니다.
간단하게 버튼을 누르면 숫자 1000이 올라가는 코드와
다시 0으로 돌리는 코드를 작성해 봤습니다.
우클릭을 통해 On Button Click과 Set Text를 추가했습니다.
이때 주의할 점은 Text가 있고, TextMesh가 있고,
TextMeshPro가 있고, TextMeshProGUI가 있습니다.
Text는 Legacy의 Text고,
TextMeshProGUI가 TextMeshPro에서의 Text입니다.
DoTween의 무료 버전에서는 TextMeshPro를 지원하지 않기에
상황에 맞게 사용하면 됩니다.
UVS에서 Button을 사용하기 위해서는 Inspector창에도 Button 컴포넌트가 있어야 작동합니다.
동작 결과 :
이미지는 빙 크리에이터로 생성한 이미지를 사용했습니다.
이제 여기에 DoTween을 활용하여 애니메이션 효과를 주고자 합니다.
UVS 내에서 DoTween 기능을 가져와 사용하려면 먼저 몇 가지 설정을 해주어야 합니다.
Edit -> Project Setting -> Visual Script로 들어갑니다.
Type Options를 누르고 +를 눌러 다음의 내용을 추가했습니다.
마찬가지로 Node Library를 누르고 아래를 추가했습니다.
중요한 건 추가하고 나서 아래 Regenerate Nodes를 눌러주어야 합니다.
다른 외부 Tool들도 같은 방식으로 상황에 맞게 원하는 기능을 추가해서 사용하실 수 있습니다.
결과 :
DoCount를 사용하여 다음과 같이 숫자가 올라가는 듯한 효과를 만들 수 있었습니다.
간단하게 설명하자면
블랙보드에서 Scene을 누르고 다음과 같은 변수를 만들었습니다.
선언한 변수 CurrentScore를 가지고 와 1000을 더한값을
TargetScore에 저장한 다음 DoCounter를 통해 출력하도록 했습니다.
출력이 완료된 후 TargetScore에 저장된 값이
현재 값이 되도록 CurrentScore에 넣어주는 간단한 로직이었습니다.
참고한 내용
HJ님 유튜브 채널을 참고했습니다
https://www.youtube.com/watch?v=I3PjRioAf5w&t=176s
HJ 영상 더보기에 들어가면 예제 프로젝트도 다운받으실 수 있습니다.
따라 만들어보고 싶으신 분은 참고하시면 좋을 것 같습니다.
오늘은 이렇게 간단한 UI 연출을 다뤄보았습니다.
이전에 UVS에 대해 다룬 글도 있으니 봐주시면 감사하겠습니다. ㅎ
https://rootdev.tistory.com/17