1. 오늘 배운 것

오늘은 Canvas에 대해서 이것 저것 해보았다.
Unity에서 UI로 작성해야하는 부분들은 대부분이 Canvas 위에 작성해야 한다.
Canvas는 생성하면 Camera에 고정되어 카메라가 보여지는 영역에 UI 기능들이 배치된다.
그런데 막상 UI 배치 보다보면 문제가 생긴다. 가장 큰 문제는 화면의 사이즈에 따라 UI도 동적으로 바뀌면서 비율에 맞게 위치해야 하는데 UI크기는 고정인 상태로 화면 사이즈만 변하는 문제가 발생하기도 한다.
그래서 완벽하게 UI 요소들이 화면 크기에 맞게 유동적으로 변경 되게 하기 위해 여러가지 테스트도 해보고 학습도 하게 되었다.

여러개의 포스트로 나눠서 작성해 본다.

• Canvas
• Canvas Scaler
• Graphic Raycaster

2. Canvas

Canvas를 생성하게 되면 EventSystem이 함께 생성이 된다.
이유는 Canvas는 메시징 시스템을 돕기위해 EventSystem 오브젝트를 사용하게 된다. 예를 들면 사용자가 Canvas에 정의된 UI요소에 Action을 취할때 이벤트가 발생하는데 이 이벤트를 EventSystem이 이벤트에 대한 정보를 대신 처리해주기 때문이다.

Render Mode

• Screen Space - Overlay
  Overlay 로 Render Mode를 사용하게 되면 UI 요소가 화면에서 Scene 위에 렌더링 된다. 그래서 스크린의 크기가 조절되거나 해상도가 변경 되면 Canvas는 여기에 맞춰서 자동으로 크기가 변경되는게 특징이다. 게임화면에서 특별하게 변경 되는 건 없다.
  
  화면 크기가 변경되어도 Canvas는 화면크기만큼 크기가 변경된다.
  

• Screen Space - Camera
  Screen Space - Camera 로 Render Mode를 사용하게 되면 Overlay와 유사하지만 특정 카메라의 주어진 거리만큼 앞에 UI 요소가 렌더링 된다.
  
  따라서 카메라 설정이 UI 모습에 영향을 주게 된다.
  
  예를 들면 Camera 에서 Projection을 Perspective 로 설정하면 UI 요소는 원근감 있게 렌더링 된다. Overlay와 마찬가지로 스크린의 크기에 따라 Canvas도 변경 된다.

• World Space
  World Space 로 Render Mode를 사용하게 되면 Canvas는 Scene에 있는 다른 World의 오브젝트 처럼 사용할 수 있게 된다. Canvas는 크기가 고정이 되며, 수동으로 크기를 조절 할 수 있다. 예를 들면 캐릭터의 HP바를 구현하는 경우에 사용 가능 하다.
  

Pixel Perfect

• 정밀도를 위해 UI가 그려질 이미지의 픽셀을 선명하게 표현되도록 해주는 옵션이다.
  
  흐릿하게 보이는 버튼이 Pixel Perfect 옵션으로 조금은 더 선명하게 표현된다.
  
  픽셀을 보정하는 작업을 추가로 하기 때문에 성능 저하의 요인이 될 수 있다. 성능을 우선으로 해야한다면 옵션을 끄는 것이 좋다.

Sort Order

• Sort Order는 UI 요소가 표시될 순서를 정하게 된다. 값이 클 수 록 위에 표시 된다.
  
  Hierarchy 순서상 Button 2가 위에 표시되어야 하지만 Sort Order를 통해 순서가 바뀐것을 알 수 있다.

Target Display

• Camera가 하나가 아닌 2개 이상 일때 Display를 지정해 줄 수 있는데, 마찬가지로 Canvas 또한 Target Display 옵션을 통해 렌더링 하고자 하는 Display를 선택 할 수 있다.
  

Additional Shader Channels

• 해당 옵션은 UI 요소가 복잡한 셰이더나 커스텀 이펙트를 적용하는 경우 추가적인 인자를 받기 위해 사용하게 된다. 각각 설정 옵션은 다음과 같다.

1. TexCoord1 (UV2): 두 번째 텍스처 좌표. 더 복잡한 텍스처링을 위해 사용.
2. Normal: UI 요소의 노멀 벡터. 노멀 매핑과 같은 조명을 처리할 때 필요.
3. Tangent: 탄젠트 벡터. UI 요소에 비율이 다른 조명 효과를 적용하거나 복잡한 셰이더 계산을 할 때 필요.
4. Color: Vertex Color (정점 색상). 셰이더가 정점 색상을 활용해 색을 처리할 수 있음.
   결론적으로 UI에서 셰이더가 처리할 수 있는 추가 속성을 선택해주는 옵션으로, 고급 그래픽 효과를 구현하는데 유용하고 커스텀 셰이더를 적용할때나 성능을 최적화 등에 사용할 수 있다.

Render Camera

• Render 할 카메라를 설정할 경우 대상 카메라에 UI 요소가 렌더링 된다.
  

Plane Distance

• 카메라에 Canvas를 표시할 거리를 조절한다.
  
  UI가 3D 공간에서 어떻게 보일지 정해진다.
  
  특히 카메라와의 거리 및 크기에 영향을 미치는 중요한 설정이다.

Resize Canvas

• 이 문장은 수동으로 Camera.Render()를 호출할 때, Canvas가 해당 렌더링 타겟의 크기에 맞춰 자동으로 크기를 조정해야 하는지 여부를 설정 하는 옵션이다. 이 기능을 활성화하면, 캔버스가 수동 렌더링 시 렌더링 타겟의 해상도나 크기에 맞춰 적절하게 조정된다.

Event Camera

• World Space 모드에서 UI 요소와 상호작용할 때 사용할 카메라를 지정하는 옵션이다. 지정된 카메라는 UI 이벤트를 감지하고 처리하느 역할을 하고 UI가 3D 환경 내에서 작동하는 경우 필수적인 설정이다.

Vertex Color Always In Gamma Color Space

• 해당 옵션은 정점 색상(Vertex Color)이 항상 감마 색상 공간에서 처리되도록 강제하는 설정이다. 이를 통해 Linear Color Space에서도 감마 색상 공간에서 계산된 색상을 사용할 수 있어, 예상치 못한 색상 왜곡을 방지하고 일관된 색상 표현을 유지할 수 있다.
  
  이 옵션은 경고가 있는데 경고는 다음과 같이 해석할 수 있다.
  "정점 색상을 감마 공간에서 유지하여 UI 셰이더에서 감마에서 선형 색상 공간으로 변환이 이루어지도록 합니다. 이를 통해 선형 색상 공간에서 UI 색상의 정확도가 향상됩니다."

여기까지가 Canvas에 대한 기능들이다. 다음 포스트에서는 Canvas Scaler에 대해 알아보자!