유니티에서 9 slice sprites 사용하기

유니티에서 9 slice sprites 사용하기

9-slicing Sprites를 사용하여 한개의 이미지 텍스쳐를 다양한 사이즈의 재사용 가능한 이미지로 설정하는것이 가능하다. sprite 이미지를 리사이징할때 텍스쳐를 왜곡하지않아 특히 2D 환경에서 벽, 바닥의 패턴 텍스쳐 및 UI를 생성할때 사용할수있다. 아래 유니티 웹문서에서 자세한 활용법과 옵션을 확인할수있다.

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

위 이미지는 9 slice sprites에 의해 정의된 9개의 영역이다. 이미지의 scale를 변화시킬때

A,C,G,I의 네 영역은 사이즈의 변화가없다.

B,H영역은 좌우로 늘어나거나 타일링된다.

D,F영역은 상하로 늘어나거나 타일링된다.

E영역은 좌우상하로 늘어나거나 타일링된다.

아래 예는 아주 단순한 기본 사용법으로 1개의 텍스쳐로 비율이 다른 UI메뉴 이미지를 구성할수있음을 확인할수있다. 

1)캔버스에 정비율의 텍스쳐를 생성하였다.

2)동일한 디자인의 가로로 긴 UI 이미지를 생성하기 위해서 이미지를 좌우상하로 scale 수치를 높일 경우 코너 부분에서 텍스쳐가 늘어나는것을 확인할수있다.

3)이 경우 9 slice sprites를 사용할수있다. 텍스쳐의 import settings에서 텍스쳐 타입으로 sprite를 선택하고 mesh type으로 full rect를 선택한 후에 sprite editor를 클릭한다.

4)녹색라인을 클릭, 드래그해서 다음과 같이 9개의 영역을 설정한다.

5)텍스쳐를 확대해서 텍스쳐가 늘어나면 문제가 생기는 네 영역의 경계를 아래와 같이 설정하였다. apply를 클릭해서 적용한다.

6)sprite renderer의 draw mode는 sliced 또는 tiled를 선택한다. 기본설정인 simple는 9slice sprites를 반영하지않는다.

이미지를 리사이징할때 코너에 위치한 4개의 영역은 왜곡되지않으며 나머지 영역은 늘어나거나(sliced) 타일링된다(tiled) 

예에서는 타일링이 불필요함으로 sliced를 선택하였다.

7)scale수치를 높여도 코너의 4개 영역 그리고 좌우로 늘어나도 문제없는 B,H영역에서 이미지를 왜곡하지않는것을 확인할수있다.