UGUI. Rect Transform

PAVDUP·2024년 2월 17일
0

기본 개념 설명

  • Rect Transform : Unity 에서 UI 를 표현하기 위해 사용하는 특별한 Transform! 일반적인 Transform 이 가지는 특징 (Position, Rotation, Scale) 에 더해, Anchor, Pivot 등 특징이 더 존재. (Debug - Code, Normal - Inspector 에 따라 특징을 달리 볼 수 있는데, 이는 추후 더 자세히 서술.)

  • Pivot : UI GameObject (Rect Transform 를 포함하는 GameObject) 의 중심. Position, Rotation, Scale 의 중심으로서 기능함.

  • Anchor : Rect Transform 의 주요 특징. Rect Tranform 에서 사용하는 Layout 개념. Rect Transform 내 Position 과 Size 의 표현에 중점(Center Point)이 되는 네 가지 점을 의미함. 이에 대해서는 추가 서술.

Anchor

  • Rect Transform 내 Position 과 Size 의 표현에 중점(Center Point)이 되는 네 가지 점을 의미. 이를 도식화하자면 다음과 같음.

  1. 각 네 가지 점은 부모 UI Object 의 Rect Transform 의 전체 크기(Size)를 0 - 1 사이의 값으로 치환한 XY Vector 인 Min / Max 로 표현.

    • UI Elements 는 Rect Transform 을 기반으로 사각형으로 표시되기 때문에, 부모 Object 의 Rect Transform 이 Min / Max 두 가지 점으로 표현하는 것이 가능함.
    • Example
      - 이 사진의 Panel Object 의 Anchors 는 Min / Max 가 (0, 0) / (1, 1) 의 값을 가짐. 이를 통해, 해당 Anchors 의 각 Point 가 Course_Container UI Object 의 Rect Transform 이 가진 Size 와 동일한 위치에 표시된 것을 확인할 수 있음.

  2. Min / Max XY Vector 값에 따라 Anchor 는 점(Min / Max 의 XY 값 동일), 선(Min / Max 의 XY 값 중 하나만 동일), 면(Min / Max 의 XY 값 둘 다 다름) 중 하나를 이를 수 있음.

    • Inspector 에선 Anchor의 Min, Max "X" / "Y" 값이 동일할 경우, "Pos + Width / Height" 로 표시. "X" / "Y" 가 각각 다를 경우, "Left, Right" / "Top, Bottom" 으로 표시.
      - Left, Right" / "Top, Bottom : 안이면 +, 밖이면 -
      - Pos : 오른 쪽, 위 쪽 +, 왼쪽 아래래 쪽 - (일반적 기준)

    1. Example - 점

    2. Example - 선 !

    3. Example - 면

  1. Anchors 의 위치에 따라 표현되는 점 - 선 - 면은 부모 Object 의 Size 를 0 - 1 사이 값을 기준으로 치환한 것이기 때문에, 부모 Object 의 Size 가 변함에 따라 Anchor의 위치가 가변함. (Min / Max 값이 바뀌지 않는다 하더라도)

  2. Anchors 가 선, 면을 이루는 경우, Anchors 를 기준으로 표현되는 Object 의 크기는 Anchors 가 이루는 선, 면에서 떨어진 Pixel 을 기준으로 Size 가 표현됨. (Normal 버전의 Inspector 에서) 이에 따라, 4번에 의해 Anchors 의 위치가 가변하는 경우, UI Element 의 크기가 작아지거나 커짐.

    • 해당 자료의 "pixel의 기준" 을 확인하면 알 수 있음.

Example

  • 1번 - 기존 상태

  • 2번 - 늘어난 상태

  • 단, 해당 상태에선 Min / Max 의 Y 값이 동일함을 알 수 있음. 이 경우, Y 는 Y pos + height 로 표현되므로, 부모 UI Object 의 위 아래 크기(Size) = 높이를 늘린다해서, 변하지 않음.

Anchor in Debug and Coding

