[Unity2D] 텍스트 길이에 맞게 사이즈 자동 조절되는 이미지

텍스트 길이에 맞게 사이즈가 자동으로 조절되는 UI 이미지를 만들어 보자.

 

짧은 텍스트

 

긴 텍스트

 

dialog box.png

0.00MB

대화 상자 이미지를 임포트한다.

 

 

대화상자 이미지 인스펙터 창에서 아래와 같이 변경하고 Apply를 클릭한다.

• Sprite Mode - Single
• Mesh Type - Full Rect
• Filter Mode - Point (no filter)
• Compression - None

 

 

Sprite Editor에서 적당히 Border를 설정한다.

 

UI - Image를 생성하고 그 하위에 UI - Text - TextMeshPro를 생성한다.

 

 

Text 오브젝트는 아래와 같이 설정한다.

• Font Asset - 필요하다면 Window - TextMeshPro - Font Asset Creator에서 폰트를 생성해 지정한다.
• Alignment - Center, Middle 설정

 

 

 

Image 오브젝트는 아래와 같이 설정한다.

• Source Image - 위에서 설정한 대화 상자 이미지를 지정한다.
• Image Type - Sliced

Vertical Layout Group 컴포넌트 추가

• Padding - 이미지와 텍스트에 맞게 적당히 설정한다.
• Child Alignment - Middle Center
• Control Child Size - Width, Height 체크 (Height는 꼭 하지 않아도 된다)

Content Size Fitter 추가

• Horizontal Fit - Preferred Size

 

이제 텍스트를 변경해 보자.

 

변경된 텍스트 길이에 맞게 이미지 사이즈가 자동으로 조절된다.