1. NGUI 패키지가 import되면 Ctrl+S를 눌러 한번 저장을 해준다. "mainUI"로 저장해 보았다.
2. 저장이되면 새로운 메뉴가 생기게 된다 NGUI라는 것이 추가 된다.
배경을 만들기 앞서 먼저 NGUI 기반 UI를 만들어 줘야한다.
NGUI-> Open the UI Wizard 클릭
(정식버전과 Demo버전은 메뉴의 구성이 조금 다르다. 필자는 Demo 버전을 이용하겠다.)
3. UI Tool이라는 창이 생긴다 이때 간단히 Create Your UI를 눌러주면 2DUI 기본 틀이 생성된다.
4. Hierachy(하이어라키)를 보면 UI Root라고 생겼다. 이곳이 카메라와 여러가지 앞으로 만들 것들을 계층 구조처럼 아래에 만들어 나갈 공간이다.
5. UI틀을 만들었으니 이제 배경을 추가해본다. NGUI는 간편하게 오브젝트들을 위젯처럼 이용하기 때문에 배치와 이동이 간편하다.
NGUI메뉴를 눌러 Open the Widget Wizard를 눌러본다.
6. Widget Tool창이 생성되고 Atlas와 Font를 넣을 공간이 보인다.
여기서 아트라스를 간단히 설명하자면 사용할 이미지 여러가지를 하나의 파일로 묶어논 것을 아트라스라고 하고, 폰트는 말그대로 문자의 이미지를 말하는데 이것또한 알파벳과 각종 특수문자들을 한 이미지로 만들어 놓은 것을 넣어주면 된다. 여기서는 기존 NGUI demo패키지에서 제공하는 아트라스와 폰트를 이용할 것이다.
프로젝트 탭에 import된 NGUI 폴더를 보면 Example->Atlases->SciFi에 들어가보면 기본으로 제공되는 아트라스들과 폰트가 준비되어 있다.
각각 알맞게 드래그해여 추가해 준다.
7. 아트라스가 추가되면 아래에 옵션이 생기는데 여기서 어떤 이미지를 이용할 것인지 선택할 수 있다. 배경을 만드는 작업을 할 것이기 때문에 Sprite에서 Dark라는 이미지를 클릭한다.(Demo버전이라 이미지 이름이 안보임..첫번째꺼를 클릭하면 됨)
그리고 나머지 옵션은 아래와 같이 그대로 두면 된다.
8. 마지막에 초록색으로 되어 있는 Add To를 클릭하게되면 하이어라키에 Panel안에 Sprite(Dark)라는 것이 생성된 것을 알 수 있다. Add To 오른쪽에 있는 것이 Panel이기 때문에 Panel오브젝트 아래에 생성되는 것이다. 잘못된 위치에 추가했을 경우 간단히 드래그하여 옮겨주면 된다.
9. 왼쪽 작업창을 보면 작은 상자가 생긴 것을 알 수 있다. 프로젝트 설정에 따라 크게 보일 수도 있고 필자처럼 작게 보일 수도 있음을 알아두자.
10. 자세히 보면 테두리가 하얗게 들어가있는 것을 볼 수있다. 이것을 확대하면 픽셀이 깨지게되는데, Sprite(Dark)를 클릭하고 오른쪽 인스펙터탭 아래쪽을 보면 Sprite Type옵션이 있다. 여기서 Simple은 일반적으로 다 불러오는 것이고 Sliced를 누르면 아래 미리보기 이미지의 색칠된 가운데만 나오게 된다.
11. 이제 크기를 키워보기위에 인스펙터탭에서 S옵션을 본다. 여기서 P는 Position을 의미한다(위치), R은 Rotation을 의미한다(회전), S는 Size를 의미한다(크기).
Size를 600, 300으로 키워보았다.
12. 왼쪽 작업창을 보면 검은 배경의 Sprite가 만들어진 것을 볼 수 있다.
13. 마지막으로 색상을 바꿔보려 한다. 오른쪽에 인스펙터탭의 Color Tint를 클릭하면 Color설정 창이 뜨게 되는데 여기서 분홍색을 넣어보았다. R은 Red, G는 Green, B는 Blue를 뜻한다. 마지막에 A는 Alpha를 뜻하는데 투명도를 지정할 수 있다.
14. NGUI로 2DUI배경을 손쉽게 만들었다.
