2.1 NGUI UISprite(스프라이트)
2. NGUI 위젯
1장에서 NGUI의 UI 시스템을 생성하고, 기본이 되는 컴포넌트들에 대해서 알아보았습니다.
2장에서는 NGUI의 주요 UI 위젯의 생성 방법 및 각 위젯들의 특성을 살펴보도록 하겠습니다.
2.1 UISprite (스프라이트)
먼저 NGUI의 기본 UI 위젯 중 하나인 스프라이트를 생성해 보겠습니다.
NGUI는 손쉬운 위젯 생성을 위해서 주로 사용되는 위젯들의 템플릿이 구성되어 있는 위젯 마법사를 제공합니다. 이를 이용해서 스프라이트 / 레이블 / 버튼 등의 UI 위젯을 쉽게 생성할 수 있습니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 선택합니다.
아래 그림과 같이 Widget Tool 창이 뜨는 데
이 툴을 이용해서 스프라이트 등 UI 위젯을 생성할 수 있습니다.
그런데 지금은 Atlas 와 Font 항목이 None인 상태이기 때문에, 각 항목을 설정해야 UI위젯을 생성할 수 있습니다.
Atlas는 스프라이트 등에 사용될 여러 이미지들을 하나의 큰 이미지로 합친 이미지입니다.
Font는 NGUI 레이블 등에서 사용되는, 화면에 글자를 표시할 때 사용되는 Font입니다.
| NGUI에서는 유니티의 다이나믹 폰트와 Bitmap 폰트를 모두 지원 합니다. 하지만 유니티의 다이나믹 폰트의 경우 특정 안드로이드 기기에서 문제가 발생하는 부분이 있어 Bitmap 폰트가 주로 사용됩니다. |
프로젝트 뷰에서 Assets -> NGUI -> Examples -> Atlases -> SciFi 폴더로 이동합니다.
SciFi Atlas.prefab 을 Widget Tool의 Atlas 항목으로 드래그, SciFi Font – Normal 폰트를 Font 항목으로 드래그 합니다.
이렇게 두 항목을 대입해주면 스프라이트 등 UI 위젯을 생성할 준비가 끝이 났습니다.
준비가 되었으니 스프라이트를 생성해 보겠습니다.
아래 그림과 같이 Template 항목은 Sprite를 선택하고, Sprite 항목은 Dark 를 선택해 줍니다.
그리고 Add To 버튼을 클릭하면 스프라이트 생성이 됩니다.
그러면 하이어라키 뷰의 UIRoot 게임 오브젝트 밑에 Sprite 게임 오브젝트가 추가된 것을 확인할 수 있습니다.
지금 생성한 스프라이트 크기가 작기 때문에 크기를 200 x 200으로 크게 해보겠습니다.
Sprite 게임 오브젝트를 클릭한 상태에서 인스펙터 뷰에서 UISprite 컴포넌트의 Size 항목을 보면,
아래 그림과 같이 넓이와 높이 값을 설정할 수 있는 항목이 있습니다.
넓이 / 높이 항목에 각각 200 / 200을 입력합니다.
이제 씬 뷰 / 게임 뷰를 확인 해 보면 생성된 스프라이트를 확인할 수 있습니다.
NGUI에서 스프라이트, 레이블등은 위젯이라고 불립니다. 또한 모든 위젯은 공통 파라미터를 갖습니다.
스프라이트의 각 파라미터 내용을 살펴보기 전에 위젯의 공통 파라미터들부터 살펴 보도록 하겠습니다.
각 파라미터의 특성은 아래 표와 같습니다.
| 파라미터 | 설명 |
| Pivot | 스프라이트의 피봇을 설정하는 데 사용합니다. |
| Depth | 스프라이트를 다른 위젯 앞 또는 뒤에 위치 시키는 순서를 정하는 데 사용합니다. Depth 값이 클수로 앞에 위치하게 됩니다. Forward / Back 버튼을 이용해서 값을 조절하거나, Depth 값을 직접 입력할 수 있습니다. |
| Size | 위젯의 크기를 설정합니다. 가로 / 세로 값을 설정할 수 있습니다. Snap 버튼을 누르면 스프라이트 크기를 원래 크기로 되돌리는 Make-Pixel-Perfect 기능을합니다. |
| Aspect | 위젯의 가로 / 세로 비율을 지정할 수 있습니다. Free로 설정하면 비율을 지정하지 않고, Based on Width 는 위젯의 넓이 값을 기준으로 Based On Height 는 위젯의 높이 값을 기준으로, 설정한 비율을 유지하도록 가로 / 세로 값을 변경합니다. |
스프라이트 생성하는 방법 및 위젯의 공통 파라미터에 대해서 살펴 보았습니다.
이번엔 스프라이트의 각 파라미터에 대해서 살펴 보겠습니다.
| 파라미터 | 설명 |
| Atlas | 스프라이트가 생성될 때 사용할 Atlas를 설정하는 데 사용합니다. |
| Sprite | 설정된 Atlas에서 실제 사용할 이미지를 설정합니다. |
| Type | 스프라이트 타입을 설정할 때 사용합니다. 스프라이트 종류는 총 5가지가 있습니다. (Simple / Sliced / Tiled / Filled / Advanced 타입을 지원합니다.) |
| Flip | 스프라이트를 좌우 또는 상하 등으로 반전을 시키려는 경우에 사용합니다. (Horizontal / Vertical / Both 모드를 지원합니다.) |
| Color Tint | 알파 값이 포함된 스프라이트 (위젯)의 색상을 지정할 때 사용합니다. |
위에서 설명한 파라미터들 중 처음 두 파라미터는 스프라이트를 생성할 때 Widget Tool에서 설정한 Altas와 Sprite와 동일한 항목입니다.
NGUI 스프라이트의 Type항목을 눌러보면 4가지 메뉴가 나타납니다.
NGUI는 이 메뉴에서 확인할 수 있듯이 4가지 타입을 지원합니다.
(Advanced 타입은 Invisible / Sliced / Tiled 타입을 조합해서 사용할 수 있도록 제공하는 스프라이트 종류 입니다.)
각 스프라이트 타입의 특성에 대해서 살펴보겠습니다.
Simple Sprite
첫 번째 항목인 Simple 스프라이트는 위에서 이미 생성해 본 스프라이트 타입입니다.
Simple 스프라이트는 NGUI 스프라이트의 가장 기본이 되는 스프라이트 타입으로, 스프라이트에 사용된 이미지의 원본 크기 그대로 사용하는 경우에 주로 사용합니다.
따라서 원본 크기와 다르게 설정해야 하는 경우, 예를 들어 크기를 늘려야 하는 경우에는 원본 이미지의 해상도가 깨지는 경우가 발생할 수 있습니다.
Sliced Sprite
Sliced 스프라이트는 텍스쳐를 격자 무늬로 9등분해서 외곽의 형태를 유지하면서 크기를 조절할 수 있도록 구현된 스프라이트 입니다. 크기를 조절해도 해상도가 깨지지 않고 깨끗한 모습을 유지하는 특징이 있습니다.
Sliced 스프라이트는 아래 그림과 같이 이미지의 외곽 부분과 가운데 부분을 나눠서 설정하도록 되어 있습니다. 설정 값에 따라서 원본 이미지가 늘어나야 하는 경우 외곽 이미지의 크기는 늘리지 않고 가운데 부분만 늘리는 방식으로 이미지가 깨지지 않고 유지될 수 있도록 합니다.
앞서 생성한 스프라이트와 같은 종류의 스프라이트를 생성하고 Simple 과 Sliced 스프라이트의 차이를 보도록 하겠습니다.
위의 그림에서 볼 수 있듯이 Simple 스프라이트의 경우 크기가 커진 경우에 텍스쳐의 외곽 부분도 같이 크기가 커지면서 이미지가 깨진 듯한 모습을 볼 수 있습니다.
반면에 Sliced 스프라이트는 외곽 부분이 원래의 모습을 유지한 채 크기가 커지기 때문에 이미지가 깨지지 않고 원래 모습을 유지한 것을 확인할 수 있습니다.
따라서 제작한 원본 이미지의 크기보다 크게해서 스프라이트를 사용해야 할 경우에 Sliced 스프라이트를 사용합니다.
Tiled Sprite
Tiled 스프라이트는 반복되는 패턴을 만들 때 사용하는 스프라이트 종류입니다 하나의 텍스쳐를 타일링해서 화면에 표현할 때 사용합니다.
직접 생성해서 확인해 보도록 하겠습니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 클릭합니다.
Widget Tool 창이 뜨면 아래 그림과 같이 Template 은 Sprite로 Sprite 항목은 Honeycomb으로 설정하고 AddTo 버튼을 이용해서 스프라이트를 생성합니다.
스프라이트가 생성되면 하이어라키 뷰에서 생성된 스프라이트를 클릭하고 인스펙터 뷰의 Sprite Type을 Tiled로 설정합니다.
이제 씬 뷰에서 Sprite를 클릭한 상태에서 모서리 부분에 마우스를 클릭하고 크기를 늘려보면, 아래와 같이 텍스쳐 크기가 커지지않고 타일의 크기가 유지되면서 전체 스프라이트 크기가 커지는 것을 확인할 수 있습니다.
위의 그림에서 확인할 수 있듯이, 일정한 패턴을 반복시켜서 스프라이트를 표현하려고 할 때 Tiled 타입을 사용합니다.
Filled Sprite
Filled 스프라이트는 전체 스프라이트에서 일부만 그리거나, HP 게이지 등 스프라이트의 일부만 그리거나 전체를 조절해 가면서 스프라이트를 표현해야 할 때 유용하게 사용할 수 있는 스프라이트 종류입니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 클릭하고 스프라이트를 생성해 보겠습니다.
Widget Tool 창이 뜨면 아래 그림과 같이 Template 항목은 Sprite로 설정하고, Sprite 항목은 NGUI로 설정한 뒤에 AddTo 버튼을 이용해서 스프라이트를 생성합니다.
이번에는 Sprite 항목을 NGUI로 설정해서 NGUI 마크가 화면에 나타나도록 했습니다.
생성된 스프라이트를 하이어라키 뷰에서 클릭한 상태에서 Sprite Type을 Filled로 변경합니다.
이렇게 설정을 해준 뒤에 원래 모습을 확인해보고 일부만 그렸을 때의 모습도 확인을 해보겠습니다
현재는 아무 변화가 없이 이미지의 전체가 화면에 보이는 상태입니다. 값을 조절해서 이미지의 일부만 나타나도록 수정해 보겠습니다.
UISprite 컴포넌트의 Fill Amout 값을 0.4정도로 조절한 후에 결과를 확인해 보겠습니다.
Fill Amount를 0.4로 설정하면 아래 그림에서 확인할 수 있듯이 0.4 즉 전체의 40%만 화면에 그려진 것을 확인할 수 있습니다.
Filled 스프라이트는 또한 화면에 스프라이트를 그리는 방향을 변경할 수 있습니다.
Filled 스프라이트는 총 5가지의 방향을 지원 합니다. (Horizontal / Vertical / Radial 90 / Radial 180 / Radial 360)
정리
NGUI UI 위젯 중 처음으로 스프라이트에 대해서 알아 보았습니다.
NGUI 스프라이트는 총 4가지 타입을 지원하고, 각 스프라이트는 대체로 아래와 같은 상황에 따라서 활용됩니다.
| 스프라이트 타입 | 설명 |
| Simple | 원본 이미지의 원래 크기 그대로 사용할 때 사용합니다. |
| Sliced | 원본 이미지의 크기를 유지하지 않고, 크기 조절을 해야하는 경우에 사용합니다. (텍스쳐의 크기를 늘려서 사용하는 경우에 주로 사용합니다.) |
| Tiled | 원본 이미지를 타일링해서 스프라이트를 구성할 때 사용합니다. |
| Filled | HP 게이지 등, 스프라이트의 일부만 그리거나 하는 등의 효과가 필요한 경우에 사용합니다. |
스프라이트 마다 각 특성이 다르게 때문에 상황에 맞게 활용하시기 바랍니다
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
