여러 펫 애니메이션 상태를 위한 재사용 가능한 스프라이트 시트 기획 방법

시트 치수를 정하기 전에 펫에 필요한 상태 목록을 작성하세요. 간단한 구성이라면 대기(idle), 이동(move), 짧은 반응(reaction) 등이 포함될 수 있으며, 구체적인 목록은 프로젝트에 따라 달라집니다. 각 상태에 대해 반복(loop)할지, 한 번만 재생할지, 끝에서 역재생할지 결정하세요. 첫 번째와 마지막 프레임을 표시하고 동작에 필요한 개별 포즈 수를 가늠해 봅니다. 이는 기획을 돕기 위한 방법일 뿐 정해진 애니메이션 공식은 아닙니다.

Aseprite에서는 프레임 태그를 사용해 범위를 이름이 지정된 애니메이션으로 표시할 수 있으며, 각 태그마다 정방향, 역방향 또는 핑퐁 재생을 지정할 수 있습니다. 기획 단계에서 범위를 명명하고 태그를 지정해 두면 나중에 한꺼번에 내보내더라도 원본 파일에서 상태 경계를 명확히 확인할 수 있습니다. Aseprite: Tags

가져오기 툴이 규칙적인 그리드를 요구한다면 애니메이션 프레임의 셀 너비와 높이를 일관되게 설정하세요. 펫의 가장 넓은 포즈, 쫑긋 세운 귀나 꼬리, 몸통 바깥으로 벗어나는 작은 움직임까지 고려해 여유 공간을 둡니다. 발의 중심이나 가만히 있는 포즈의 중심 등 공통 앵커를 기준으로 펫을 배치하세요. 펫이 포즈를 바꿀 때는 앵커 자체를 옮기지 말고 해당 앵커를 중심으로 그림을 이동해야 합니다. 그렇지 않으면 프레임 간에 펫이 튀는 것처럼 보일 수 있습니다.

고정 그리드는 모든 셀의 치수와 행 또는 열 위치가 동일하므로 슬라이스하기 수월합니다. Aseprite의 스프라이트 시트 가져오기는 프레임 너비와 높이를 지정받으며, 이미지에 여백이 있는 경우 오프셋과 패딩도 지원합니다. 프레임 간 크기 차이가 크거나 개별 피벗이 필요한 경우에는 균일한 그리드보다 프레임별 메타데이터가 포함된 아틀라스가 더 적합할 수 있습니다. Aseprite: Sprite sheets

상태 이름과 프레임 범위가 포함된 간단한 레이아웃 계획을 스케치하세요. 규칙적인 그리드의 경우 상태별로 행을 하나씩 할당하고, 각 상태의 프레임을 왼쪽에서 오른쪽으로 재생 순서에 맞게 배치합니다. 상태마다 프레임 수가 다르다면 사용하지 않는 셀은 비워 두거나 상태별로 별도의 스트립을 사용하세요. 단순히 행을 채우기 위해 관련 없는 포즈를 끼워 넣어서는 안 됩니다. 1차원 시퀀스는 공간을 덜 차지하지만 검토하기가 더 어려울 수 있습니다. 반면 매트릭스 방식은 작업자와 단순 그리드 기반 임포터 모두에게 상태 구분을 더 명확하게 해줍니다.

행 순서에 대한 범용적인 규칙은 없습니다. 중요한 것은 임포터가 예상하는 순서입니다. Aseprite 문서에 따르면 시트 유형에 따라 가져올 때 프레임을 읽는 순서가 달라지며, 내보내기 기능은 가로, 세로 및 매트릭스 레이아웃을 지원합니다. 대상 엔진이 해석할 수 있는 순서를 선택한 다음, 프로젝트 노트나 메타데이터에 기록해 두세요. Aseprite: Sprite sheets

스프라이트 시트는 최종 산출물 이미지로 취급하고, 유일한 편집 가능 원본으로 사용하지 마세요. 레이어, 프레임, 태그, 슬라이스가 포함된 기본 프로젝트 파일을 보관해야 병합된 내보내기 파일에서 다시 복원하는 수고 없이 개별 상태를 수정할 수 있습니다. Aseprite 문서에 명시되어 있듯이 .aseprite 파일은 레이어, 프레임, 태그, 슬라이스 등의 정보를 보존합니다. PNG 내보내기는 다른 곳에서 아트를 활용하는 데 유용합니다. Aseprite: Files

