NGUI 3.x Tutorial Step3 - Sliced Sprite

 NGUI로 스프라이트를 추가해봤습니다. 이번에는 스프라이트 타입중에 하나인 Sliced를 가지고 윈도우 창 같은 것을 만들어보겠습니다.

 우선 간단히 Sliced가 뭔지 설명해보겠습니다. 일반적으로 버튼이나 단순한 백그라운드 이미지를 만든다고 했을 때 필요한 사이즈별로 만들 수 있습니다. 이렇게하면 필요한 수에 따른 디자인 작입이 필요합니다. 이와 반대로 하나의 이미지로 여러 사이즈에 대응하기 위한 방법이 Sliced인데요, 이번 포스팅에서 사용하는 아래 이미지를 보겠습니다.

 15 x 15로 작은 스프라이트 이미지입니다. 점선으로 구분이 되어져 있는데 총 9군데로 나눠져 있습니다. 그래서 9-Sliced라고도 부릅니다. 가운데를 제외한 나머지 테두리 부분들이 어떠한 사이즈던간에 각 테두리를 담당하게되고 가운데는 이미지의 가운데를 담당하게 됩니다. 가운데 부분이 사이즈별로 스케일링 되서 그려지는 거죠.

 장단점이 있겠죠. 적은 리소스로 여러 버튼이나 백그라운드를 커버할 수 있겠지만 역시나 커스텀 디자인된 버튼보다는 이쁘지 않다는게 있겠네요.

 이제 백그라운드 SlicedSprite를 만들어보겠습니다. NGUI - Create - Sprite를 하나 만드신 후 아래 그림과 같이 Atlas는 SciFi Atlas, Sprite는 Dark로 해주고 Sprite Type은 Sliced로 해줍니다. 사이즈 수정을 위해 Dimensions에 각 500으로 설정하고 제일 밑단으로 Depth를 설정하기 위해 -1로 해줍니다.

 이번에는 타이틀바 처럼 보이는 SlicedSprite를 만들어 보겠습니다. 백그라운드로 만들었던 것을 복제하시고 Sprite는 Light로 한 후 Transform Y값과 Color, Dimensions의 Y 값을 적당히 수정해줍니다.

 결과는 아래와 같습니다. 백그라운드를 보면 위에 Sliced를 설명할 때 사용한 이미지가 쭉쭉 늘어나서 표현된 것임을 알 수 있습니다.

 다음에는 역시나 스프라이트 타입중에 하나인 Tiled Sprite에 대해 정리해보겠습니다.

참고

NGUI Tutorial Step 3: 9-Sliced Sprite