Unity C# > UI 캔버스
카테고리: UnityDocs
태그: Unity Game Engine
- 유니티 공식 매뉴얼 https://docs.unity3d.com/kr/current/Manual/UnityManual.html
- Scripting Overview http://www.devkorea.co.kr/reference/Documentation/ScriptReference/index.html
캔버스 특징
Canvas 가 있어야 UI 를 게임에서 보이게 할 수 있다. Canvas 위에 UI 요소들을 배치할 수 있다.
- 캔버스는 월드 좌표계를 쓰지 않고, 유저의 게임 화면 즉 카메라 화면 상의 좌표를 쓴다.
- 그래서 월드에서 본 캔버스가 엄~~청 큰 것이다.
- 캔버스의 1px = 유니티 게임 월드에서 1m
- 캔버스의 가로 세로 크기는 게임 화면 해상도와 같다.
- 캔버스는 UI 요소들이 배치되기 위한 프레임
- UI 요소들은 캔버스 자식으로 있어야 보일 수 있다.
- UI 요소들이 캔버스 위에 있어야 게임 화면에 보인다.
- UI 요소들의 렌더링 순서는 Hierarchy 상에서 위에 있는 UI 부터 차례로 렌더링 된다.
- Hierarchy 상에서 위에 위치하는 UI 가 먼저 그려지므로 아래에 위치한 UI 로부터 덮어져 그려질 수 있다.
Canvas
Renderer Mode
렌더러 모드별 기능 참고 블로그 👉 https://hkn10004.tistory.com/34 정리 잘 해놓으신 것 같다.
Canvas canvas = GetComponent<Canvas>();
canvas.renderMode = RenderMode.ScreenSpaceOverlay; // 캔버스의 Render Mode를 Overlay 모드로 세팅!
캔버스 내에서의 모든 UI 요소들은 렌더링 순서가 Hierarchy 에서의 순서를 따른다. (일반 3D 오브젝트들은 그냥 카메라가 보는 기준에 따라.)
- Screen Space - Overlay
- 화면 좌표계에 대응한다.
- 캔버스를 처음에 생성하면 크기가 아주 큰데 이 Overlay 모드라서 그렇다.
- 캔버스를 찍는 화면과 게임 세상을 찍는 화면이 별개다.
Main Camera같은 카메라 오브젝트를 통해 게임 세상을 먼저 렌더링 한 후 그 위에 캔버스를 렌더링 하는 방식이다.
- UI 요소들이 스크린 상에만 존재하고 모든 3D 오브젝트를 먼저 그린 후에 나중에 UI 요소들이 붙어있는 캔버스가 덮어 씌워지는 방식
- 항상 씬에 있는 모~~든 3D 오브젝트들을 다 그리고 나서야 그려지는 캔버스다. 즉 카메라가 찍는 화면 위에 그려져 덮어진다.
- 따라서 캔버스 크기는 고정적이며 변경할 수 없다.
- 항상 전체 화면 위에 렌더링 되기 때문
- Screen Space - Camera
- 캔버스와 카메라의 위치가 동기화 된다.
- 캔버스는 항상 카메라를 따라다니며 카메라 앞에 위치하게 된다.
- 따라서 3D 좌표 상에서의 위치값을 가지게 된다.
- 캔버스가 게임 월드 상에서 카메라 앞에 같이 위치하게 되므로 Terrain 같은 지형이나 다른 오브젝트에 캔버스가 파묻히게 되면 안보이므로 주의하자.
- 캔버스는 항상 카메라를 따라다니며 카메라 앞에 위치하게 된다.
- 화면 좌표계에 대응한다.
- Renderer Camera 슬롯에
Main Camera를 드래그 앤 드롭해준다면Main Camera로부터 Plane Distance 슬롯 값만큼 떨어진 위치에 UI 요소가 그려진다는 의미.- 따라서 캔버스 또한 카메라 오브젝트 앞에 배치를 하므로, 3D 오브젝트가 UI 요소(캔버스)보다 앞에 오게 배치할 수도 있다.
- 보통 파티클 효과를 이렇게 UI요소, 즉 캔버스 앞에 배치한다.
- 따라서 캔버스 또한 카메라 오브젝트 앞에 배치를 하므로, 3D 오브젝트가 UI 요소(캔버스)보다 앞에 오게 배치할 수도 있다.
Main Camera를 움직이면 캔버스도 같이 따라 움직이게 된다.
- Renderer Camera 슬롯에
- Plane Distance
- 캔버스의 카메라로부터의 거리
- Renderer Camera
- 캔버스가 따라다닐 카메라 할당해주기
- 캔버스와 카메라의 위치가 동기화 된다.
카메라가 현재 저 캡슐 오브젝트 머리 위에 위치해 있는데, Screen Space - Camera 모드를 하고 Plane Distance 을 1 로 아주 가깝게 해주니, 캔버스가 카메라 바로 앞에 위치하여 카메라를 계속 따라다니게 된다. 총에 있는 위 네모가 UI 캔버스다
- World Space
- 아예 게임 세상 3D세상에서 좌표를 가진다. 회전값 위치값 다 가질 수 있음.
- 즉 캔버스를 3D 오브젝트 취급하고 배치할 수 있다.
- 따라서 Rect Transform, 즉 캔버스의 게임 세상 좌표를 수정할 수 있음.
- 마음대로 이동 및 회전 시킬 수 있다.
- 증강현실 UI를 구현할때 사용. 혹은 바닥이나 표면 위에 UI가 생성되게 할 때 사용한다.
- 아예 게임 세상 3D세상에서 좌표를 가진다. 회전값 위치값 다 가질 수 있음.
- 렌더링은 씬의 다른 3D 오브젝트들 처럼 Transform 값에 따라 카메라 가 보는 기준으로 렌더링 된다.
- 모든 3D 오브젝트들 위에 그려지고나서 그려지는 Overlay 와 달리.
Sort Layer- 같은 씬 내의 다른 Render 들과 비교했을 때의 캔버스의 렌더 순서를 관리한다.
Z좌표와 관계없이 렌더링 순서를 제어 할 수 있게 된다.
- Raycast 에 쓰는 그 Layer 와는 전혀 다르다!!
- 같은 Sort Layer 끼리는 같은 Render 순서를 가진다.
- 작은 값을 가지는 Sort Layer 에 속한 오브젝트들일 수록 먼저 그려지고, 큰 값을 가지는 SOrt Layer 에 속한 오브젝트일 수록 나중에 그려지기 떄문에 덮어 씌워져 그려지게 된다.
- 즉, 레이어 목록에서 위에 있는 것일 수록 작은 값
- 같은 씬 내의 다른 Render 들과 비교했을 때의 캔버스의 렌더 순서를 관리한다.
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) : 앵커와 피벗을 기준으로 결정한 실제 좌표.
앵커
앵커: 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 값이 결정된다.
피벗
피봇: 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) 원점이 된다.
- 응용
포지션
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 이 된 것을 확인할 수 있다.
- 바람개비 같이 삼각형 4개가 있는 마크가 바로
앵커 좌표를 의미한다.- 삼각형 하나당 각각 MinX, MixY, MaxX, MaxY를 의미한다.
- 도넛 모양의 진한 동그라미는
피봇 좌표를 의미한다.
앵커의 Min, Max
Min = Max인 경우- 절대값 모드로 동작한다.
Min != Max인 경우- 상대값 모드로 동작한다.
1. Min = Max인 경우
- 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면
Min = Max인 경우 절대값 모드이기 때문에- 캔버스의 크기가 변하더라도 UI 요소의
PosX,PosY,Width,Height값은 고정적으로 유지된다. - UI 요소의 위치와 크기는 유지 됨.
- 캔버스의 크기가 변하더라도 UI 요소의
2. Min != Max 인 경우
- 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면
Min != Max인 경우 상대값 모드이기 때문에- 캔버스의 크기가 변할 때 UI 요소의 패딩 값
Left,Right,Top,Bottom값은 고정적으로 유지된다. - 캔버스의 크기가 변할 때 해당 그림에서 X 는 20 ~ 80%, Y 는 20 ~ 80% 유지하며 캔버스 크기에 맞게 상대적으로 크기와 위치가 변한다.
Min != Max인 경우PosX,PosY,Width,Height값은 의미가 없다. 패딩에 따라, 캔버스 크기에 따라 크기와 위치가 상대적이기 때문에. 따라서 Rect Transform 에서 없어짐.
- 캔버스의 크기가 변할 때 UI 요소의 패딩 값
패딩: UI요소가 캔버스 내에서 안쪽으로 밀려들어가 여백을 만드는 정도. 음수면 오히려 늘어나 캔버스를 벗어날 수도 있으며 양수면 밀어낸다. 앵커 값 min과 max가 일치하지 않아 상대값 모드를 사용하는 경우에만 사용할 수 있다.
- 패딩이 0 이면 min ~ max 에 달하는 범위를 UI 요소가 전부 채우게 됨.
3. X, Y 중 하나는 Min != Max 인 경우
- 만약 캔버스의 렌더 모드가 World Space여서 캔버스의 크기를 줄였다 늘렸다 할 수 있다면.
- 위의 그림과 같은 경우 앵커값에 있어 Y는 min = max 하지만 X 는 min != max하다.
- 수직적으론 PosY, Height는 고정적으로 절대값 모드이지만
- 수평적으론 Left, Right 패딩값으로 크기와 위치가 결정되는 상대값 모드이다.
- 캔버스의 크기가 변할 때
- Y는 고정적이지만
- X는 20 ~ 80% 비율을 유지하며 캔버스 크기에 맞게 상대적으로 크기와 위치가 변한다.
- 위의 그림과 같은 경우 앵커값에 있어 Y는 min = max 하지만 X 는 min != max하다.
앵커 프리셋
앵커 프리셋 : 유니티에서 제공하는 자주 사용되는 앵커-피봇 유형들.
- 앵커프리셋
- 그냥 좌클 선택
- 앵커 위치만 바꾼다.
- 즉, UI요소의 원점 위치만 바뀌게 된다.
- Alt + 좌클 선택
- 앵커 위치와 함께 실제 UI 요소의 위치도 그쪽으로 바뀐다.
- 즉, UI 요소의 원점 위치가 바뀜과 동시에 UI 요소도 원점으로 이동
- Shift + 좌클 선택
- 앵커 위치와 함께 UI 요소의 피봇(기준점)도 그쪽으로 바뀐다.
- 즉, UI 요소의 원점 위치가 바뀜과 동시에 UI 요소의 피봇(기준점)도 그쪽으로 이동
- Alt + Shift + 좌클 선택
- 앵커 + 피봇 + 실제 UI 요소의 위치 모두 다 그쪽으로 옮김
stretch- 쫙 펴진 상태
min != max를 가지고 있다.- stretch - stretch는 X, Y 둘 다
min != max
- stretch - stretch는 X, Y 둘 다
- 역시 위와 같이 Alt, Shift, 혹은 그냥 좌클의 조합으로 선택할 수 있다.
- 쫙 펴진 상태
- 그냥 좌클 선택
🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄
댓글 남기기