👱‍♀️ ansohxxn

👱‍♀️ ansohxxn

개인적인 필기 노트

Unity Chapter 10-1. UGUI : 캔버스, RectTransform, 앵커, 피벗, 포지션

Date:     Updated:

카테고리:

태그:

인프런에 있는 이제민님의 레트로의 유니티 C# 게임 프로그래밍 에센스 강의를 듣고 정리한 필기입니다. 😀
🌜 [레트로의 유니티 C# 게임 프로그래밍 에센스] 강의 들으러 가기!


Chapter 10. UGUI


🔔 UGUI란?

유니티 공식 UI 시스템

  • UI요소를 게임 오브젝트를 게임 오브젝트 & 컴포넌트처럼 다루고 편집한다.

NGUI vs UGUI

  • NGUI
    • UGUI 이전에 있었다.
    • 공식 플러그인이 아님
  • 신규 프로젝트를 사용할 땐 UGUI를 사용해야 한다.


🔔 캔버스

Canvas : 모든 UI 오브젝트들을 쥐고 있는 스크린

  • UI 요소를 만들면 캔버스도 같이 만들어진다.
  • UI 편집은 Scene창에서 2D로 해주면 더 편하게 할 수 있다.

image

캔버스의 역할

  • 캔버스가 엄청 큰 것을 알 수 있다!
    • 왜냐면 캔버스는 게임 세상 좌표계를 쓰지 않고 ⭐유저의 게임 화면(게임창)에 대응⭐하기 때문.
      • 캔버스의 1px = 유니티 게임 월드에서 1m
      • 캔버스의 가로 세로 크기는 게임 화면 해상도와 같다.
  • 캔버스는 모든 UI 요소를 위한 스크린 좌표를 제공한다.
    • ⭐UI 요소들이 배치되기 위한 프레임⭐ 역할.
    • UI 요소들은 캔버스 자식으로 있어야 보일 수 있다.
    • Scene창 내에서 UI 요소들이 캔버스 위에 있어야 게임 화면에 보인다.


캔버스의 Render Mode

  • Screen Space - Overlay
    • 화면 좌표계에 대응한다.
    • UI 요소들이 스크린 상에만 존재하고
    • 모든 3D 오브젝트를 먼저 그린 후에 나중에 UI 요소들이 덮어 씌워지는 방식
    • UI 요소들이 3D 오브젝트 위에 그려져 덮는게 기본적이다.
  • Screen Space - Camera
    • 화면 좌표계에 대응한다.
    • 3D 좌표 상에서의 위치값을 가지게 된다.
      • Renderer Camera 슬롯에 Main Camera를 드래그 앤 드롭해주고
        • Main Camera로부터 Plane Distance 슬롯 값만큼 떨어진 위치에 UI 요소가 그려진다는 의미.
          • 따라서 3D 오브젝트가 UI 요소(캔버스)보다 앞에 오게 배치할 수도 있다.
            • 보통 파티클 효과를 이렇게 UI요소, 즉 캔버스 앞에 배치한다
        • Main Camera를 움직이면 캔버스도 같이 따라 움직이게 된다.
      • image
  • World SPace
    • 아예 게임 세상 3D세상에서 좌표를 가진다. 회전값 위치값 다 가질 수 있음.
      • 즉 UI 요소를 3D 오브젝트 취급함.
      • 따라서 Rect Transform, 즉 캔버스의 게임 세상 좌표를 수정할 수 있음.
      • 마음대로 이동 및 회전 시킬 수 있다.
      • 증강현실 UI를 구현할때 사용. 혹은 바닥이나 표면 위에 UI가 생성되게 할 수 있다.


🔔 RectTransform + 앵커, 피벗, 포지션

  • 앵커(Anchor) : UI 요소의 원점 위치를 정한다.
  • 피벗(Pivot) : UI 요소 내부의 기준점을 정한다.
  • 위치(Pos) : 앵커와 피벗을 기준으로 결정한 실제 좌표.


앵커

image

앵커 : UI 요소의 원점이 될 위치. X, Y 각각 0 ~ 1 사이의 값을 가진다.

부모(캔버스)의 왼쪽 최하단을 (0, 0), 오른쪽 최상단을 (1, 1)이라고 할 때

  • Anchor값이 (0.5, 0.5)라면
    • UI요소의 부모인 캔버스 상에서의 (0.5, 0.5)가 UI의 요소의 (PosX = 0, PosY = 0) 원점이 된다.
    • 이 앵커 좌표를 원점으로 하여 UI의 위치 Position 값이 결정된다.
  • Anchor값이 (1.0, 1.0)라면
    • UI요소의 부모인 캔버스 상에서의 (1.0, 1.0)가 UI의 요소의 (PosX = 0, PosY = 0) 원점이 된다.
    • 이 앵커 좌표를 원점으로 하여 UI의 위치 Position 값이 결정된다.


피벗

image

피봇 : UI 요소의 내부 중에서 기준점이 될 위치 이 기준점을 기준으로 위치, 크기, 회전 등등이 변경된다. X, Y 각각 0 ~ 1 사이의 값을 가진다.

UI 요소(자기 자신)의 왼쪽 최하단을 (0, 0), 오른쪽 최상단을 (1, 1)이라고 할 때

  • Pivot값이 (0.5, 0.5)라면
    • 자기 자신인 UI요소 상에서 (0.5, 0.5)가 UI의 요소의 기준점이 된다.
    • UI요소의 기준점(피봇)을 앵커 좌표에 맞춘 이 점이 UI의 요소의 (PosX = 0, PosY = 0) 원점이 된다.
  • Pivot값이 (1.0, 1.0)라면
    • 자기 자신인 UI요소 상에서 (1.0, 1.0)가 UI의 요소의 기준점이 된다.
    • UI요소의 기준점을 앵커 좌표에 맞춘 이 점이 UI의 요소의 (PosX = 0, PosY = 0) 원점이 된다.
  • 응용
    • image


포지션

  • PosX, PosY
  • UI요소의 기준점을 앵커 좌표에 맞춘 상태가 UI의 요소의 (PosX = 0, PosY = 0) 원점이 된다. 이 원점을 기준으로 한 캔버스 상에서 UI 요소의 좌표.
  • 두 UI요소의 포지션이 같더라도 앵커와 피봇이 다르면 전혀 다른 위치에 있게 된다.
    • 피봇과 앵커에 대해서 상대적으로 결정되기 때문


Rect-Transform

UI는 사각형 판에 배치가 된다.

어떤 UI요소의 앵커, 피봇 값을 다룬다는 것은 캔버스(부모) 상에서 어떻게 배치될까를 결정하는 것이나 마찬가지다.

  • 게임 창의 해상도를 1280 X 720 으로 해주고 UI - Image 를 생성해주고 포지션은 0, 0 원점으로 하였다.
    • 캔버스의 크기가 width = 1280, height = 720 이 된 것을 확인할 수 있다.
    • image
  • 바람개비 같이 삼각형 4개가 있는 마크가 바로 앵커 좌표를 의미한다.
    • 삼각형 하나당 각각 MinX, MixY, MaxX, MaxY를 의미한다.
  • 도넛 모양의 진한 동그라미는 피봇 좌표를 의미한다.


앵커의 Min, Max

  • Min = Max 인 경우
    • 절대값 모드로 동작한다.
  • Min != Max 인 경우
    • 상대값 모드로 동작한다.
1. Min = Max인 경우

image

image

  • 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면
    • Min = Max인 경우 절대값 모드이기 때문에
      • 캔버스의 크기가 변하더라도 UI 요소의 PosX, PosY, Width, Height값은 고정적으로 유지된다.
      • UI 요소의 위치와 크기는 유지 됨.
2. Min != Max 인 경우

image

image

  • 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면
    • Min != Max 인 경우 상대값 모드이기 때문에
      • 캔버스의 크기가 변할 때 UI 요소의 패딩 값 Left, Right, Top, Bottom값은 고정적으로 유지된다.
      • 캔버스의 크기가 변할 때 해당 그림에서 X 는 20 ~ 80%, Y 는 20 ~ 80% 유지하며 캔버스 크기에 맞게 상대적으로 크기와 위치가 변한다.
        • Min != Max 인 경우 PosX, PosY, Width, Height값은 의미가 없다. 패딩에 따라, 캔버스 크기에 따라 크기와 위치가 상대적이기 때문에. 따라서 Rect Transform 에서 없어짐.

패딩 : UI요소가 캔버스 내에서 안쪽으로 밀려들어가 여백을 만드는 정도. 음수면 오히려 늘어나 캔버스를 벗어날 수도 있으며 양수면 밀어낸다. 앵커 값 min과 max가 일치하지 않아 상대값 모드를 사용하는 경우에만 사용할 수 있다.

  • 패딩이 0 이면 min ~ max 에 달하는 범위를 UI 요소가 전부 채우게 됨.
3. X, Y 중 하나는 Min != Max 인 경우

image

image

  • 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면.
    • 위의 그림과 같은 경우 앵커값에 있어 Y는 min = max 하지만 X 는 min != max하다.
      • 수직적으론 PosY, Height는 고정적으로 절대값 모드이지만
      • 수평적으론 Left, Right 패딩값으로 크기와 위치가 결정되는 상대값 모드이다.
    • 캔버스의 크기가 변할 때
      • Y는 고정적이지만
      • X는 20 ~ 80% 비율을 유지하며 캔버스 크기에 맞게 상대적으로 크기와 위치가 변한다.


앵커 프리셋

image

앵커 프리셋 : 유니티에서 제공하는 자주 사용되는 앵커-피봇 유형들.

  • 앵커프리셋
    • 그냥 좌클 선택
      • 앵커 위치만 바꾼다.
      • 즉, UI요소의 원점 위치만 바뀌게 된다.
    • Alt + 좌클 선택
      • 앵커 위치와 함께 실제 UI 요소의 위치도 그쪽으로 바뀐다.
      • 즉, UI 요소의 원점 위치가 바뀜과 동시에 UI 요소도 원점으로 이동
    • Shift + 좌클 선택
      • 앵커 위치와 함께 UI 요소의 피봇(기준점)도 그쪽으로 바뀐다.
      • 즉, UI 요소의 원점 위치가 바뀜과 동시에 UI 요소의 피봇(기준점)도 그쪽으로 이동
    • Alt + Shift + 좌클 선택
      • 앵커 + 피봇 + 실제 UI 요소의 위치 모두 다 그쪽으로 옮김
    • stretch
      • 쫙 펴진 상태
        • min != max 를 가지고 있다.
          • stretch - stretch는 X, Y 둘 다 min != max
        • 역시 위와 같이 Alt, Shift, 혹은 그냥 좌클의 조합으로 선택할 수 있다.


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기


댓글남기기

참고