디지털/Unity

[Unity] 2D Sprite & Image 랜더링 우선순위 설정

GaGil 2025. 3. 6. 08:00


유니티 2D SPrite와 Image 사용에는 각각의 장단점이 있다. (다음에 정리)
대략 정지된 오브젝트는 Image, 무브가 많은 오브젝트는 Sprite 사용하는 게 유리.

 

< 2D Sprite & Image 랜더링 우선순위 설정 >


 
1. Camera 설정

 
* Clear flage : 빈 배경을 어떻게 처리할 것인지 선택
- Sky Box (스카이박스)
- Solid Box (단색)
- depth only (calling mask 속성에서 지정된 Layer, 이외의 영역 투명처리)

* Culling mask : 해당 레이어 랜더링
* Projection : orthographic (직각 투영으로 원근법이 없는 2D 화면에서 주로 사용. 멀리 있어도 크기 변화 X)
* Depth : 랜더링 우선순위 (랜더링 우선순위 영향력 1위, 수치가 높을수록 먼저 랜더링)
* Target Texture : 카메라 뷰의 출력을 담을 Render Texture에 대한 레퍼런스. 이 레퍼런스를 설정하면 카메라의 화면 렌더링 성능이 비활성화.
 
 
2. Canvas_Image, Sprite 랜더링 우선순위 설정

 
Canvas > Render Mode > Screen Space - Overlay ]

이 렌더 모드에서는 UI 요소가 화면에서 씬의 위에 렌더링. 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기 변경
 
카메라가 없어도  UI 렌더링 가능.
Canvas Image만 상호작용하기 때문에 Sprite 이미지는 상호작용 하지 않는다.
같은 위치에 두고 카메라를 별도로 설치하지 않으면 Scene에서는 Canvas Image, Sprite  이미지 모두 보인다.
화면에 두 이미지가 겹칠 경우 Sprite는 투명 처리되어 각도에 따라 안보여질 수도 있다.
하지만 Game 화면에서 Sprite 이미지는 나오지 않음.
Canvas 안 Image UI 렌더링 순서는 Canvas 내의 리스트 순서 아래로 배치될수록 위로 올라간다.

 

[img 나중에]

 
★ Sprite 이미지 사용방법
 

1. Project에서 Create > Render Texture 생성 > 이미지가 보일 위치 크기 조절 
2. Canvas Image > 기존 Imgae 삭제 후 Raw Image 추가 > Texture에 1번 Render Texture 연결
3. Hierarchy에서 Camera 생성 후 보여할 Sprite 이미지 or 애니메이션  잘 보이게 화면 조절>
4. Camera Inspector > Target Txeture에 1번 Render Texture 연결
 
※ 주의사항 : 3번 Camera와 Sprite 이미지는 최 상단에 위치해야 한다. 화면비에 따라 변동되는 UI 프리펩 안에 카메라가 위치하면 화면비에 따라 같이 카메라도 변동되어 이미지 위치, 크기가 화면비마다 다르게 적용됨
 
- Raw Image : Raw Image 컨트롤은 사용자에게 상호작용하지 않는 이미지를 표시. 장식, 아이콘 등에 사용할 수 있으며, 스크립트의 이미지를 변경하여 다른 컨트롤의 변경 사항을 반영하도록 만들 수 있다. 이 컨트롤은 이미지 컨트롤과 유사하지만, 이미지를 애니메이션 화하고 컨트롤 사각형을 정확하게 채울 수 있도록 더 많은 옵션을 제공한다. 하지만, 이 컨트롤을 사용하려면 텍스처가 스프라이트여야 하고, 로우 이미지 컨트롤은 모든 텍스처를 사용할 수 있다.
 
- Render Texture : 런타임에서 생성 및 갱신되는 특수한 Texture. Camera가 비추고 있는 화면을 Texture화 할 수 있다.
 

[img 나중에]

 
 
[Canvas > Render Mode > Screen Space - Camera]

Screen Space - Overlay와 유사 하지만 Canvas가 지정된 Camera 앞에서 지정된 거리에 배치. UI 요소는 이 카메라에 의해 렌더링. 즉, 카메라 설정이 UI 모양에 영향을 준다. 카메라가 Perspective로 설정된 경우 UI 요소는 원근감으로 렌더링 되며 원근 왜곡 정도는 카메라 시야각으로 제어할 수 있다. 화면의 크기가 조정되거나 해상도가 변경되거나 카메라 절두체가 변경되면 캔버스도 이에 맞춰 자동으로 크기를 변경한다.

 
하나의 카메라를 통해 Canvas_Image, sprite 랜더링 우선순위 설정 가능

 

 
Canvas_Image와 Sprite 랜더링 우선순위 영향은 Sortign Layer, Order in Layer 2가지.
 
* Sorting Layer : 그룹화, 아래 위치할수록 먼저 랜더링. (Add Sorting Layer... 에서 그룹 추가 or 우선순위 수정 가능.)
Order in Layer 보다 Sorting Layer 기준에 맞춰 먼저 랜더링. (랜더링 우선순위 영향력 2번째)
 
* Order in Layer : 0 이상 숫자로 수치 지정. 높은 숫자가 먼저 랜더링.
 
 [Sprite Ani : 똑같이 적용]
 

 
ps. 투명 처리된 영역으로 애니가 지나가면 잔상 나타남.
 
 
[2D paticle : 똑같이 적용] 

 
* Particle System _ Renderer에 Sorting Layer ID, Order in Layer 
* Particle Img _ Texture Type : Sprite (2D and UI), SPrite Mode : Single or Multipel 

 
 
[Canvas > Render Mode > Screen Space - Camera]

이 렌더 모드에서는 캔버스는 씬에 있는 다른 오브젝트처럼 동작. 캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링 된다. 이 방식은 월드의 일부를 이루도록 의도된 UI에 유용. 

반응형