NGUI 3.x Tutorial Step6 - Button
NGUI 라벨과 다이나믹 폰트로 한글 출력까지 해봤습니다. 이번에는 버튼 추가를 해보겠습니다.
빈 게임 오브젝트를 만들고 Button으로 이름을 지정합니다. 그리고 아래와 같이 Button 하위로 NGUI 라벨과 Sliced 스프라이트를 만들어줍니다.
이제 버튼에 마우스를 가져갔을 때 색상등을 변경하기 위한 UIButton과 클릭 이벤트를 처리하는데 필요한 박스 충돌체를 추가해줘야합니다. 각각 NGUI - Attach - Collider과 Button Script를 추가하면 아래와 같습니다.
이제 실행해서 마우스를 가져가면 버튼의 색이 변하고 클릭이 잘 됩니다. 그런데 저는 안되더군요. UI Root부터 그 하위 모든 UI 객체의 Layer가 모두 빈 이름의 레이어인데 반해 Button은 Default라서 문제였네요. 빈레이어를 선택할 수 없기 때문에 임시 방편으로 UI Root를 Default로 해준 후 Ctrl + Z를 눌러 Undo하시면 Button 오브젝트의 Layer도 빈 이름의 레이어로 됩니다.
정식으로 한다면 아래와 같이 Layer - Add Layer해서 User Layer에 UI 등으로 일단 레이어를 하나 추가합니다.
UI Root의 Layer를 방금 만든 레이어로 선택 후 Yes, change children을 선택 해 모두 적용합니다.
마지막으로 UI 카메라의 Unnamed 로 되어있는 Culling Mask와 Event Mask를 역시나 방금 만든 UI 레이어로 설정해줍니다.
이제 실행 후 버튼에 마우스를 가져가면 색상이 변하는 것을 확인 할 수 있습니다. 레이어라는게 있다는건 알고 있었는데 그냥 막 진행하다보니 이런 이슈가 나왔네요.
이제 버튼이 클릭되었을 때 이벤트 핸들링 처리하는것을 정리해보겠습니다. 먼저 간단히 아래와 같이 ButtonTest라는 C# 스크립트를 만들어 OnClick 함수를 만듭니다.
버튼 오브젝트에 ButtonTest 컴포넌트를 추가합니다.
인스펙터에서 추가한 ButtonTest 컴포넌트를 UIButton 컴포넌트의 On Click안에 Notify로 드래그 & 드롭해줍니다.
실행해서 버튼을 클릭해보면 아래와 같이 로그가 찍히는 것을 확인할 수 있습니다.
이외에도 버튼의 스케일을 확장하는 Button Scale나 버튼이 클릭되었을 때 오프셋 위치로 이동 시키는 Button Offset, 클릭시 사운드 재생시켜주는 UIPlay Sound 컴포넌트등이 아래 그림과 같이 더 있습니다. 버튼 이벤트 핸들링의 경우 UIButton Message 컴포넌트로도 처리할 수 있네요. 지금 나열한 것은 일단 이번 포스팅에서는 제외해봅니다.
중간에 이슈가 나와서 포스팅이 길어졌네요. 다음에는 슬라이더 컨트롤을 추가해보겠습니다.
참고
NGUI Tutorial Step 6: Button
빈 게임 오브젝트를 만들고 Button으로 이름을 지정합니다. 그리고 아래와 같이 Button 하위로 NGUI 라벨과 Sliced 스프라이트를 만들어줍니다.
이제 버튼에 마우스를 가져갔을 때 색상등을 변경하기 위한 UIButton과 클릭 이벤트를 처리하는데 필요한 박스 충돌체를 추가해줘야합니다. 각각 NGUI - Attach - Collider과 Button Script를 추가하면 아래와 같습니다.
이제 실행해서 마우스를 가져가면 버튼의 색이 변하고 클릭이 잘 됩니다. 그런데 저는 안되더군요. UI Root부터 그 하위 모든 UI 객체의 Layer가 모두 빈 이름의 레이어인데 반해 Button은 Default라서 문제였네요. 빈레이어를 선택할 수 없기 때문에 임시 방편으로 UI Root를 Default로 해준 후 Ctrl + Z를 눌러 Undo하시면 Button 오브젝트의 Layer도 빈 이름의 레이어로 됩니다.
정식으로 한다면 아래와 같이 Layer - Add Layer해서 User Layer에 UI 등으로 일단 레이어를 하나 추가합니다.
UI Root의 Layer를 방금 만든 레이어로 선택 후 Yes, change children을 선택 해 모두 적용합니다.
마지막으로 UI 카메라의 Unnamed 로 되어있는 Culling Mask와 Event Mask를 역시나 방금 만든 UI 레이어로 설정해줍니다.
이제 실행 후 버튼에 마우스를 가져가면 색상이 변하는 것을 확인 할 수 있습니다. 레이어라는게 있다는건 알고 있었는데 그냥 막 진행하다보니 이런 이슈가 나왔네요.
이제 버튼이 클릭되었을 때 이벤트 핸들링 처리하는것을 정리해보겠습니다. 먼저 간단히 아래와 같이 ButtonTest라는 C# 스크립트를 만들어 OnClick 함수를 만듭니다.
버튼 오브젝트에 ButtonTest 컴포넌트를 추가합니다.
인스펙터에서 추가한 ButtonTest 컴포넌트를 UIButton 컴포넌트의 On Click안에 Notify로 드래그 & 드롭해줍니다.
실행해서 버튼을 클릭해보면 아래와 같이 로그가 찍히는 것을 확인할 수 있습니다.
이외에도 버튼의 스케일을 확장하는 Button Scale나 버튼이 클릭되었을 때 오프셋 위치로 이동 시키는 Button Offset, 클릭시 사운드 재생시켜주는 UIPlay Sound 컴포넌트등이 아래 그림과 같이 더 있습니다. 버튼 이벤트 핸들링의 경우 UIButton Message 컴포넌트로도 처리할 수 있네요. 지금 나열한 것은 일단 이번 포스팅에서는 제외해봅니다.
중간에 이슈가 나와서 포스팅이 길어졌네요. 다음에는 슬라이더 컨트롤을 추가해보겠습니다.
참고
NGUI Tutorial Step 6: Button
댓글
댓글 쓰기