Unity3D – Page 8 – 아이군의 블로그

[NGUI] Tutorial Step 2 – Atlas, Sprite, Transform

이전 스텝에서 UI가 세팅 되었으므로 몇개의 위젯을 추가해 보도록 하겠습니다. NGUI 메뉴에서 ‘Open the Wiget Wizard’를 선택합니다.
이 마법사창은 몇몇의 기본적인 위젯을 생성할 수 있게 해줍니다. 사용하고자 하는 아틀라스와 폰트를 선택해주어야 합니다. 새로운 프로젝트 이기 때문에 버튼을 클릭해서 최근에 사용한 엘리먼트 밖에 보이지 않습니다. 사용을 원하는 아틀라스와 폰트를 버튼 옆의 필드에 드래그하여 추가를 할 수 있습니다. 다음의 스크린샷을 참고하여 SciFi Atlas와 SciFi Font – Normal을 선택합시다.
다음은 템플릿 필드입니다. 여기에서 사용가능한 템플릿 리스트에서 원하는 만들고자 하는 위젯의 타입을 선택할 수 있습니다. 이 마법사는 처음 시작하는 사람들을 편리하도록 도와줍니다. NGUI 사용법을 이해하게 되면 마법사 대신에 완전한 위젯을 복사 붙여넣기하는것을 선호하게 될 것입니다. 이제 첫번째 위젯을 만들어 봅시다.

1. 위에서 언급되었듯이 SciFi Atlas를 선택했다고 가정하고 Sprite는 Dark를 선택합니다. (하나씩 선택해 보면 이름이 나옵니다)

2. Add To 버튼을 클릭합니다. (만약 버튼의 색이 회색으로 나온다면 아틀라스 추가를 빼먹었다는 뜻입니다. SciFi Atlas를 드래그하여 추가합시다)
3. 스프라이트는 선택된채로 생성됩니다. 확인해 보면 매우 매우 작을것입니다. 이것을 수정해 보겠습니다. NGUI로 작업할 경우 위젯을 이동하고 크기를 변경하고 회전할때는 Transform 에서 수행합니다.
중요한점 한가지는 Transform 설정에서 Z축은 같은 아틀라스에서는 사용되지 않는다는 것입니다. 대신에 앞으로 댕겨오거나 뒤로 밀어내는식의 깊이(Depth) 설정으로 동작하게 됩니다. 뒤에서 다수의 아틀라스들 또는 UI Panel들로 작업을 했을 때 Z축을 이용한 조정이 필요하게 됩니다. 이유는 단순합니다. 위젯들이 그려질 때 그려질 순서가 섞여 문제가 되지 않도록 완전히 플랫한 윈도우를 생성할도록 해줍니다.

~~다음 튜토리얼로 진행하기 전에 2개의 위젯을 추가해 봅시다.~~ 다음 튜토리얼에서 추가하겠습니다. Sliced Sprite (테두리 구현에 이상적인 9조각 스프라이트)와 Tiled Sprite (Transform의 Scale설정에 따라 완전히 채우는 스프라이트)를 알아둡시다. 이것들을 이해하지 못해도 상관없습니다. 다음에서 언급할 것입니다.

참고 : http://www.tasharen.com/?page_id=193

[NGUI] Tutorial Step 1 – Camera, Anchor, Panel

1. 새로운 Scene을 생성합니다.
2. Main Camera를 선택한 후 삭제 합니다.
3. NGUI메뉴를 선택해 Open the UI Wizard를 선택합니다. 위와 같은 창이 뜹니다.
4. 이 패널에서는 UI가 어떤 레이어에 위치할지를 선택할 수 있습니다.
하지만 여기서는 일단 Default 레이어와 Simple2D카메라를 선택하도록 하겠습니다.
5. 이상입니다. 이제 UI가 사용가능하도록 준비되었습니다.

존재하는 프로젝트에서 NGUI를 사용할 경우 Step 2를 생략하시기 바랍니다. 그리고 Step 4 이전에 적절한 UI 레이어를 지정하여 사용하는것이 좋습니다. 다른 카메라(Main Camera같은)는 지정한 UI 레이어에 그리지 않도록 주의해야 합니다.

진행에 앞서 UI 마법사가 생성한 결과물에 대해 살펴보겠습니다.

1. 2D Root 오브젝트는 UIRoot 스크립트를 포함합니다. 이 스크립트는 오브젝트의 크기가 2/스크린높이가 되도록 지속적으로 재조정하는 기능을 합니다. 이로 인해 위젯의 좌표를 픽셀 단위로 적용할 수 있게 되고 게임월드상의 다른것들에 비해 상대적으로 작은 값을 사용할 수 있습니다.
2. Camera 오브젝트는 Camera와 UICamera 스크립트를 포함합니다. UICamera 스크립트는 NGUI의 이벤트 시스템을 포함합니다.
3. Anchor는 UIAnchor 스크립트를 포함합니다. 이 스크립트는 위젯을 스크린의 가장자리에 붙이는것을 가능케 하지만 이 경우 윈도우즈 머신에서는 완벽한 픽셀 배치를 위해 Half-Pixel Offset으로 사용되기도 합니다.
4. Panel 오브젝트는 UIPanel 스크립트를 포함합니다. 이 UIPanel은 계층구조 이하의 모든 UI 위젯들을 담고 있으며 그들을 조합하여 가능한한 최소한의 Draw 호출을 할 수 있도록 하는 컨테이너입니다.

지금 설명한 Panel 오브젝트를 잘 알아두셔야 합니다. 다음 스텝부터 설명되는 모든 위젯은 Panel을 자동으로 부모로 지정하게 됩니다.

참고 : http://www.tasharen.com/?page_id=185