[Unity] UGUI로 말풍선 만들기

1. 말풍선 이미지 준비

말풍선을 만들기 위해 준비한 이미지를 Sprite Editor로 수정해 주어야 한다.

초록 라인으로 말풍선이 커졌을 때 늘어날 부분을 잡아준다. 안드로이드의 나인패치와 같은 원리이다.

이미지 컴포넌트에 스프라이트를 적용한 뒤 타입을 Slice로 설정해준다. 이 옵션은 이미지의 크기가 변화했을 때, 스프라이트 에디터에서 지정해 준 범위를 쭉 늘려서 크기를 맞추게 된다.

이미지에 패턴이 존재하는 경우 Tiled로 설정해준다. 이 옵션은 스프라이트 에디터에서 지정해 준 범위를 반복해서 그려주게 된다.

2. 레이아웃 잡기

이미지 하단에 텍스트 컴포넌트를 배치해주고 크기를 적당히 잡아준다.

이미지 오브젝트에는 Layout Group과 Content Size Fitter 컴포넌트를 달아준다.

텍스트의 위치는 직접 잡아주는 것이 아니라 Layout Group의 패딩값으로 해주어야 한다.

텍스트의 크기에 맞춰서 말풍선을 늘리기 위해서 Content Size Fitter도 달아준다.

Layout Group의 Child Control Size도 체크를 해 주어야 동작한다. 유니티 구 버전에서 이 옵션이 없을 경우 텍스트 오브젝트에 Content Size Fitter를 달아주면 동작한다. 이 옵션이 있을 경우에는 체크하고 텍스트 오브젝트를 비워두는 것이 더 자연스럽게 동작했다.

마지막으로 말풍선이 늘어날 때 어느 부분을 기준으로 늘어날 건지 지정해 준다.

이미지는 왼쪽 아래를 기준으로 지정했다. 이렇게 정할 경우 말풍선 안의 텍스트가 늘어날 경우 오른쪽과 위쪽 방향으로 늘어난다.

완성