Tag Archives: Sprite

[NGUI] Tutorial Step 3 – Sliced Sprite

사용자 삽입 이미지1. Panel 게임 오브젝트를 선택하고 위젯 마법사를 이용하여 Sliced Sprite를 추가합니다. 달리 어렵게 생각하실것 없이 아틀라스에서 Dark스프라이트를 선택한뒤에 Sliced Sprite라는 이름만 정해주시면 됩니다.사용자 삽입 이미지
2. Transform의 값을 조정하여 Scale(S라고 나와있음)의 값을 500, 500, 1로 변경합니다.
3. 다른 Sliced Sprite를 추가하고 Scale을 500, 40, 1로 설정합니다.
4. 두번째로 추가한 스프라이트의 Position(P라고 나와있음)을 0, 230, 0으로 변경합니다.
5. 그리고 Sprite 버튼을 눌러 DarkLight로 변경합니다.
6. 생성한 두개의 Sliced Sprite들과 함께 아래의 예시처럼 추가로 위젯을 배치해봅시다. Color Tint의 값을 조정하여 원하는 색상으로 변경하면 됩니다.
7. 추가한 두개의 Sliced Sprite들의 Depth를 조정하여 6에서 추가한 색을 지정한 스프라이트들보다 뒤로 이동시킬 수 있습니다. (직접 값을 바꿔보면서 느껴보시는것이 좋습니다)

이제 윈도우창 같은 무언가가 만들어졌습니다.
사용자 삽입 이미지참고 : http://www.tasharen.com/?page_id=204

[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