[Unity 기능] 9-Slicing Sprite 제작

📌 개요

 

 

게임을 개발하다보면 하나의 UI을 늘리거나 줄여서 재활용하고 싶은 경우가 있습니다.

 

하지만 늘리거나 줄이면 위처럼 텍스처가 깨지기 마련입니다.

 

그래서 각 비율에 맞는 UI을 새로 제작하여 추가하는 방법을 사용합니다.

 

 

 

 

하지만 이 방법을 사용하면 다음과 같은 문제가 발생합니다.

• 비율에 따라 새로운 리소스를 제작하기 때문에 인건 비용 추가 발생
• 새로운 리소스로 인한 용량 비용 증가
• 다른 비율에 대한 확장성 제한

 

 

흐음... 하나의 UI 텍스처로 다른 비율의 UI을 마구마구 뽑아낼 순 없는걸까요?

 

 

 

 

하지만 우리 킹갓제너럴 유니티는 이미 해결책을 보유하고 있었다는 것!

 

바로 '9 슬라이싱 스프라이트' 입니다!!

 

 

 

---

📌 9-Slicing Sprite 란?

 

 

9-Slicing Sprite : 다양한 크기의 이미지를 재사용할 수 있게 해주는 슬라이싱 기법

 

하나의 이미지를 9개의 영역으로 나눕니다.

 

이때, 확장 또는 축소시 각 영역은 다음과 같이 작동합니다.

• A, C, G, I 영역 : 크기가 변하지 않음
• B, H 영역 : 수평에 대해서만 크기 변경
• D, F 영역 : 수직에 대해서만 크기 변경
• E 영역 : 수평과 수직에 대해서 크기 변경

그렇다면 유니티로 어떻게 구현할 수 있을까요?

 

 

 

---

📌 9-Slicing Sprite 구현 방법

 

 

Texture Type은 [ Sprite (2D and UI) ] 으로 설정합니다.

 

① Sprite Mode을 Single로 설정합니다.

② Mesh Type을 Full Rect로 설정합니다.

③ Filter Mode을 Point (no filter)로 설정합니다.

④ Compression을 None으로 설정합니다.

⑤ [ Apply ] 버튼을 눌러 적용합니다.

⑥ [ Open Sprite Editor ] 을 클릭하여 스프라이트 에디터를 엽니다.

 

 

 

 

스프라이트 에디터를 열었다면 다음 작업을 수행합니다.

 

① 9개의 영역을 나눠줍니다. (텍스처에 따라 어떻게 나눌지 판단)

② 영역 나누기를 완료했다면 [ Apply ] 을 눌러서 저장합니다.

 

이러면 텍스처 설정은 완료입니다!

 

 

 

이제 9-Slicing Sprite을 설정해보도록 하겠습니다.

 

Image Type을 [ Sliced ] 으로 설정해줍니다.

 

이제 결과를 확인해볼까요?

 

 

 

 

 

(화질구지지만...) 잘 적용되었군요!

 

아, 그리고 9-Slicing Sprite으로 타일링(Tiling)도 가능한데요!

 

이부분은 아래 유니티 메뉴얼을 참고하시면 됩니다.

 

https://docs.unity3d.com/kr/2020.3/Manual/9SliceSprites.html

9슬라이싱 스프라이트 - Unity 매뉴얼