[Unity UGUI] 9patch (나인 패치)

요즘 옛날 프로젝트 뜯어고치면서 최적화..라기보다는

"와 무슨 생각으로 이렇게 짰지?"를 고치고 있는데... 리소스를 들여다보니 문득.

이걸 써야겠다!! 싶어서. 겸사겸사 기록도 합니다.

 

이거 그런데 ... 정식 이름은 9슬라이싱(9-slicing) 스프라이트 ... 이거인가보네요

---

나인패치

자세한 정의는 제껴두고 ... (유니티 매뉴얼에서 엄청 잘 설명하고 있습니다)

제가 이번에 나인패치로 고쳐볼 것은 이런 사례입니다.

지금 뜯어고치고 있는 게임의 랭킹 UI입니다. 글자는 RANKING을 제외하곤 텍스트로 처리하고 있습니다.

이렇게 하면 저 가운데 검은 부분만큼 이미지 크기도 커지고, 그만큼 이미지가 차지하는 용량도 크겠죠.

 

바로 이럴때!

이렇게 같은 패턴(여백이든 아니든간에)이 반복되는 영역이 클 경우, 나인패치를 쓰면 유리합니다.

 

예시를 또 들자면, 이런 경우도 있겠죠. 아주 대표적인 예시.

체스판, 체크무늬입니다. 여기엔 검은 테두리도 1픽셀 정도 있네요.

이것도 단순히 검은색 흰색이 2×2 교차로 반복되고 있으므로, 네 칸을 계속 연장해주면 되는 것인데...

나인패치를 쓰지 않으면 쓸 만큼의 크기로 된 체크 무늬가 필요하겠지만,

나인패치를 쓰면 네 칸과 검은 테두리만 남겨두면 된다는 사실...

 

이거 이미지.. 저장 되나? 되면 ... 위 체스판과 아래 편집한 체스판으로 직접 한 번 해 보세요.

---

1. 이미지 패턴 부분을 줄이기

우선 패턴 부분을 어느정도만 남겨두고 전부 제거해서, 이미지를 확 줄여줍시다.

저는 각각 이렇게 줄였습니다. 더 줄여도 되긴 하지만... 대충.

이렇게 했을때 랭킹 이미지는 당장 용량이 약 두 배로 줄었습니다. (와!)

그런데 유니티에 가보면 이 꼴이 나 있습니다.

당연합니다. 이미지가 바뀌었으니까요.

우리는 이 이미지가 원래의 모습을 찾을 수 있도록 몇 가지 해 줘야 할 게 있습니다.

---

2. 스프라이트 에디터에서 이미지 조정

먼저 프로젝트에서 해당 스프라이트를 찾아서,

인스펙터에 표시되는 Sprite Editor를 눌러 켭니다.

그러면 이렇게 각 모서리에 형광 녹색으로 된 네모난 점이 보이는데요, 이걸 잡아 끌어 움직일 수 있습니다.

이 선을 움직여서 "늘려줄 예정인 패턴"에 영역을 맞춰 주시면 됩니다.

 

그런데 여기서 주의할 점!

제가 쓰는 이미지처럼 테두리가 두 줄이거나, 글씨가 있으신 분들은

아무리 패턴이 그냥 검은색이라 하더라도 글자 사이나 테두리 사이에 영역을 두면 안 됩니다.

 

나인패치에서 각 구역을 위 왼쪽에서부터 순서대로 ABC…라고 본다면,

이미지 적용 영역이 가로로 길어질때엔 B와 H구역이 늘어나고,

세로로 길어질 때엔 D와 F 영역이 늘어나는 식입니다.

그러니까 이렇게 글자 사이에 E영역(가장 중요함)을 잡아버리면... B 영역이 쫘악 늘어나면서

저 뒤에 있는 이미지처럼 글자 K와 I 사이가 쫘아악 벌어지게 됩니다.

올바른 예시는 이쯤하면 되겠군요.

체스판 무늬도 테두리만 남겨주고 잘라냅니다.

---

3. UI 이미지 속성 변경 - Sliced

물론 이것만 했다고 바로 냅다 뿅 하고 바뀌진 않습니다.

마지막으로 이미지 컴포넌트에서 이미지의 속성을 변경해줘야 합니다.

이미지 컴포넌트에서 Image Type를 Sliced로 변경해봅시다.

그럼 와! 바로 올바르게 변경된 것을 볼 수 있습니다.

나인패치 적용 전 (왼쪽), 적용 후 (오른쪽)

---

4. UI 이미지 속성 변경 - Tiled

그러나 체크무늬는 고작 Sliced를 해준다고 변하지 않습니다. 테두리 폭만 좁아진 것 같이 보이네요.

Simple일 때 (왼쪽), Sliced일 때 (오른쪽)

이는 슬라이스의 원리..?에 있는데, 슬라이스는 위에서 말했던것처럼 설정된 영역을 늘립니다.

잡아 늘린다는 쪽에 가깝습니다. 쫘아아악 잡아 늘리는 셈이죠.

그러니 체스판 무늬가 연속으로 배치되는 이상적인 모양이 아니라 잡아늘려진 이미지로 보이는 것도 당연합니다.

 

이럴 때에는 Tiled를 씁니다.

이건 잡아 늘려지는 게 아니라, 설정된 영역을 반복해서 배치합니다. 이렇게요!

이상적인 모습. 테두리도 제대로 보입니다.

이렇게 원하는 이미지 패턴을 생각하고 적당한 타입으로 설정해주시면 됩니다.

---

번외. Fill Center

이 속성은 기본적으로 True에 되어있는데요. 체크박스에서 체크를 해제하면

연장된 모든 부분이 뻥 뚫립니다. 테두리만 남는 셈이죠.

테두리만 남기고 싶을때에 유용하지만, 그러려면 적어도 UI를 제작할 때 글자는 따로 떼어야 하겠습니다.

---

 

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