[Unity] Sprite Atlas (스프라이트 아틀라스)

Sprite란? (링크)

Sprites는 2D 그래픽 오브젝트입니다.
만약 3D 작업을 주로 해왔다면 Sprites는 스탠다드 텍스처라고 생각하면 됩니다. 

---

Sprite Atlas란? (링크)

스프라이트 아틀라스(Sprite Atlas)는 여러 개의 텍스처를 단일 텍스처로 결합하는 에셋입니다. 

 

Sprite Atlas를 왜 쓰는가? (링크)

Draw call을 줄여서 성능을 향상시키기 위해서입니다.
(Draw call? => cpu가 gpu에게 그려달라고 요청하는것. 당연히 적을수록 좋음)

---

 

위 스프라이트 아틀라스를 사용할 수 있도록 나눠보도록 하겠습니다.

 

Sprite Mode

-Single:이미지 자체를 하나의 Sprite를 지정합니다.
-Multiple:이미지를 여러 Sprite로 나눌 수 있습니다.
-Polygon:사각형, 원, 삼각형 등의 모양을 Sprite으로 만들어 사용할 수 있습니다.

Pixels Per Unit

Unit은 유니티의 거리 단위를 의미합니다.
즉, 위 빨간색 사각형은 1x1 unit을 의미합니다.
Pixels per unit이란 저 한칸의 한 변의 길이를 몇 픽셀로 설정할지에 대한 옵션입니다.
(ex. 100으로 설정하면 한칸을 100x100픽셀로 인식하겠다는 뜻.)
(보통 주 캐릭터의 픽셀갯수를 따라가는 것 같습니다.)

Mesh Type (참고 링크)

스프라이트는 mesh를 기반으로 이미지를 보여줍니다.
mesh는 컴퓨터 그래픽스에서 물체의 모양을 구성하는 vertex,edge,face등을 갖는 데이터입니다. 
Mesh Type에는 Full Rect와 Tight 두 가지 타입이 있습니다.

-Full Rect: 이미지와 동일한 형태로 스프라이트를 렌더링합니다. RGBA를 기반으로 투명 영역을 포함하는 사각 영역 전체를 렌더링합니다.

 

-Tight: 스프라이트의 투명 영역을 제외하고, RGBA를 기반으로 일정 영역을 렌더링합니다.

Extrude Edges

렌더링 할 때 가장자리의 여유 공간을 길이로 나타낸 수치입니다. Mesh Type과 연관이 있습니다.
Mesh Type이 Full Rect일때는 전체 영역을 렌더링하므로 영향이 없지만, Tight일 경우 이 수치를 증가시키면 각 영역을 기준으로 투명 영역을 더 많이 포함하는 것을 볼 수 있습니다.

Pivot

스프라이트의 회전 기준점입니다.

Wrap Mode(링크)

텍스쳐를 정점에 입히는 방식(컴퓨터 그래픽스 u,v관련). 보통 Clamp로 설정

Filter Mode(링크)

컴퓨터 그래픽스의 interpolate방식 선택..

-Point(no filter): 보간 안함. 픽셀게임에서는 이걸 선택
-Bilinear: 이중 선형 보간으로 필터링
-Trilinear: 삼중 선형 보간으로 필터링

Compression

텍스쳐를 압축하는 방식 선택. 
도트의 경우 굳이 압축할 필요가 없기떄문에 None을 선택

 

이번에 사용한 스프라이트 아틀라스는 일정한 사각형 크기로 그려진것을 합친것이기 때문에,

Sprite Mode를 Multiple로 설정합니다.

캐릭 하나하나가 18x18을 기준으로 그려졌기때문에 Pixels Per Unit은 18로 설정해줍니다.

픽셀아트이기 때문에 Filter Mode는 Point로 설정해줍니다. 그리고 Compression도 None으로 설정합니다.

그리고 Apply를 누른 뒤, Sprite Editor에 들어갑니다.

 

Slice에서 Type을 Grid By Cell Size로 설정해줍니다.

그리고 Pixel Size와 Padding등을 픽셀아트 제작자가 의도한 대로 적어서 Slice해줍니다.

 

오른쪽 위 빨간색쪽을 누르면 위 같이 alpha값만 보는 화면으로 넘어갑니다.(=색 상관없이 픽셀이 존재하는 부분은 흰색으로 표현됨)

이를 통해서 바닥에 발이 붙어있어야 하는 부분이 잘 붙어있나 확인하여서 제대로 잘랐는지 한번 더 확인 가능합니다.

 

그리고 순서를 인식하기 쉽게 이름을 알아서 각 조각마다 입력해줍니다.

 

모두 확인했다면 Apply를 눌러서 잘라줍니다.

 

그러면 Project창에서 위처럼 나눠진 모습을 확인 가능합니다.