런타임에서 프레임 위치를 찾거나 타이밍 및 상태 이름을 읽어야 한다면 메타데이터를 추가하세요. Aseprite의 내보내기 옵션에는 JSON 데이터, 패딩 제어, 트리밍, 태그 선택 등이 포함됩니다. 패킹된(packed) 레이아웃이나 가변 크기 크롭을 사용할 때는 해당 메타데이터를 이미지와 함께 보관해야 합니다. 행과 열만으로는 픽셀 좌표를 안전하게 유추할 수 없기 때문입니다. 또한 Aseprite 슬라이스는 명명된 경계와 피벗을 저장할 수 있으며, 슬라이스 정보는 스프라이트 시트 JSON에 포함될 수 있습니다. Aseprite: ExportSpriteSheet, Aseprite: Slices

패딩은 프레임 사이나 시트 주변의 빈 공간을 의미하며, 적절한 값은 임포터와 텍스처 샘플링 방식에 따라 달라집니다. 대상 워크플로에서 눈에 보이는 간격이 필요하거나 경계를 쉽게 확인하고 싶다면 셀을 분리해 두세요. 프레임이 맞닿아 있다면 임포터가 문제없이 슬라이스할 수 있는지 확인해야 합니다. Aseprite는 테두리(border), 모양(shape), 내부(inner) 패딩을 별도의 내보내기 설정으로 제공하므로, '패딩'을 하나의 단일 옵션으로 취급하기보다는 툴에서 각 설정의 의미를 확인하세요. Aseprite: ExportSpriteSheet

트리밍은 투명한 여백을 제거하여 빈 영역을 줄여 주지만, 내보낸 프레임 경계가 변경될 수 있습니다. 프레임을 트리밍하는 경우, 잘라낸 표시 영역을 공통 앵커 위치에 다시 배치하는 데 필요한 오프셋, 피벗 또는 기타 메타데이터를 유지해야 합니다. 그렇지 않으면 원래 그림이 올바르게 정렬되어 있더라도 실루엣이 작은 포즈가 흔들려 보일 수 있습니다. 프레임별 메타데이터가 없는 규칙적인 그리드 워크플로에서는 임포터가 원래 정렬 정보를 유지하지 않는 한 개별 셀 트리밍을 피하세요.

내보내기 전에 기획한 상태를 순서대로 검토하세요. 각 루프의 첫 프레임과 마지막 프레임이 의도한 대로 이어지는지, 단발성 동작이 적절한 마지막 포즈에서 멈추는지, 펫의 앵커가 시각적으로 안정적으로 유지되는지 확인합니다. 그런 다음 대상 프레임 순서, 셀 치수, 오프셋, 패딩을 사용하여 시트를 가져옵니다. 모든 상태를 의도한 타이밍에 맞춰 재생해 보세요. 이미지 뷰어에서 깔끔해 보이는 시트라도 임포터에서는 크롭이 잘못되거나, 프레임이 누락되거나, 순서가 뒤바뀔 수 있습니다.

다음 단계로 시트를 넘기기 전에 이 간략한 체크리스트를 활용하세요.

• 모든 상태에 명확한 이름과 프레임 범위가 지정되어 있는가.

• 그리드 치수, 프레임 치수, 읽기 순서가 임포터와 일치하는가.

• 펫이 포즈 전반에 걸쳐 동일한 앵커에 정렬되어 있는가.

• 크롭 및 패딩으로 인해 디테일이 잘리거나 인접한 셀이 섞이지 않는가.

• 내보낸 메타데이터(사용하는 경우)가 올바른 이미지와 연결되어 있으며 현재 레이아웃을 설명하고 있는가.

• 향후 수정을 위해 편집 가능한 원본을 보관하고 있는가.

먼저 상태 목록과 재생 방식을 작성하세요. 다음으로 임포터가 규칙적인 그리드를 요구하는지, 아니면 프레임 메타데이터를 사용할 수 있는지 결정합니다. 가장 넓은 포즈를 기준으로 셀 크기와 앵커를 설정하고, 각 상태를 행이나 이름이 지정된 프레임 범위에 매핑한 후에야 애니메이션을 그리고 다듬습니다. 모든 포즈를 완성하기 전에 초기에 작은 테스트 시트를 내보내 실제 런타임으로 가져와 보세요. 이 테스트를 통해 수정 비용이 적게 드는 시점에 레이아웃 관련 가정을 점검할 수 있습니다.

기획에서 가장 중요한 결정은 아트워크와 임포터 간의 규칙입니다. 규칙적인 그리드에는 일관된 셀과 명확한 순서가 필요하고, 패킹되거나 트리밍된 시트에는 신뢰할 수 있는 메타데이터와 유지된 배치 정보가 필요합니다. 이 규칙을 명확히 정의하면 프로젝트에 맞게 내보내기 레이아웃이 변경되더라도 동일한 원본 애니메이션을 체계적으로 유지할 수 있습니다.

• Sprite sheets — Aseprite Docs

• Tags — Aseprite Docs

• Files — Aseprite Docs

• ExportSpriteSheet — Aseprite API

• Slices — Aseprite Docs