Unity C# > UI 캔버스

Date:     Updated:

카테고리:

태그:


캔버스 특징

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

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


image

Canvas

Renderer Mode

렌더러 모드별 기능 참고 블로그 👉 https://hkn10004.tistory.com/34 정리 잘 해놓으신 것 같다.

        Canvas canvas = GetComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay; // 캔버스의 Render Mode를 Overlay 모드로 세팅!

캔버스 내에서의 모든 UI 요소들은 렌더링 순서가 Hierarchy 에서의 순서를 따른다. (일반 3D 오브젝트들은 그냥 카메라가 보는 기준에 따라.)

image

  • Screen Space - Overlay
    • 화면 좌표계에 대응한다.
    • 캔버스를 처음에 생성하면 크기가 아주 큰데 이 Overlay 모드라서 그렇다.
      • 캔버스를 찍는 화면과 게임 세상을 찍는 화면이 별개다.
      • Main Camera 같은 카메라 오브젝트를 통해 게임 세상을 먼저 렌더링 한 후 그 위에 캔버스를 렌더링 하는 방식이다.
    • UI 요소들이 스크린 상에만 존재하고 모든 3D 오브젝트를 먼저 그린 후에 나중에 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가 생성되게 할 때 사용한다.
  • 렌더링은 씬의 다른 3D 오브젝트들 처럼 Transform 값에 따라 카메라 가 보는 기준으로 렌더링 된다.
    • 모든 3D 오브젝트들 위에 그려지고나서 그려지는 Overlay 와 달리.

image

  • Sort Layer
    • 같은 씬 내의 다른 Render 들과 비교했을 때의 캔버스의 렌더 순서를 관리한다.
      • Z 좌표와 관계없이 렌더링 순서를 제어 할 수 있게 된다.
    • Raycast 에 쓰는 그 Layer 와는 전혀 다르다!!
    • 같은 Sort Layer 끼리는 같은 Render 순서를 가진다.
    • 작은 값을 가지는 Sort Layer 에 속한 오브젝트들일 수록 먼저 그려지고, 큰 값을 가지는 SOrt Layer 에 속한 오브젝트일 수록 나중에 그려지기 떄문에 덮어 씌워져 그려지게 된다.
      • 즉, 레이어 목록에서 위에 있는 것일 수록 작은 값
  • Order in Layer
    • 동일한 Sort Layer 내에서의 순서! 마찬가지로 작은 값일 수록 같은 Sort Layer 에 속한 오브젝트들 중에서도 먼저 그려지고 큰 값이면 반대.
  • 위 사진을 예로 들자면 “default” 라는 이름의 Sort Layer 에 속한 오브젝트들 중에서도 0 번째, 즉 가장 먼저 그려짐.

World Space 렌더링 참고 https://answers.unity.com/questions/878667/world-space-canvas-on-top-of-everything.html

        canvas.overrideSorting = true; // 캔버스 안에 캔버스 중첩 경우 (부모 캔버스가 어떤 값을 가지던 나는 내 오더값을 가지려 할때)

        if (sort)
        {
            canvas.sortingOrder = _order;
            _order++;
        }
        else // soring 요청 X 라는 소리는 팝업이 아닌 일반 고정 UI
        {
            canvas.sortingOrder = 0;
        }


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 광선을 쏴준다. 충돌 처리.

  • Ignore Reversed Grphics
    • Y축 기준으로 180도 회전하여 완전히 뒤집어져 있는 UI들도 Raycast를 받을 수 있는지에 대한 여부
    • 체크 해제해놓으면 180도 뒤집어진 이 캔버스 산하의 UI들은 Raycast를 받을 수 없다. 그런줄도 모르고.. 기존에 존재하던 화살표 모양의 버튼 UI 복사해서 뒤집었는데 버튼을 아무리 클릭해도 눌려지지 않는 것이였다.. 이 문제였다! 체크 하면 이렇게 뒤집혀서 원래의 표면이 바닥으로 가게된 오브젝트들도 Raycast를 받을 수 있게 된다.


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


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

맨 위로 이동하기

UnityDocs 카테고리 내 다른 글 보러가기

댓글 남기기