NGUI #01.UIRoot

Unity 2018.2.1f1 - NGUI 3.12.0 을 기반으로 작성 되었습니다.

---------------------------

NGUI는 Unity에서 UI를 제작하는데 많이 사용되고 있는 UI Plugin이다.

Unity(Unity GUI)가 과거(대략 유니티3.0 시절) 너무나 구닥다리 거지깽깽이 같은 기능성을 제공하는 바람에 Next-Gen UI Kit 이라고해서 Tasharen Entertainment에서 만들었다.

이 글을 작성하는 시점인 현재는 NGUI 개발자가 유니티에 스카웃되어 UGUI를 개발하고 있다고 알고 있다. 덕분에 UGUI가 옛날에 비하여 상당히 편해지고 좋아졌으나 아직까진 한국에서는 NGUI의 비중이 40% 이상인 것으로 알고 있다.

과거 NGUI가 흥하던 시절에는 NGUI 사용량이 UGUI에 비해 8~90%에 육박하였다.

역사적인 서론은 여기까지하고...

이 글을 적는 목적은 구글에서 NGUI에 대해서 검색할 시 흔히 볼 수 있는 글들이 너무나 오래 된 글들이 많아서 최신 버전을 사용하는 사람들에게는 생소하거나 동작되지 않거나 삭제되거나 변경 된 사항들이 자주 등장하다보니 삽질을 하는 일이 많아서 작성하게 되었다.

(사실 본인이 제일 삽질하는 바람에 답답해서 적게되었다)

---------------------------

#1. UIRoot

NGUI가 Project에 포함되어 있다면 위와 같이 상단 Toolbar에 "NGUI" 가 보입니다.

상단 툴바에서는 

 - Selection, Create, Attach, Tween 등 다양한 기능들이 들어있습니다.

각 항목을 모두 설명하는 것은 내용이 너무 많으므로 차근차근 사용해가면서 설명하겠습니다.

먼저 NGUI가 작동하려면 UIRoot 와 UICamera가 필요합니다.

간단하게 먼저 비어있는 Scene에서 NGUI > Create > Texture를 눌러보겠습니다.

위 사진처럼 Texture를 누르면 2번 항목과 같이 UIRoot와 Camera 그리고 Create에서 Texture를 했으므로 UITexture 컴포넌트가 붙은 "Texture" 이름을 가진 GameObject가 생성됩니다.

생성 된 UIRoot 를 선택해서 Inspector 창에 보여지는 정보를 살펴보면 다음과 같이 나옵니다.

UIRoot - 

 UIRoot 컴포넌트는 UIWidget을 상속받은 컴포넌트 및 오브젝트들의 최상단 패널로써,

해상도 또는 크기를 조절할 수 있는 스케일링 역할을 담당합니다.

UIRoot에는 다음과 같은 파라미터가 있습니다.

파라미터	설명
Scaling Style	1) Flexible : 화면 해상도에 관계 없이 UI가 픽셀 단위에서 언제나 같은 크기를 유지함. 실제 해상도에 따라 보여지는 크기가 작아지거나 커질 수 있음  2) Constrained : UI가 화면에서 항상 같은 비율로 보이도록 스케일링 합니다. UI의 오리지날 픽셀 단위의 크기가 비율에 맞춰져 변동될 수 있음  3) ConstrainedOnMobiles : 모바일 플랫폼에서는 Constrained 방식을 사용, 기타 플랫폼에서는 Flexible 방식을 사용합니다.
Minimum Height	Flexible 방식에서 화면의 최소 높이 값을 지정합니다. 화면 높이가 설정한 값보다 작아지면 UI 크기를 조정합니다.
Maximum Height	Flexible 방식에서 화면의 최대 높이를 지정합니다. 화면 높이가 설정한 값보다 커지면 UI 크기를 조정합니다.

UIRoot를 설정함에 있어 가장 중요한 점은 본인이 만드는 프로젝트의 기본 해상도를 어떻게 잡는지가 중요합니다.

16:9 비율을 쓸 것인가 4:3 비율을 쓸 것인가

1920x1080해상도를 기준으로 잡을 것인가 1280x720 해상도를 기준으로 잡을 것인가

등등, 모바일 플랫폼이라면 안드로이드 기기 별 해상도 차이가 심하기 때문에 고민하게 됩니다.

모바일 플랫폼에서는 이에 대응하기 위해 보통 ConstrainedOnMobiles 로 설정합니다.

ConstrainedOnMobiles로 설정하면 다음과 같이 Content Width, Content Height로 기준 해상도를 설정할 수 있습니다.

1) Content Width/Height 둘중 하나만 Fit 활성화 : 체크 된 항목의 비율을 유지하여 스케일링 됩니다.

2) Width/Height Fit 모두 비활성화 : 기기 해상도에 맞추어 UI가 늘어나지만 Camera에 모든 UI가 들어오지 않을 수 있습니다.

3) Width/Height Fit 모두 활성화 : 강제로 UI 항목들이 스케일링 되어 항상 화면에 보여지게 됩니다.

Fit를 둘다 체크할 시 UI 전체 화면이 스케일링 되어 UICamera에 보여질 수 있으나

기기 해상도 차이로 인해 발생하는 공백 부분은 메인카메라에 설정된 Background 값으로 채워집니다.

현재 회사에서 개발중인 게임(모바일)의 경우 

ConstrainedOnMobile 

 > Content Width(1280) Fit(Disable)

 > Content Height (720) Fit(Enable)

인 상태에서 NGUI의 앵커를 이용하여 해상도를 대응하고 있습니다.

모바일 플랫폼에서 그래서 UIRoot를 어떻게 설정하고해라 라는 정답은 없습니다만 최근 AppStore나 GoogleStore에서 요구하는 정책 사항을 고려해볼 때 위와같이 설정하여 앵커로 해상도를 대응하는 방식으로 가야하지 않을까 생각합니다.

(AppStore의 경우 Letter Camera를 사용하면 안됨. 2018년 기준)

좀 더 편한 방법이 있다면 저도 알려주세요.

UIPanel 에 대해서는 다음글에서 다루고 있습니다

RigidBody - 

 마지막으로 UIRoot에는 RigidBody Component가 붙습니다. 만약 RigidBody가 안 붙어 있다면 NGUI의 Widget들의 Event를 동작시킬 수 없습니다.

버튼, 스크롤, 스위치, 패널 등 Widget에서의 Click, Touch, Press, Drag 등의 Event를 검출하기 위해 붙어 있습니다.