Normal vs Debug

  • Normal : 부모 Object 의 Rect Transform / Layout(Anchors) / Position 혹은 Size 를 나타내는 Pixel 이 영향을 주고 받음.
    1. 부모 Rect Transform 변화 => Anchor : 값이 고정되어 있으나, 0 - 1 로 치환된 값이므로, Anchor 의 실질 위치가 변함.
    2. Layout(Anchors) 변화 => UI Elements Pixel : Layout 혹은 Anchor 를 변경하여도, 동일한 모양 고정. 단, Pixel 만 변화.

  • Debug : Local Position, Rotation, Scale / Anchor Min + Max, Anchored Position, Size Delta, Pivot 이 서로 영향.
    1. 변수들이 독립적으로 기능.
    - ex - Normal 의 경우 : Min, Max 를 변경한다 하더라도, 동일한 모양으로 고정. UI 의 크기 등이 기존과 일치하도록 자동으로 변함. => 위 Normal 에서 명세한 내용대로 동작하도록, 자동으로 UI 의 내부적인 값 조정.
    - Min Max 를 Normal Inspector 에서 적용한 예시.

    		- ex - Debug 의 경우 : Min, Max 값대로만 변경. 다른 내부적인 값이 변경되지 않음. 이에 따라, 독립적인 변수를 조정했을 때 예측 가능한 변경 사항이 반영됨. 
			- Min Max 를 Debug Inspector 에서 적용한 예시. ![](https://velog.velcdn.com/images/hwi7586/post/a77fb667-10a5-44bd-926f-039e14b13791/image.png)

Rect Transform - Debug

Debug Inspector. 즉, Code 상에서 사용하는 Rect Transform 의 값 들에 대해 설명하고자 함.

  • Local Position/Rotation/Scale :
    - Local Position : 부모 Object 의 RectTransfrom 의 중점 (Pivot) 을 기준으로 떨어진 거리.
    - 특이 : Debug Inspector 상에서는 Local Position 을 직접적으로 조정할 수 없음. anchored Position 을 기반으로 동작하기 때문인 것으로 생각 됨. (Q. 코드 상에서는 조절 가능?)
    - Local Rotation / Scale : 부모 object 를 기준으로 만들어진 rotation 및 scale 을 0,0,0 으로서 가지는 rotation 및 scale.

  • Anchor Min, Max : Anchor 가 가지는 Layout 이 어떻게 이뤄져 있는지를 나타내는 값. Size Delta 에 영향을 끼침.

  • Size Delta : Rect Transform Object 의 크기(Size)를 결정하는 변수.
    - (0, 0) 은 Anchor Min / Max 에 따라 설정된 Layout 의 크기와 동일하다는 것을 의미한다.
    - Size Delta 에 값이 들어갈 경우, X 는 좌우 크기가, Y 는 위아래 크기가 커지거나 작아진다.
    - + Pivot 의 의미 : Anchor Min Max 와 Size Delta 를 기반으로 표현된 Rect Transform 의 면적을 (0, 0) (좌측 아래), (1, 1) (우측 위) 로 치환하였을 때, 이 사잇값을 가지는 점. 해당 UI Object 의 중심으로서 기능함.

  • Anchored Position : Anchors 의 위치상 중점으로부터 Pivot (UI GameObject 의 중점)까지의 Pixel 거리이다.
    - Anchors 의 위치상 중점 : Anchor Min / Max 의 중심의 위치.
    - Min / Max 가 (0,0) / (1,1) 일 때, (0.5, 0.5) 에 해당하는 위치.
    - Min / Max 가 (0,0) / (0,0) 일 때, (0, 0) 에 해당하는 위치.
    - ex - Pivot 까지의 Pixel 거리 : 현재 Anchor Min, Max 가 둘 다 (0, 0) 으로 설정되어 있어 좌측 하단이 Anchors 의 위치상 중점임. 이때, Pivot 까지의 Pixel 거리는 1080 임.

  • ex - Pivot 개념 적용 : Pivot 은 UI Object 의 중점이자, Rect Transform 의 면적에 기반한 값. Pivot 을 변경할 경우, Anchored Position 은 Pivot 이 변함에 영향을 받아, UI의 위치가 달라진 것처럼 보인다!

이와 같이 동작하므로, 반응형 UI 및 기타 효과 제작을 위해 Rect Transform 을 사용하는 것은 자명한 것!

  • 단, UGUI 의 Rect Transform 을 정리하면서, 개념이 너무 복잡하게 이뤄진 것이 아닌가 하는 느낌을 받음.
  • 자습서 및 Documentation에도 이러한 내용에 대해 언급하지 않고 있음.
  • UI Toolkit 으로의 전환이 이뤄지는 시점에서, 어떻게 변화하였는지 등을 좀 더 세부적으로. 그리고 React 등에서는 어떻게 이러한 UI 를 쉽게 만들 수 있는 지 등을 살펴보는 경험을 하는 것도 좋겠다고 생각하였음!
profile
PAVDUP
오와우아오왕
이전 포스트

Unity. Post Processing

0개의 댓글