SpriteForge

SPRITE TRIMMING GUIDE

투명 여백 제거가 애니메이션을 흔들리게 만드는 경우

투명한 공간을 잘라내면 파일 경계가 작아지고 리소스가 깔끔해 보입니다. 그러나 애니메이션 프레임에서는 모든 여백을 자동으로 제거하는 것이 항상 정답은 아닙니다. 프레임마다 보이는 픽셀의 위치가 달라지기 때문에 각각의 최소 경계로 잘라내면 이미지의 좌상단 기준점도 매 프레임 달라질 수 있습니다.

트리밍과 피벗은 해결하는 문제가 다릅니다

트리밍은 이미지 바깥의 완전 투명 영역을 줄이는 작업입니다. 피벗은 게임 엔진에서 이미지를 어떤 좌표 기준으로 배치할지를 정하는 작업입니다. 정적인 UI 아이콘이나 단독 이미지라면 트리밍만으로 충분한 경우가 많지만, 여러 프레임이 연속 재생되는 애니메이션은 피벗 관계를 함께 유지해야 합니다.

발 위치를 예로 보면 차이가 분명합니다

걷기 모션에서 한 프레임은 왼발이 앞으로 나오고 다음 프레임은 오른발이 앞으로 나옵니다. 각 프레임의 보이는 픽셀만 기준으로 투명 여백을 제거하면 캐릭터 바운딩 박스의 폭과 좌측 여백이 달라질 수 있습니다. 엔진이 모든 프레임을 이미지 중앙에 배치한다면 몸통이 좌우로 흔들리는 결과가 생깁니다.

정적 이미지에서는 적극적으로 트리밍해도 됩니다

인벤토리 아이콘, 프로필 이미지, 단일 이펙트 조각처럼 프레임 간 좌표 관계가 없는 이미지에서는 투명 여백을 제거해도 문제가 적습니다. 저장 공간보다 실제 이점은 레이아웃과 후처리가 단순해진다는 점입니다. 이미지 크기가 내용에 맞아지므로 썸네일 생성이나 자동 배치에서 예측하기 쉬워집니다.

애니메이션에서는 작업 순서를 바꿉니다

  1. 원본 프레임을 같은 캔버스 기준으로 재생해 흔들림을 확인합니다.
  2. 게임에서 유지해야 할 기준점이 발, 몸통, 무기 중 어디인지 정합니다.
  3. 필요하면 피벗을 정렬해 모든 프레임에서 기준점을 통일합니다.
  4. 그 뒤 여백을 줄이더라도 기준점 좌표를 잃지 않는 방식으로 내보냅니다.

알파 경계도 확인해야 합니다

안티앨리어싱이 들어간 이미지에는 눈으로 거의 보이지 않는 낮은 알파값 픽셀이 남아 있을 수 있습니다. 트리머가 알파값 0만 완전 투명으로 판단한다면 이런 픽셀은 내용으로 간주되어 예상보다 여백이 남습니다. 반대로 임계값을 과도하게 높이면 반투명 그림자나 발광 효과가 잘릴 수 있습니다. 픽셀아트와 일반 일러스트는 적합한 기준이 다릅니다.

권장 판단

실제 파일 경계를 줄일 때는 투명 여백 제거, 프레임 기준을 맞출 때는 피벗 자동 정렬, 결과 검수에는 애니메이션 미리보기를 사용할 수 있습니다.