UGUI란?
UGUI는 Unity Graphic User Interface 의 약자입니다.
유니티 에디터상에서 UI를 만들어 줄 수 있게 유니티에서 제공해주는 것이며.
기존에는 NGUI라는 유료에셋을 사용하였습니다.
Canvas?
Canvas는 게임화면에 대응합니다. 게임뷰의 해상도를 1280 x 1024라고 지정을 해놓고 작업을 한다고 생각하면
Canvas에서 RectTransform 에 있는 Width와 Height 가 각각 1280 * 1024로 되어 있습니다.
1:1 비율로 플레이어의 화면에 따라 대응하게 됩니다.
Canvas의 Render Mode
- Screen Space - Overlay : 화면 좌표계에 대응하고 UI들이 스크린상에서만 존재하면서 모든 3D 오브젝드들이 그려진 다음에 마지막 UI요소를 덮어 쓰는 방식입니다.
- Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
- Sort Order : Canvas의 정렬 순서이다. 숫자가 작을 수록 먼저 렌더링 된다.
- Target Display : 다중 모니터를 사용할 경우 표시할 모니터를 지정한다.
- Screen Space - Camera : 기본적으로 화면 좌표계에 대응하고 3D 좌표 상에서의 위치를 가지게 됩니다. 카메라를 기준으로 거리에 따라 떨어져있게 되기도 합니다.
- Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
- Render Camera : Canvas 를 비출 카메라를 지정한다.
- Plance Distance : 카메라로 부터 거리를 지정한다. 크기는 카메라 영역에 꽉 차게 조절된다.
- Sorting Layer : 정렬 레이어를 지정한다.
- Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다.
- World Space : 일반적으로 카메라는 Canvas 를 렌더링 하진 않지만 Canvas 컴포넌트에서 지정된 카메라는 Canvas 를 렌더링한다. 보통 증강현실 또는 가상현실의 UI를 작업할 때 사용되며 World Space로 설정하게 되면 Canvas 도 하나의 3D 오브젝트가 될 수 있다. 위 두가지 방식 중 하나는 좌표를 가질 수 없고, 스크린 상에서만 UI를 그릴 수 있게 하는 방식이고, 하나는 카메라에 따라 Canvas가 달라지는 반면에, World Space는 하나의 3D 오브젝트가 되기 때문에 좌표만 지정해놓고, 큐브위에 올려 놓을 수도 있습니다.
- Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
- Event Camera : Canvas를 비출 카메라를 지정한다.
- Sorting Layer : 정렬 레이어를 지정한다.
- Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다.
Canvas Scaler
UI Scale Mode 속성 Canvas 에서 UI요소가 스케일 되는 방법을 결정합니다.
- Constant Pixel Size : UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다.
- Scale With Screen Size : 화면이 커질수록 UI요소도 커지는 상태. 즉, 화면 비율에 따라서 UI도 맞춰진다.
- Constant Physical Size : 화면 크기와 해상도에 관계없이 UI요소가 동일한 물리적인 크기로 유지되는 상태
Constant Pixel Size
- Scale Factor : Canvas의 모든 UI 요소를 이 배율로 스케일한다.
- Reference Pixels Per Unit : 스프라이트에 이 'Pixel Per Unit' 설정이 적용된 경우 스프라이트 1픽셀이 UI의 유닛 하나에 해당한다.
Scale With Screen Size
- Reference Resolution : UI 레이아웃에 적합한 해상도로 화면 해상도가 크면 UI더 크게 되고 작으면 작게 보여짐.
- Screen Match Mode : 현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 Canvas영역을 스케일하는데 사용
- Match Width of Height : Canvas 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일 하거나 그 사이로 스케일
- Expand : Canvas 크기가 레퍼런스보다 더 작아지지 않도록 Canvas 영역을 수평 또는 수직으로 확장합니다.
- Shrink : Canvas 크기가 레퍼런스보다 커지지 않도록 수평 또는 수직으로 자릅니다.
- Match : 스케일링 레퍼런스로 너비 또는 높이를 사용할 지, 아니면 둘 사이의 배합을 사용할 지 결정합니다.
- Reference Pixels Per Unit : 스프라이트에 'Pixel Per Unity' 설정이 적용된 경우 스프라이트의 1 픽셀이 UI의 유닛 하나에 해당합니다.
Constant Physical SIze
- Physical Unit : 현재 디스플레이으 길이를 계산한 실제 단위를 사용한다.
- Fallback Screen DPI : 화면 DPI를 알 수 없는 경우 가정되는 DPI이다.
- Default Sprite DPI : 'Pixel Per Unit'설정이 'Reference Pixels Per Unit' 설정과 일치하는 스프라이트에 사용할 인치당 픽셀(DPI)이다.
- Reference Pixels Per Unit : 스프라이트에 'Pixels Per Unit'설정이 있는 경우 DPI는 'Default Sprite DPI' 설정과 일치한다.
Canvas Scaler 에서 가장 많이 사용되는 방법은 Scale With Screen Size 입니다. 왜냐하면 스마트폰의 기기들의 화면 비율들이 각각 다르기 때문입니다.
Graphic Raycaster
Canvas 의 모든 Graphic를 감시하여 그 중 하나에 충돌하였는지 여부를 결정합니다.
Graphic Raycaster 를 설정하여 후면 Graphic을 무시하거나 그 앞에 있는 2D 또는 3D 오브젝트에 의해 가져지도록 설정 할 수 있습니다. 이 요소의 처리 순서를 Raycasting의 앞이나 뒤로 변경하고 싶은 경우, 수동으로 우선 순위를 지정 할 수 도 있습니다.
- Ignore Reversed Graphics : Raycaster 가 후면 Graphics를 무시할지 여부입니다.
- Blocked Objects : Graphic Raycast를 막을 오브젝트 타입입니다.
- Blocking Mask : Graphic Raycast를 막을 오브젝트 타입니다.
UI 병목현상
UI 병목현상은 유니티에서 UI가 느리게 렌더링되거나 응답이 늦는 현상을 의미합니다.
이는 사용자가 게임을 플레이하는 동안 사용자 인터페이스가 느려지거나 버벅거리는 원인이 됩니다.
UI 병목현상의 원인은 다양합니다. 예를들어, UI의 개수가 많을 경우 렌더링 속도가 느려지거나, UI요소의 크기가 매우 큰 경우 GPU 메모리 부족으로 인해 렌더링 속도가 느려지거나 렌더링이 제대로 되지 않을 수 있습니다.
또한, UI요소가 복잡한 경우, UI요소 내부의 계층 구조가 깊거나 복잡하건, UI 요소의 애니메이션, 이벤트 처리 등이 불필요하게 많은 경우도 UI병목현상의 원인이 될 수 있습니다.
- GPU 바운드 : Fillrate(오버드로우, 대역폭 이슈)
- Fillrate : 그래픽 카드가 초당 화면에 렌더링 할 수 있는 픽셀의 수를 의미한다.
- CPU 바운드 : DrawCall, Batch
- CPU 바운드 : 캔버스 배치 구축 연산 시간
- CPU 바운드 : 버텍스 생성 시간
- 많은 수의 UI 엘리먼트
Unity UI Optimization
Unity에서 UI 최적화를 위해서는 다음과 같은 몇가지 방법을 고려할 수 있습니다.
- Canvas 크기 조정
- UI 요소가 포함된 Canvas의 크기가 화면크기와 동일하지 않다면, 크기 조정을 통해 불필요한 렌더링을 줄일 수 있습니다.
- UI 요소의 불필요한 애니메이션 제거
- UI 요소에 불필요한 애니메이션을 추가하면 불필요한 계산이 추가됩니다. 또한 UI요소가 이동하는 경우 Canvas가 다시 렌더링 되므로 부하가 발생할 수 있습니다. 따라서, 최소한의 애니메이션만 사용하는 것이 좋습니다.
- Text 요소의 처리
- Text 요소는 UI에서 자주 사용되지만, 폰트와 같은 리소스 크기가 크기때문에 메모리를 많이 사용합니다. 텍스트를 표시할때는 가능한 한 폰트 크기와 스타일을 통합하여 사용하고, 큰 텍스트를 블록을 사용하는 대신 여러 작은 블록으로 분할하여 사용하면 메모리 사용량을 줄일 수 있습니다.
- UI 요소를 최소화
- 불필요한 UI요소를 삭제하면 불필요한 렌더링을 줄일 수 있습니다. 또한 UI 요소의 최소한의 수를 사용하면 화면의 복잡도를 줄일 수 있습니다.
- UI요소의 배치
- UI요소의 배치를 최적화하여 Canvas의 렌더링 효율을 향상시킬 수 있습니다. UI요소를 겹치지 않도록 배치하고,크기가 큰 UI요소 위에 배치하지 않는 등의 방법을 사용할 수 있습니다.
- Texture Atlas 사용
- UI요소에 사용되는 이미지나 아이콘등의 리소스를 Texture Atlas 로 만들어서 사용하면, 메모리 사용량과 렌더링 시간을 줄일 수 있습니다.
- 적절한 기기 성능 대응
- 각 기기의 성능을 고려하여 UI를 최적화 해야합니다. 예를 들어, 모바일 기기에서는 낮은 해상도와 작은 텍스처를 사용하거나, 네이티브 UI를 사용하는 것이 좋습니다.
이러한 방법들을 고려하여 Unity UI 최적화를 수행하면, 게임의 성능을 향상시키고 사용자 경험을 향상시킬 수 있습니다.
'Unity' 카테고리의 다른 글
| [Unity] Occlusion Culling (0) | 2022.12.05 |
|---|---|
| [Unity]Forward, Deferred, Forward+, SSAO (3) | 2022.11.18 |