본문 바로가기

내일배움캠프/[P9-Team.] BloodyHell Marathon

[TIL 24.06.19] Unity에서 TMP 글씨 곡선으로 그려주기

.

목   차

     


    Tmp_Text 곡선 만들기

      미리 받아온 에셋의 배너가 곡선 모양이라 제목이 일자면 안맞을 것이라는 생각이 들었다. 그래서 제목에 곡률을 주고 싶어졌다. 하지만 글자 하나하나 직접 기울여가며 그리기에는 품격이 없고 (=귀찮고) 나중에 제목 위치를 바꾸거나 크기를 바꿀 때마다 엄청난 불편함을 겪을 것이다. 따라서 스크립트를 통해 글씨를 구부려주기로 했다.

     

     우선, Animation Curve를 통해 내가 원하는 곡선의 모양을 그려주었다. Inspector창으로는 내가 원하는 tangent값을 숫자로 입력하는 법을 찾지 못해서 결국 스크립트로 작성했다.

    우선, 시작점 / 꼭짓점 /  끝점의 KeyFrame 변수를 각각 선언 및 인스턴스 할당해주었다. 

     Keyframe key1 = new Keyframe(0, 0, 0, 18);
     Keyframe key2 = new Keyframe(0.5f, 5, 0, 0);
     Keyframe key3 = new Keyframe(1, 0, -18, 0);

    여기서 첫 번째 값은 x좌표(time), 두 번째 값은 y좌표(value), 세번째 값은 점의 왼쪽 기울기(InTangent), 마지막 값은 점의 오른쪽 기울기(OutTangent)이다. 내가 만들 곡선은 2차원 음의 곡선과 비슷한 모양이길 바랬기에 최소한 좌우는 대칭이어야 해서 (key1의 outTangent) = -(key3의 inTangent)일 것이다. 상세 수치는 플레이 버튼을 눌러 자연스러워질 때까지 수치를 변경했다. (사실 처음에는 직접 그래프를 그리려 했으나 수학 계산에 실패했다...)

     

    이러저러해서 세 개의 KeyFrame을 모두 만든 후 curve에 키를 추가해서 곡선은 완성했다. 이제 텍스트를 이 곡선의 모양에 맞게 휘어줄 시간이다.