스프라이트 시트 애니메이션 구현
검증 환경
- 윈도우
-
- 윈도우 11
- 유니티 에디터
-
- 2020.3.25에프1
- 입력 시스템 패키지
-
- 1.2.0
이 팁의 전제 조건
다음 설정은 이러한 팁을 설명하기 위한 전제 조건으로 미리 구성되어 있습니다.
스프라이트 시트 애니메이션이란 무엇입니까?
최신 게임에서는 3D 모델을 움직이고, 실시간으로 폭발을 계산하고, 효과를 표시하여 캐릭터와 효과를 애니메이션화합니다. 이것은 게임기의 연산 파워가 높아졌기 때문에 가능해졌지만, 구형 게임기는 그 정도의 파워가 없었기 때문에 이미지를 계속 전환하여 움직이는 것처럼 보이게 하는 스프라이트 시트 애니메이션이 주류였다. 원리는 TV에서 재생되는 애니메이션과 동일합니다. 스프라이트 시트 애니메이션은 과거보다 적은 수의 게임에서 사용되지만 계산에 필요한 부하가 훨씬 낮기 때문에 여전히 자주 사용됩니다.
스프라이트 시트 애니메이션이 전환되어 여러 이미지를 연속으로 표시합니다. 이렇게 많은 이미지 파일을 준비하는 것은 드물고, 기본적으로 모든 표시 패턴이 하나의 이미지에 포함되어 있습니다. 이렇게 하면 이미지 파일을 더 쉽게 관리할 수 있고 이미지 파일을 로드할 때 부하가 줄어듭니다. 이 애니메이션을 요약한 이미지 파일을 "스프라이트 시트"라고 합니다.
스프라이트 시트 만들기
스프라이트 시트는 기본적으로 이미지 파일일 뿐입니다. Unity와는 관계없기 때문에 이미지 편집 툴로 작성하십시오. 최종 파일 포맷은 Unity가 처리할 수 있는 PNG 파일입니다.
또한 스프라이트 시트를 만들기 위한 다음과 같은 규칙이 있습니다.
- 모든 프레임의 이미지 크기를 통합합니다. 예를 들어 첫 번째 이미지가 32x32 픽셀인 경우 두 번째 및 후속 이미지는 32x32 픽셀이 됩니다. 예를 들어 6개의 프레임이 있는 "3x2" 형식의 스프라이트 시트를 준비하는 경우 스프라이트 시트의 크기는 96x64 픽셀이 됩니다.
- "6x4"나 "2x8"과 같이 이미지를 자유롭게 정렬할 수 있지만, 반드시 모든 프레임이 채워지는 것을 전제로 작성해 둡시다. "6x4"인 경우 24프레임 등입니다. 13프레임 애니메이션인 경우 "1x13" 또는 "13x1"로 준비합니다.
- 애니메이션이기 때문에 전후의 프레임에 어긋남이 없도록 제대로 정렬되어 있습니다.
- 애니메이션의 방향은 왼쪽 상단 셀에서 시작하여 오른쪽으로 이동하고, 맨 오른쪽으로 이동하면 왼쪽에서 한 단계 아래로 시작하여 다시 오른쪽으로 이동합니다.
사실 Unity에서는 위의 작업을 엄격하게 수행할 필요는 없지만 사양을 미리 결정하는 것이 훨씬 쉽습니다.
이번에는 스프라이트 시트를 사용하여 다음 숫자를 전환합니다. 하나의 정사각형은 32x32 픽셀입니다. 24개의 "6x4" 프레임으로 구성되어 있으므로 이미지 크기는 192x128 픽셀입니다.
Unity 에디터에서 스프라이트 시트 설정
프로젝트를 생성했으면 프로젝트에 스프라이트 시트 파일을 추가합니다.
여기서는 파일 이름이 NumberAnimation 인 것으로 가정합니다.
NumberAnimation 파일을 선택하고 다음과 같이 인스펙터를 작성합니다.
| 항목 | 값 |
|---|---|
| 텍스처 타입(Texture Type) | 스프라이트(2D 및 UI) |
| 스프라이트 모드 | 복수 |
그 밖에도 구성할 수 있는 설정이 많이 있습니다만, 지금은 그대로 두겠습니다. 구성이 완료되면 "스프라이트 에디터" 버튼을 클릭합니다.
아래 대화 상자가 나타나면 "적용" 버튼을 클릭합니다. 실제로 이 인스펙터의 설정은 저장되어야 하며 하단으로 스크롤하면 "적용" 버튼이 있으므로 이 버튼으로 설정을 저장해야 합니다. 또한 대화 상자의 "적용"으로 저장되므로 어떤 방법으로 저장하든 상관 없습니다.
스프라이트 에디터가 나타납니다. 이 섹션에서는 스프라이트 시트에서 스프라이트를 분할하는 작업을 할 것입니다.
왼쪽 상단 모서리에 "Slice"라는 버튼이 있는데 클릭하고 유형을 "Grid By Cell Size"로 변경합니다. 이 스프라이트 시트에서 스프라이트의 한 크기는 "32x32" 픽셀이므로 각 픽셀 크기에 32를 입력합니다. 완료되면 슬라이스 버튼을 클릭합니다.
이 이미지는 처음부터 명확하게 나뉘어 있는 것 같아서 이해하기 어렵습니다만, 1px 32px의 스프라이트로 나뉘어져 있습니다. "Ctrl" 키를 누르면 분할선이 녹색으로 나타납니다.
분할 후 "적용"버튼으로 저장하십시오.
프로젝트의 이미지 파일에서 삼각형을 클릭하여 확장하면 스프라이트가 분할된 것을 볼 수 있습니다.
스프라이트 배치와 애니메이션
설정된 스프라이트를 뷰로 드래그하여 배치합니다.
그러면 대화 상자가 나타나므로 다른 이름으로 저장 NumberAnimation 하십시오.
이 파일에는 애니메이션 설정이 들어 있습니다.
첫 번째 스프라이트가 뷰에 배치되고 애니메이션 컨트롤러와 애니메이션 클립이 프로젝트에 생성됩니다. 이미지가 작으면 배율을 설정하여 더 크게 만듭니다.
이 시점에서 기본 애니메이션 설정이 적용되므로 게임을 실행하기만 하면 됩니다. 게임이 시작되자마자 스프라이트 애니메이션이 움직이는 것을 볼 수 있을 것입니다.
애니메이션이 반복되지 않도록 방지
프로젝트에서 애니메이션 클립 파일(NumberAnimation.anim)을 선택합니다.
인스펙터에는 "루프 타임"에 체크 박스가 있으므로 체크를 해제하십시오.
게임을 실행하면 애니메이션이 24에서 멈추는 것을 볼 수 있습니다. 일회성 폭발 효과에 효과적입니다.
애니메이션의 속도 변경
계층 구조에서 애니메이션화할 스프라이트를 선택합니다.
그런 다음 애니메이션 탭을 선택합니다. 애니메이션(Animation) 탭이 없는 경우 메뉴에서 창 > 애니메이션(Animation > Animation)을 선택합니다.
"샘플"이라는 숫자가 있는데, 1 초에 이미지를 전환하는 횟수입니다. 이 샘플에서 애니메이션은 24프레임이므로 애니메이션은 2초마다 반복됩니다.
이 숫자를 줄이면 애니메이션 속도가 느려지고 늘리면 속도가 빨라집니다.
다른 고급 애니메이션 설정 정보
다양한 애니메이션 설정은 애니메이션 관련 팁에 별도로 설명되어 있습니다. 이러한 설정은 스프라이트 애니메이션에만 국한된 것은 아니지만, 다른 모션 애니메이션이나 3D 애니메이션을 설정하는 것과 같습니다.
이 팁에서는 스프라이트 시트에서 애니메이션으로 이동하는 방법을 설명합니다.