기능 자체는 알고 있었지만 놓치기 쉬운 내용을 기록해놓고자 한다.
1. 9-Slicing Sprite
9-Slicing Sprite는 유니티에서 제공하는 기능 중 하나로, 스프라이트 에셋의 비율을 유지하면서 재사용할 수 있게 도와주는 기능이다. 특히 UI 등에서 해당 기능을 많이 사용하게 된다.
이전에 진행했던 개인 프로젝트에서도 스프라이트를 직접 만들고, 9-Slicing을 이용해 에셋 재활용을 한 적이 있었다.
기능 자체의 의미와 활용 방법에 대해서 알고 있었지만, 실제 현업에서 아트에게 에셋을 전달받고 직접 작업하는 것에서 생각보다 활용이 미숙했다는 걸 알게 되었다. 9-Slicing으로 자르는 방법과 이유는 아는데, '어떻게 자르는지'에 대해서는 현업에서 배우는 점이 제법 있었다.
- 왠만한 경우에서는 그냥 세로로만 잘라도 충분
좌우 대칭인 경우에서는 그냥 주어진 길이에서 /2만 진행해서 세로만 잘라도 충분하다.
- 좌우 대칭이 아닌 경우/상하 대칭이 아닌 경우
예를 들어 이렇게 생긴 UI가 있을 경우 이렇게 잘라주면 된다.
특히, 패널의 제목칸에 무늬가 있을 경우 이런 느낌으로 잘라주면 된다.
또 다른 예시로 좌우 대칭이 아닌 경우 이와 같이 잘라주면 된다.
실제로 예전 개인 프로젝트를 진행했을 당시에는 저런 식의 UI를 어떻게 자를지 방법이 생각나지 않아서, 무조건 좌우 상하 대칭으로만 UI를 만들었었다. 하지만 이런 방식으로 만들면 원하는 대로 에셋을 재활용할 수 있다.
2. Slider와 9-Slice를 활용하여 게이지 이미지 유연화
이전 게이지 틀이나 게이지 Fill 부분 에셋을 보면, 뭔가 더 예쁘고 퀄리티 있게 만들고 싶었지만 제대로 활용하지 못했다는 느낌이 있었다. 특히 Fill 부분에서 그라데이션 같은 걸 넣어보고 싶었지만 제대로 하지 못했던 점을 기억했다.
이유는 Image 타입에서 Sliced와 Filled를 같이 사용할 수 없기 때문이다. 하지만 이 문제의 해결 방법은 사실 정말 쉽고 간단했다.
Fill 이미지는 Sliced로 쓰고, 그냥 슬라이더로 만든 다음 Fill Rect를 연결해주면 된다. 그리고 게이지 조절 부분을 Slider의 Value로 조절하면 된다. 물론 이렇게 하는 경우에 원형 게이지 같은 변형 게이지는 적용하기가 어려운 부분이고, 따로 방법을 연구해야 할 수도 있다.
3. Content Size Fitter와 폰트 조절
예를 들어 수치 전후 변화를 표기한다든지의 상황에서 폰트 크기 변화에 따라 다음과 같이 만들 수 있다.
- 텍스트 및 이미지 그룹을 구성하고, Horizontal Layout Group를 설정
- 각 텍스트에 Content Size Fitter를 적용하고, Horizontal Fit를 Preferred Size로 설정
이와 같이 하여, 수치 변경에 따라서도 텍스트 형식이 유지할 수 있도록 한다.
