1.3 UI 기본구조와 주요 컴포넌트
UI 기본구조와 주요 컴포넌트
1.3 UI 기본구조와 주요 컴포넌트
NGUI 메뉴를 이용해서 2D UI를 생성하면 몇몇 게임오브젝트가 생성이 됩니다.
이 중에서 NGUI의 핵심적인 기능을 담당하는 두 개의 컴포넌트에 대해서 알아보겠습니다.
UIRoot
UIRoot 컴포넌트는 위젯을 작업하기에 적합한 크기로 줄여주는 역할을 합니다.
또한 Scaling Style은 텍스처의 픽셀 상의 본래 크기를 유지하거나 (Flexible), 파라미터에 지정한 값에 때라서 화면에서 비율을 유지하는 방식 (Constrained) 중 하나를 결정합니다.
UIRoot 컴포넌트에는 여러 파라미터가 있습니다.
| 파라미터 | 설명 |
| Scaling Style | Flexible: 화면 해상도에 관계 없이 UI가 픽셀 단위에서 언제나 같은 크기를 유지합니다. 실제 해상도에 따라서 화면에서 보이는 크기가 크거나 작아질 수 있습니다.
Constrained: UI가 화면에서 언제나 같은 비율로 보일 수 있도록 화면 크기를 조정합니다. UI 본래 픽셀 단위 크기는 유지되지 않지만, 화면 크기에 따라 조정된 비율로 그려집니다. ConstrainedOnMobiles: 모바일 플랫폼에서는 Constrained 방식을 사용 하고, 기타 플랫폼에서는 Flexible 방식을 사용합니다. |
| Minimun Height | Flexible 방식에서 화면의 최소 높이 값을 지정합니다. 화면 높이가 설정한 값보다 작아지면, UI 크기를 조정합니다. |
| Maximum Height | Flexible 방식에서 화면의 최대 높이 값을 지정합니다. 화면 높이가 설정한 값보다 커지면 UI 크기를 조정합니다. |
UIRoot 컴포넌트에서 가장 신경을 써야하는 부분은 화면을 구성할 때 어떤 해상도를 기본으로 UI를 구성할 지에 대한 부분과 실제 기기의 해상도가 기본으로 설정한 UI의 해상도가 아닌 경우에는 어떤 방식으로 해당 해상도에 대응할 지를 결정하는 부분입니다.
기본으로 설정한 UI 해상도가 아닌 장치를 만났을 때 세로화면이(화면의 높이) 상황에 따라 잘리는 상황이 발생하더라도 넒이를 유지할 지, 가로화면이(화면의 넓이) 상황에 따라 잘리는 상황이 발생하더라도 높이를 유지할 지, 또는 상황에 따라서 화면 전체를 사용하지 못하더라도 (화면을 줄여서라도) 구성한 전체 UI화면을 비율을 유지하면서 장치에서 보여줄 지를 결정하는 데 사용되는 중요한 컴포넌트 입니다.
안드로이드 장치는 모바일 플랫폼 중에서도 특히 장치 해상도의 파편화가 심합니다.
이 경우 Constrained로 설정한 후 Content Width 와 Content Height 의 Fit 항목을 모두 설정하면, 실제 장치에서 가로 화면 전체를 사용하지는 못하지만 UI가 잘리는 것을 방지할 수 있습니다.
(UI 화면을 줄이고 남은 부분은 메인 카메라의 Background에 설정된 색상으로 채웁니다. 기본으로 설정한 UI의 해상도 비율은 유지됩니다.)
UICamera
UICamera는 각 UI 위젯에서 발생하는 이벤트와 관련된 메시지를 보내는 역할을 합니다. UI와 상호작용하려면 UICamera.cs 스크립트가 컴포넌트로 추가되어 있어야 합니다.
자주 사용하는 이벤트는 OnClick / OnHover 등이 있습니다.
두 개 이상의 카메라를 이용해서 UI를 구성할 수도 있습니다.
(예제에서는 1개의 카메라를 이용해서 UI를 구성하도록 하겠습니다.)
UICamera 컴포넌트에는 여러가지 파라미터가 있습니다.
각 파라미터의 내용은 아래 표를 이용해서 설명하도록 하겠습니다.
| 파라미터 | 설명 |
| Event Type | 3D World: 3D 월드상의 게임 오브젝트와 상호작용할 경우에 사용합니다.
3D UI: NGUI의 3D UI와 상호작용할 경우에 사용합니다. 2D World: 유니티 2D 게임 오브젝트와 상호작용할 경우에 사용합니다. 2D UI: NGUI의 2D UI와 상호작용할 경우에 사용합니다. |
| Event Mask | 이벤트를 받아들일 레이어를 지정합니다. |
| Event Go to… | 이벤트를 전달 할 컴포넌트를 설정합니다. Colliders와 Rigidbodies 중에 선택할 수 있습니다. |
| Debug | 디버그 모드의 사용 여부를 설정합니다. UI가 의도하지 않은 방식으로 동작할 때, 디버그 모드를 이용해서 확인할 수 있습니다. |
| Allow Multi Touch | 멀터 터치 입력의 허용 여부를 설정합니다. |
| Sticky Tooltip | Sticky Tooltip의 사용여부를 설정합니다.
사용할 경우: 마우스가 위젯 밖으로 이동할 때 툴팁이 사라집니다. 사용하지 않을 경우: 마우스가 이동하면 바로 툴팁이 사라집니다. |
| Tooltip Delay | 툴팁이 표시되기위한 시간을 지정합니다. 마우스가 설정한 시간만큼 위치한 경우 툴팁이 나타나게 됩니다. |
| Raycast Range | 카메라에서 이벤트를 감지할 때 사용되는 Raycast의 범위를 지정합니다. -1이 기본값으로 설정되어 있고, -1인 경우 Raycast 범위가 무제한 값으로 설정됩니다. |
| Event Sources | NGUI가 이벤트를 처리할 입력 소스를 지정합니다.
Mouse / Touch / Keyboard / Controller 총 4가지 입력 소스를 지원합니다. |
| Threshould | 특정 이벤트가 발생하기 위한 threshould 값 즉, 최소 값을 설정합니다.
Mouse Drag: 드래그 이벤트를 처리할 때, 마우스 클릭이 발생한 다음 마우스가 얼마나 이동했을 때 드래그 이벤트로 간주할 지를 설정합니다. Mouse Click: 마우스 버튼을 누른 뒤 마우스가 얼마나 이동한 뒤에 마우스 버튼을 놓았을 떄 클릭 이벤트를 무시할 지에 대한 값을 설정합니다. Touch Drag: 모바일 기기 등 터치 입력 기반의 장치에서 Mouse Drag와 동일한 이벤트를 처리할 때의 값을 설정합니다. Touch Tap: 모바일 기기 등 터치 입력 기반의 장치에서 Mouse Click과 동일한 이벤트를 처리할 때의 값을 설정합니다. |
| Axes and Keys | 유니티의 입력 축 (Axes 값)과 키보드를 NGUI의 입력 시스템으로 인식하는 데 사용하기 위한 설정입니다. |
UIPanel
UIPanel은 UI 위젯들을 모아서 관리하고 패널에 속한 UI 위젯들을 하나의 드로우 콜로 렌더링하기위해 사용됩니다.
패널은 여러 개를 추가해서 UI를 구성할 수 있지만, 그 때마다 드로우 콜도 증가합니다.
패널은 유니티 메뉴에서 NGUI -> Create -> Panel 메뉴를 이용해서 추가로 생성할 수 있습니다.
UIPanel을 생성하면 아래 그림과 같이 UI Root 게임 오브젝트 자식 오브젝트로 패널이 생성 됩니다.
생성된 Panel 게임 오브젝트를 클릭한 상태에서 인스펙터 뷰를 보면 아래 그림과 같이 많은 파라미터들을 가지고 있는 것을 확인할 수 있습니다.
패널의 파라미터에 대해서 알아 보겠습니다.
| 파라미터 | 설명 |
| Alpha | 패널 전체의 투명도를 설정할 수 있습니다. 이 값은 패널에 속한 모든 위젯에 영향을 주게 됩니다. |
| Depth | Depth 값애 따라서 패널간의 렌더링 순서를 결정합니다. Depth 값이 클수록 화면에 나중에 그리기 때문에 앞에 위치하게 됩니다. |
| Clipping | None: 클리핑 기능을 적용하지 않습니다. 따라서 패널 범위를 벗어나는 UI도 화면에 그립니다.
Soft Clip: 클리핑 기능을 사용하며, 클리핑 영역을 벗어난 부분을 깔끔하게 감출 때 사용합니다. Constrain but Don’t Clip: 클리핑 기능을 사용하지 않고, 영역만 지정할 때 사용합니다. |
| Render Q | NGUI 패널은 기본적으로 3000부터 렌더큐 값을 사용합니다.
Automatic: Depth 값에 따라서 각 패널의 렌더큐를 자동으로 설정합니다. Start At: 자동으로 설정하는 렌더큐의 시작 값을 지정합니다. Explicit: 렌더큐 값을 직접 지정할 때 사용합니다. |
| Normals | UI에 사용하는 메쉬의 노멀 (Normal)값을 계산합니다. 셰이더를 사용해서 라이트에 반응하는 경우에는 이 옵션을 사용합니다. |
| Cull | 이 옵션을 사용하면 패널이 드래그되는 동안 패널에 속한 위젯들의 렌더링을 끌 수 있습니다. |
| Visible | 패널에 속한 UI가 화면 밖에 벗어나지 않도록 할 때 사용합니다. |
| Static | 패널에 속한 위젯이 움직이지 않는 경우에만 이 옵션을 사용합니다. 성능 향상에 도움을 줄 수 있습니다. |
| Panel Tool | 씬에 있는 모든 패널을 확인하고 선택할 수 있는 패널 관리 도구입니다. 메뉴에서 NGUI -> Open the Panel tool 을 클릭하면 패널 관리 도구를 열 수 있습니다. 이 옵션을 이용해서 패널이 패널 툴에 표시될 지 여부를 결정할 수 있습니다. |
정리
1장에서는 NGUI를 임포트하고 Widget Tool 즉, UI 마법사를 통해서 하이어라키 뷰에 2D UI를 생성하고,
NGUI에서 핵심적인 역할을 하는 주요 컴포넌트 들에 대해서 알아 보았습니다. 각 컴포넌트들의 역할을 간략히 정리하면 다음과 같습니다.
- UIRoot는 NGUI의 기본 컴포넌트로서 UI를 전체적으로 묶어주며 Flexible, Constrained 모드에 따라서 UI 화면의 크기를 조절하는 역할을 합니다.
- UICamera는 UI를 화면에 보여주는 역할을 하고, UI 위젯과의 이벤트처리를 담당하는 역할을 합니다.
- UIPanel은 하위에 위치한 UI 위젯들을 하나의 드로우 콜로 관리하여 렌더링하는 역할을 합니다. 또한 클리핑 기능을 이용하면 패널 영역을 벗어난 UI 위젯을 화면에 그리지 않도록 설정할 수 있습니다.
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
