Tag Archives: 3d

[NGUI] Tutorial Step 6 – Button

사용자 삽입 이미지이젠 버튼 같아 보이는것을 만드는데 충분한 지식을 갖추고 있을것입니다. 하지만 어떻게 클릭 이벤트를 받아 처리할 수 있는지는 모를것입니다. 매우 간단합니다. 무엇이든지 Collider를 포함하게 되며 그것은 모든 이벤트를 받게 됩니다. 가장 간단한 버튼들을 만들기 위해 단지 NGUI 메뉴에서 Attatch a Collider를 스프라이트중에 하나에 적용해 주면 됩니다. 하지만 다행이도 NGUI는 버튼에 대해 미리 만들어둔 템플릿을 제공합니다.

이전의 튜토리얼과 같이 Panel을 선택하고 마법사를 이용하여 Button을 생성해 줍니다.
사용자 삽입 이미지이번에는 생성된 버튼이 하나의 게임 오브젝트가 아니고 여러개로 이루어진것을 확인할 수 있습니다. 이것은 버튼은 실제로 배경 스프라이트, 텍스트 라벨, 스크립트 묶음을 포함한 컨테이너 오브젝트와 같은 여러 컴포넌트들로 만들어져 있기 때문입니다. 작은 개별의 컴포넌트들이 서로 함께 결합되어 다른 무언가를 할 수 있는 형태, 이런것이 NGUI와 그리고 Unity의 기본적인 동작 방식입니다.  마치 레고같죠?

  1. UIButtonColor 버튼이 마우스가 올라가거나 눌려졌을때 버튼의 색상을 변경합니다.
  2. UIButtonScale 마우스가 올라갔을 때 버튼의 크기를 변경합니다.
  3. UIButtonOffset 버튼이 눌렸을 때 오른쪽 하단 코너로 버튼을 이동시킵니다.
  4. UIButtonSound 버튼이 클릭되었을 때 소리를 냅니다.

위의 내용은 예시입니다. 이외에도 UIButtonPlayAnimation이나 UIButtonMessage와 같은 것이 있으니 한번 살펴 보시기 바랍니다.

한개 또는 그 이상의 이벤트 함수들을 버튼에 붙여 자신만의 커스텀 이벤트 처리를 구현할 수 있습니다. 완성 하면 다음과 같은 모습이 됩니다.
사용자 삽입 이미지
참고 : http://www.tasharen.com/?page_id=237

[NGUI] Tutorial Step 5 – Label

사용자 삽입 이미지
사용자 삽입 이미지1. 이전에서 해왔듯이 Panel 게임 오브젝트를 선택하고 위젯 마법사에서 Label 템플릿을 선택하여 추가해 줍시다.
2. “Add To” 버튼을 클릭한 후 라벨이 선택된채로 추가됩니다. 만약 “Add To”버튼이 회색이라면 Font가 선택되지 않은것입니다. “SciFi Font – Header”를 추가해 줍시다.
3. Inspector 윈도우에서 새로 추가한 UILabelText 필드에 문자를 입력해 봅시다. 예를 들어 “Hello World”
4. 라벨의 위치를 0, 234, 0으로 이동합시다. 타이틀바처럼 보이도록 이동합니다.
사용자 삽입 이미지이번엔 “SciFi Font – Normal”폰트를 선택해 또다른 UILabel을 만들어 줍시다. 문자열 내에서 색상을 지정해 줄 필요가 있을때가 있는데 문자열 중간에 RrGgBb형태의 Hex 컬러 코드(포토샵등에서 바로 복사하여 사용)를 집어넣어 변경할 수 있습니다. 대괄호를 사용하여 빨간색은 [FF0000]과 같이 표현할 수 있습니다. 색상을 되돌리기 위해서는 바로 앞에 [-]을 넣어주면 됩니다.

다른 두개의 폰트가 같은 재료(UI Atlas)를 사용하므로 전체적인 씬을 그릴때 여전히 1번의 Draw요청만으로 충분하게 됩니다. 완료된 화면은 다음과 같습니다.
사용자 삽입 이미지

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