Tag Archives: Tiled

[NGUI] Tutorial Step 4 – Tiled Sprite

사용자 삽입 이미지사용자 삽입 이미지1. Panel을 선택하고 이번에는 아틀라스의 Honeycomb스프라이트를 선택하여 Tiled Sprite를 추가합니다.
2. Position은 0, -19, 0으로 Scale은 494, 457, 1로 설정합니다.
3. 이제 Tiled Sprite의 Depth를 조정하여 백그라운드 바로위까지 뒤로 이동시킵니다. 백그라운드 윈도우의 Depth역시 조정해야 하는것을 잊지 마시고요.(더 뒤로 밀어야 합니다)

이제 실행을 시켜봅시다. Scale을 조정하고 색상을 바꿔보며 보기 좋게 만들어 봅시다.

Panel 오브젝트를 선택하고 Debug Info 필드에서 Geometry를 선택하여 생성된 Geometry를 확인할 수 있습니다. Scene뷰에서 위젯을 클릭하여 확인 가능합니다.

이제 완료되었습니다. 이와 같은 화면을 단 1번의 Draw 요청으로 구현할 수 있습니다.
사용자 삽입 이미지참고 : http://www.tasharen.com/?page_id=223

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

사용자 삽입 이미지이전 스텝에서 UI가 세팅 되었으므로 몇개의 위젯을 추가해 보도록 하겠습니다. NGUI 메뉴에서 ‘Open the Wiget Wizard’를 선택합니다.
사용자 삽입 이미지이 마법사창은 몇몇의 기본적인 위젯을 생성할 수 있게 해줍니다. 사용하고자 하는 아틀라스와 폰트를 선택해주어야 합니다. 새로운 프로젝트 이기 때문에 버튼을 클릭해서 최근에 사용한 엘리먼트 밖에 보이지 않습니다. 사용을 원하는 아틀라스와 폰트를 버튼 옆의 필드에 드래그하여 추가를 할 수 있습니다. 다음의 스크린샷을 참고하여 SciFi AtlasSciFi 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