👱‍♀️ ansohxxn

👱‍♀️ ansohxxn

개인적인 필기 노트

Unity C# > UI 캔버스

Date:     Updated:

카테고리:

태그:


캔버스 특징

Canvas 가 있어야 UI 를 게임에서 보이게 할 수 있다. Canvas 위에 UI 요소들을 배치할 수 있다.

  • 캔버스는 월드 좌표계를 쓰지 않고, 유저의 게임 화면 즉 카메라 화면 상의 좌표를 쓴다.
    • 그래서 월드에서 본 캔버스가 엄~~청 큰 것이다.
    • 캔버스의 1px = 유니티 게임 월드에서 1m
    • 캔버스의 가로 세로 크기는 게임 화면 해상도와 같다.
  • 캔버스는 UI 요소들이 배치되기 위한 프레임
    • UI 요소들은 캔버스 자식으로 있어야 보일 수 있다.
    • UI 요소들이 캔버스 위에 있어야 게임 화면에 보인다.
  • UI 요소들의 렌더링 순서는 Hierarchy 상에서 위에 있는 UI 부터 차례로 렌더링 된다.
    • Hierarchy 상에서 위에 위치하는 UI 가 먼저 그려지므로 아래에 위치한 UI 로부터 덮어져 그려질 수 있다.


image

Canvas

Renderer Mode

image

  • Screen Space - Overlay
    • 화면 좌표계에 대응한다.
    • 캔버스를 처음에 생성하면 크기가 아주 큰데 이 Overlay 모드라서 그렇다.
      • 캔버스를 찍는 화면과 게임 세상을 찍는 화면이 별개다.
      • Main Camera 같은 카메라 오브젝트를 통해 게임 세상을 먼저 렌더링 한 후 그 위에 캔버스를 렌더링 하는 방식이다.
    • UI 요소들이 스크린 상에만 존재하고 모든 3D 오브젝트를 먼저 그린 후에 나중에 UI 요소들이 붙어있는 캔버스가 덮어 씌워지는 방식
    • 모 ~~ 든 UI 요소들이 항상 3D 오브젝트 위에, 즉 카메라가 찍는 화면 위에 그려져 덮어진다.
    • 따라서 캔버스 크기는 고정적이며 변경할 수 없다.


image

  • Screen Space - Camera
    • 캔버스와 카메라의 위치가 동기화 된다.
      • 캔버스는 항상 카메라를 따라다니며 카메라 앞에 위치하게 된다.
        • 따라서 3D 좌표 상에서의 위치값을 가지게 된다.
        • 캔버스가 게임 월드 상에서 카메라 앞에 같이 위치하게 되므로 Terrain 같은 지형이나 다른 오브젝트에 캔버스가 파묻히게 되면 안보이므로 주의하자.
    • 화면 좌표계에 대응한다.
      • Renderer Camera 슬롯에 Main Camera를 드래그 앤 드롭해준다면
        • Main Camera로부터 Plane Distance 슬롯 값만큼 떨어진 위치에 UI 요소가 그려진다는 의미.
          • 따라서 캔버스 또한 카메라 오브젝트 앞에 배치를 하므로, 3D 오브젝트가 UI 요소(캔버스)보다 앞에 오게 배치할 수도 있다.
            • 보통 파티클 효과를 이렇게 UI요소, 즉 캔버스 앞에 배치한다.
        • Main Camera를 움직이면 캔버스도 같이 따라 움직이게 된다.
      • image
    • Plane Distance
      • 캔버스의 카메라로부터의 거리
    • Renderer Camera
      • 캔버스가 따라다닐 카메라 할당해주기

image

카메라가 현재 저 캡슐 오브젝트 머리 위에 위치해 있는데, Screen Space - Camera 모드를 하고 Plane Distance 을 1 로 아주 가깝게 해주니, 캔버스가 카메라 바로 앞에 위치하여 카메라를 계속 따라다니게 된다. 총에 있는 위 네모가 UI 캔버스다


image

  • World SPace
    • 아예 게임 세상 3D세상에서 좌표를 가진다. 회전값 위치값 다 가질 수 있음.
      • 즉 캔버스를 3D 오브젝트 취급하고 배치할 수 있다.
      • 따라서 Rect Transform, 즉 캔버스의 게임 세상 좌표를 수정할 수 있음.
      • 마음대로 이동 및 회전 시킬 수 있다.
      • 증강현실 UI를 구현할때 사용. 혹은 바닥이나 표면 위에 UI가 생성되게 할 때 사용한다.


Canvas Scaler

캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어. 캔버스 위에 있는 전체 모든 UI 요소에 영향을 미친다.

UI Scale Mode

  • Constant Pixel Size
    • UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지됩니다.
    • UI 요소의 크기가 변경이 안됨
    • 해상도 크기에 상관 없이 UI 요소의 크기는 고정되기 때문에 높은 해상도에서는 UI가 작게 보이는 문제가 생길 수 있음.
  • Scale With Screen Size
    • 화면이 커질수록 UI 요소도 같이 커집니다.
    • 기준이 되는 해상도를 설정하여 그 것에 맞는 UI 요소를 설계하면 게임 실행시 해상도가 변해도 알아서 해상도 크기에 맞게 UI 요소의 크기도 같이 변한다.
    • Reference Resoulution
      • 기준 해상도.
      • UI 레이아웃에 적합한 해상도입니다.
      • 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일됩니다.
    • Match
      • Width, Height 둘 중에서 어느 쪽으로 더 값을 땡기느냐에 따라 가로 세로 중 어느 쪽을 크기 변화시 왜곡하지 않게 할건지를 결정한다.
      • 예를 들어 Height 쪽으로 끝까지 땡겼다면 해상도가 변해서 UI 크기가 바뀌더라도 세로 방향의 UI 크기는 절대 왜곡되지 않는다.
  • Constant Physical Size
    • 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지됩니다.

Reference Pixels Per Unit

  • 스프라이트에 이 ‘Pixels Per Unit’ 설정이 적용된 경우 스프라이트의 1픽셀이 UI의 유닛 하나에 해당합니다.
  • 이 값이 올라갈 수록 고화질이다.
  • 작게 할 수록 마인크래프트 같이 픽셀이 작아져 귀여워진다.


Graphic Raycaster

자식 UI 요소들에게 Ray 광선을 쏴준다. 충돌 처리.


Rect Transform

  • 앵커(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, 혹은 그냥 좌클의 조합으로 선택할 수 있다.


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

맨 위로 이동하기

댓글남기기

참고