Sprite가 늘어나는 영역을 정해준다, Sprite Border

들어가며

UI를 만들다 보면 가끔 Sprite가 길쭉해져서 보기 이상해지는 경우가 있다.

이럴 때, 사용하기 좋은 기능이 있는데 바로 Sprtie Border이다.

 

한 줄 요약을 해보자면 스프라이트가 확장이 되지 않는 부분을 지정하는 기능이라고 보면 된다. 그게 전부이다.

그럼 바로 사용 방법을 알아보자.

---

사용법

100*100 사이즈의 UI 근데 뭔가 많이 이상하다.

위 이미지를 보면 뭔가 양 옆에서 눌러서 압축시킨 것 같이 이미지가 이상해졌다.

특히, 모서리 부분에서 많이 티가 나는데 이것을 Sprtie Border 기능을 이용해서 좀 더 깔끔하게 보이게 할 수 있다.

 

Sprite Editor 들어가기

일단 Sprite Border를 적용할 스프라이트를 찾아 누르고 인스펙터 창에서 Open Sprite Editor를 누른다. 그러면 한 창이 뜰 것이고, 그곳에서 Sprite Border를 적용할 수 있다.

---

Sprite Border를 쓰는 방법 2가지

Sptire Border를 쓰는 방법은 크게 두 가지가 있다고 보면 된다.

1. 직접 영역의 값을 입력한다.

2. 초록 점을 드래그하여 영역을 지정한다.

 

첫 번째 방법은 왼쪽에 표시된 곳에 직접 값을 입력하여 범위를 지정하는 것이다.

L (left)은 왼쪽, R (right)은 오른쪽, T (top)는 위, B (bottom)는 아래로 부터 얼마큼 떨어진 곳을 Border의 영역으로 지정할 것인지를 뜻한다.

 

두 번째 방법은 오른쪽 사진처럼 초록 네모를 드래그해서 영역을 지정하는 것으로 어렵지 않지만, 손으로 직접 하는 만큼 오차가 있을 수 있다.

 

---

Border 조절 후 처리

Border 범위를 적절히 조절한 모습

Border의 범위를 사진처럼 지정했다면, 전부 완료가 아니다.

 

바로 전부 적용이 된다면 좋겠지만, 무조건 그런 것은 또 아니더라. 하지만 매우 쉬우니 걱정 마라.

바로 Image Type을 Sliced로 변경하는 것이다.

 

적용하려는 이미지의 Image Type을 Sliced로 변경

Border를 적용한 스프라이트를 쓸 Image 컴포넌트를 찾고, 그 오브젝트의 Inspector 창에서 Image Type을 Sliiced로 변경해 주면 끝.

---

전후비교

 

왼쪽이 적용 전, 오른쪽이 적용 후이다.

사진을 보면 둘 다 100*100으로 사이즈는 똑같지만, 느낌이 완전히 다르다.

 

원본 이미지가 원래 직사각형이라, 두 오브젝트 모두 너비를 줄인 상태이다. 이 상태에서는 왼쪽 오브젝트(적용 전)는 찌그러진 느낌이 들고, 오른쪽(적용 후)은 뭔가 뚜렷한 느낌을 준다.

 

확실히 둘을 놓고 비교해 보면 오른쪽 UI가 Sprite Border를 사용하니 좀 더 테두리가 깔끔해진 것을 확인할 수 있다.