측면 패널

TV 방송 등 화면 좌우에 표시되는 블랙밴드(피라미드 박스)를 말한다.이번에는 UGUI에 사이드 패널과 유사한 UI를 설정하는 방법에 대해 설명합니다.

(화면 좌우에 벨트를 노출하고 거기에 UI를 표시하는 화면을 만드는 방법을 소개한다.)

방법

1. Canvas 설정

장면에서 Canvas를 새로 만들고 [Canvas Screen Mode]의 [UI Scalle Mode]를 Scalle With Screen Size로 설정합니다.
또한 Rederence Resolution을 설정하여 Canvas의 기준 픽셀 수를 결정합니다.(이번에는 1920 x 1080으로 설정)

2. Canvas에 빈 게임 Object 만들기

이름은 적당히'MainPanle'이라고 써야 한다.
작성 후 전체 화면 크기에 맞게 Rect Transform을 조정합니다.

3. MainPanel에서 3개의 빈 GameObject 생성

위에서 "Left""Center""Right"의 이름을 따서 구성합니다.
RectTransform은 초기 값 상태에서 변경하지 않아도 됩니다.

4. 세 객체를 등거리로 배치

MainPanel에 Horizontal Layout Group 구성 요소를 추가합니다.
또한 [Control ChildSize]의 Width 및 Heigh를 확인합니다.

이것을 설정하면 방금 전의 "Left""Center""Right"이 화면에 자동으로 분할되어 설정됩니다.

(Horizontal Layout Group 등을 통해 분할된 구성)

5. Center 패널 크기 무시

이렇게 하면 센터 패널의 영역이 매우 작기 때문에 LayoutElement 구성 요소를 사용하여 크기를 덮어씁니다.
이름이 "Center"인 GameObject에서 Layout Element 구성 요소를 설정하고 "Preferred Width"에서 원하는 폭의 픽셀 수를 선택합니다.
여기서 픽셀 수는 원래 Canvas Sccaller가 설정한 픽셀 수에 따라 달라집니다.

(위의 그림에서 Center Panel의 가로는 1000픽셀로 고정되고 옆면은 460픽셀로 고정됨)

6. Left, Right 패널을 초과하는 요소 방지

UI 요소를 측면 패널에 그대로 두면 객체를 측면 패널에서 벗어나 그려지므로 Mask가 설정됩니다.
Right, Left는 각각 Rect Mask2D 구성 요소를 추가합니다.

7. Left, Right 패널에서 UI 구성

여기까지만 설정하면 Left와 Right 패널에서 각각 필요한 UI 요소를 구성할 수 있습니다.

최후

화면의 폭과 높이가 고정된 상태에서만 이 방법을 시도할 수 있기 때문에 폭과 높이가 가변적인 상황에서는 순조롭게 진행되지 못할 수도 있다.

덤

Layout Element의 매개변수를 동적으로 변경하여 수납, 확장 애니메이션을 만들 수 있습니다.