Unity | 유니티/Unity 개발 일지

[Unity] Text에 타이핑 모션 넣기(DoTween)

maintain_H 2022. 12. 27. 16:37
반응형

전에 튜토리얼을 구현하기 위해 타이핑 모션 넣는 방법을 포스팅 했었다.

 

 

[Unity] Text에 타이핑 모션 넣기

개발 중인 게임을 만들던 중 튜토리얼을 만들 때가 됐다..! (귀찮..) 자고로 말풍선은 타이핑 효과가 들어가 있어야지 보는 맛이 있는 법..! 그래서 타이핑 모션 효과를 넣는 방법을 작성하려고 한

maintaining.tistory.com

나는 이미 다 구현하고.. 프로젝트에 추가했는데... 더 쉬운 방법이 있다는 것을 DOTween를 공부하면서 알았다..

아 제발.. 유니티.. 눈치 챙겨. .알아서 먼저 알려줘야지..

그래서 알아낸 DOTween을 이용한 Text를 이용한 타이핑 모션 넣기를 다시 포스팅 하려고 한다.

 

1. DOTween이란?

- DOTween is a fastefficientfully type-safe object-oriented animation engine for Unity, optimized for C# users, free and open-source, with tons of advanced features

 

DOTween 홈페이지에 나와있는 설명이다.

유니티에서 Tween을 표현할 때 사용하는 에셋이다.

Tweening이란 오브젝트의 시간당 변화를 의미하는데, 다양한 연출을 표현할 때 사용하는 것이다.

DOTween은 무료로 제공되고 있으며, 간편하게 다양한 연출을 구현할 수 있다.

 

 

- 여기서는 DOTween에서 타이핑 효과를 내는 것만 포스팅 하고 다른 기능은 다음에 다시 포스팅 하려고 한다.

 

 

[DOTween 설치]

 

DOTween을 사용하기 위해서는 일단 설치해야 한다.

http://dotween.demigiant.com/index.php

 

DOTween (HOTween v2)

DOTween is a fast, efficient, fully type-safe object-oriented animation engine for Unity, optimized for C# users, free and open-source, with tons of advanced features It is also the evolution of HOTween, my previous Unity tween engine. Compared to it, DOTw

dotween.demigiant.com

DOTween 홈페이지에 가면 무료로 설치할 수 있다.

 

 

DOTween.zip

다운 받은 DOTween.zip 압축파일을 프로젝트의 Assets 파일 안에 압축을 풀어준다.

전에 만들었던 Tutorial 프로젝트에서 사용할 거라서 Tutorial 안에 Assets 폴더에 넣었다.

 

2.  타이핑 모션 구현

 

[네임스페이스 추가]

 

그리고 사용할 스크립트로 돌아와 네임스페이스를 추가한다.

이제 DOTween을 사용할 준비가 다 됐다!

 

 

[DOText 사용]

 

타이핑 효과를 내기 위해 DOTween의 DOText를 사용할 생각이다.

DOText(string str, float time)으로 작성하면 된다.time은 문자열이 전부 입력되는데 걸리는 시간이라고 보면 된다. 예를 들어 3f를 넣으면, str이 3초에 걸려서 모든 문자가 출력된다.

DOTween의 더 많은 기능은 [이곳]에서 확인할 수 있다.

 

[주의사항]

내가 만드는 게임에서는 DOTween 유료 버전을 이용해서 몰랐는데, 이 글을 포스팅 하면서 알았다..!

DOTween 무료 버전은 TextMeshPro를 지원 안 하고, 기본 Text만 지원한다.

그래서 전에 만들었던 Tutorial 프로젝트에서 몇 가지 수정해준다.

 

[2023.01.09 수정]

TextMeshPro를 사용하는 방법을 밑에 추가하였다.

 

 

[새로운 Text 생성]

 

파란색 형광펜은 전에 만든 TextMeshPro이고, 분홍색은 새로 만든 UI Text이다.

 

TextMeshPro는 비활성화 해준 뒤, 다시 설정하기 귀찮으니까

TextMeshPro, Rect Transform의 Component Values를 복사하고,

UI Text Rect Transform에 Component Values를 붙여넣기 해준다.

 

 

[스크립트 작성(수정)]

 

Text를 추가해준다.

 

Typing 안에 필요없는 부분을 다 지우고

이렇게 두 줄을 추가해준다.

 

 

[오브젝트 추가]

 

Text를 드래그 앤 드롭해주면 끝!

 

 

[실행 결과]

 

 

잘 작동하는 것을 볼 수 있다!

DOTween을 추가하는 것까지 해서 총 4줄이면 되는 것을 나는.. ㅎㅎ..

심지어 알아서 줄바꿈도 해준다..! 모두 DOTween 쓰세요.

 

 

[전체 코드]

 

 

 

2023.01.09 추가

[TextMeshPro를 이용한 타이핑 모션] 

 전에 DOTween 프로버전을 사용하지 않으면 TextMeshPro를 사용할 수 없다고 했었다.

람다를 이용하면 DOTween Pro버전을 사용하지 않아도 TextMeshPro를 이용해 타이핑 모션을 구현할 수 있다는 것을 알았다.

 

TMPDOText라는 함수를 하나 만들어 준다.

TextMeshProUGUI와 float을 매개변수로 받는다.

duration은 대사가 출력되는데 걸리는 시간이다.

 

그리고 TextMeshProUGUI, text2를 선언해주고,

전에 작성한 Typing함수에 방금 작성한 TMPDOText 함수를 추가해주면 끝!!

반응형