2024-04-03
지난 포스팅에서 Box Collider 2D 의 옵션 중 Auto Tiling 에 대해 알아보았다.
Sprite Renderer - Draw Mode 에 따라 달라지는 특징을 찾아보며, 그 중 Tiled 와 Sliced 의 이해를 위해 9-Sliced 이미지를 통해 이해해보았다.

Sprite Renderer

스프라이트를 렌더링하고 씬에 시각적으로 표시되는 방법을 제어

Sprite Renderer 옵션

• Sprite : 렌더링할 스프라이트 텍스처를 정의
• Color : 스프라이트 이미지에 색조를 더하거나 다른 컬러를 적용
• Flip : X - 좌우 반전, Y - 상하 반전
• Draw Mode : 스프라이트 크기가 변경될 때, 스프라이트가 확대 / 축소 되는 방식을 정의
• Order in Layer : 숫자가 낮은 스프라이트가 먼저 렌더링되고, 높은 스프라이트가 그 위에 겹쳐짐

Draw Mode - Simple

크기가 변하면 전체 이미지가 확대 / 축소 되는 방식

Draw Mode - Sliced

스프라이트가 9-Sliced 인 경우

• Size : 9-Sliced 스프라이트를 확대 / 축소할 수 있도록 너비와 높이를 지정

( 스프라이트 텍스처 중 A,C,G,I 사각형의 크기는 변하지 않는다 ! )

Draw Mode - Tiled

크기가 변할 때, 9-Sliced 스프라이트 중간이 확대 / 축소 되지 않고 타일링

• Continuous : 기본 Tile Mode. 스프라이트 크기가 변하면 가운데 부분이 평평하게 타일링
• Adaptive : Simple Mode 와 유사하게 크기가 변하면 스프라이트 텍스처가 스트레치 되지만, 변경된 스케일이 스트레치 값과 일치하면 가운데 부분이 타일링
  • Stretch Value : 슬라이더를 사용해서 0 ~ 1 값을 설정. 1일 때, 스프라이트 스케일의 두 배

Continuous	Adaptive

( 스프라이트 텍스쳐 중 A,C,G,I 사각형의 크기는 변하지 않고, 가운데 부분이 어떻게 타일링되는지 다르다. )

9-Sliced Sprite

여러 에셋을 준비할 필요 없이 다양한 크기의 이미지를 재사용할 수 있게 도와주는 2D 기술.

• 4 개의 코너(A,C,G,I)의 크기는 고정
• B와 H 구간은 수평으로 스트레치하거나 타일링
• D와 F 구간은 수직으로 스트레치하거나 타일링
• E 구간은 수평 또는 수직 방향 모두로 스트레치하거나 타일링

9-Sliced Sprite 설정

Sprite Import Setting - Sprite Editor 을 통해 영역을 지정해줘야 함

초록색 선이나 Border 의 값을 지정하여 구역을 나눠준 뒤, Apply 로 적용

9-Sliced 장점

• 리소스 효율성 : 작은 리소스 사용으로 다양한 이미지 크기를 자연스럽게 표현 가능
• 유연성 : 이미지를 9조각으로 나누어 영역별로 사이즈를 조절할 수 있어, UI 디자인에 유용
• 텍스처 왜곡 방지 : 이미지 리사이징 시 텍스처가 왜곡되지 않아, 벽, 바닥의 패턴 텍스처에 적합

Unity Docs - 9-Sliced