소개
스프라이트 시트는 게임이 하나의 텍스처에서 많은 프레임을 그릴 수 있도록 존재합니다. 하지만 때로는 그 반대로 작업해야 할 때도 있습니다. 예를 들어, 특정 프레임을 다시 그리거나, 출시된 게임에서 오래된 아트워크를 추출하거나, 소스 파일이 남아 있지 않은 스프라이트 시트를 재구성해야 할 수 있습니다.
이미지 편집기에서 프레임을 수동으로 잘라내는 작업은 스프라이트 세 개까지는 괜찮지만, 300개에 달하는 경우에는 매우 번거롭습니다. 스프라이트 시트 압축 해제 도구는 브라우저 탭에서 이 작업을 수행합니다. 데이터 파일이 있는 경우 해당 파일을 지정하거나, 도구가 스프라이트를 직접 찾도록 할 수 있습니다.
시트를 올바르게 자르는 방법, 데이터 파일이 없을 때 해야 할 일, 그리고 다운로드하기 전에 프레임이 제대로 재생되는지 확인하는 방법을 알려드립니다.
종이를 자르는 네 가지 방법
시트는 제작 방식이 다양하기 때문에 자르는 데 정해진 한 가지 방법은 없습니다. 오래된 게임의 타일 간격이 일정한 시트는 격자 형태로 잘라야 합니다. 프레임이 잘린 촘촘한 아틀라스 시트는 데이터 파일이 필요합니다. 데이터 파일이 없으면 한 프레임이 어디에서 끝나고 다음 프레임이 어디에서 시작하는지 알 수 없기 때문입니다.
언패커는 네 가지 모드를 제공합니다. 사용자가 드롭하는 파일에 따라 자동으로 모드를 선택하며, 언제든지 전환할 수 있습니다. 이미지와 데이터 파일은 브라우저에서 읽어들이며, 업로드되는 파일은 없습니다.
- 자동: 불투명 픽셀 영역을 찾아 각 스프라이트를 자동으로 찾습니다. 스프라이트 사이에 공간이 있는 낱장 시트에 적합합니다.
- 설정: 시트의 데이터 파일(JSON, plist, XML, .atlas 등)을 읽고 파일에 지정된 위치에서 각 프레임을 정확하게 자릅니다.
- 그리드: 시트를 동일한 크기의 셀로 나눕니다. 셀 크기, 오프셋 및 간격을 사용자가 설정할 수 있습니다.
- 수동: 위의 방법으로 처리할 수 없는 특이한 시트의 경우, 시트에 직접 상자를 그립니다.
시트를 단계별로 분할하는 방법
시트 이미지(PNG, JPG, WebP, GIF 또는 BMP)부터 시작하세요. 함께 제공된 데이터 파일(예: JSON 또는 TexturePacker에서 내보낸 plist 파일)이 있는 경우, 동시에 드롭하세요. 압축 해제 프로그램이 형식을 인식하고 구성 모드로 전환됩니다. 잘린 프레임은 원래 크기로 재구성되고 회전된 프레임은 다시 똑바로 정렬되어 압축 전과 같이 정렬됩니다.
데이터 파일이 없나요? 먼저 자동 모드를 시도해 보세요. 스프라이트가 서로 닿거나 단색 배경에 있는 경우, 격자 모드로 전환하고 셀 크기를 입력하세요. 시트 위에 그려진 윤곽선을 확인하고, 프레임을 클릭하여 자세히 살펴본 다음 다운로드하세요.
- 시트 이미지와 데이터 파일(있는 경우)을 드롭하세요.
- 선택된 모드(자동, 구성, 격자 또는 수동)를 확인하고 필요한 경우 변경하십시오.
- 시트의 윤곽선을 살펴보고 어긋난 부분을 수정하십시오.
- 프레임을 ZIP 파일로 다운로드하거나, 몇 개만 필요한 경우 개별 파일로 다운로드하십시오.
다운로드하기 전에 프레임을 재생해 보세요
프레임을 추출하는 것은 작업의 절반입니다. 나머지 절반은 프레임이 제대로 애니메이션되는지 확인하는 것입니다. 애니메이션 미리보기를 켜면 언패커가 프레임을 순서대로 재생하여 전체 시퀀스의 움직임을 확인할 수 있습니다.
게임에서 보이는 것처럼 프레임 속도를 변경하세요. 프레임이 누락되면 끊김 현상이 나타나고, 몇 픽셀이 잘린 프레임은 떨림 현상이 나타납니다. 이러한 현상은 모든 것을 엔진에 가져온 후보다 여기에서 더 쉽게 발견할 수 있습니다.
- 추출된 프레임을 반복 재생합니다.
- 프레임 속도를 변경할 수 있습니다(기본값은 12fps).
- 끊김 현상과 떨림 현상은 누락되거나 정렬되지 않은 프레임을 나타냅니다.
어떤 데이터 파일을 가지고 계신가요?
데이터 파일은 프레임 이름과 사각형 목록일 뿐이지만, 엔진마다 저장 방식이 조금씩 다릅니다. 다른 사람이 만든 시트를 사용하는 경우 어떤 종류의 시트인지 알면 경고 메시지를 더 쉽게 이해할 수 있습니다.
언패커는 JSON 파일을 해시 및 배열 레이아웃(Phaser, PixiJS 및 TexturePacker의 일반 내보내기), Cocos2d의 plist 파일, Starling and Sparrow의 XML 파일, CSS 스프라이트 시트, Spine 및 libGDX의 .atlas 텍스트 파일, 그리고 Unity의 YAML 스프라이트 메타데이터를 읽습니다. 모든 페이지 이미지를 넣으면 여러 페이지로 구성된 아틀라스도 작동합니다.
그다음에는 보통 무엇이 오나요?
프레임이 추출되면 일반적으로 다음과 같은 작업을 수행합니다. 프레임 크기가 필요 이상으로 큰 경우 이미지 압축기를 사용하여 압축합니다. 새롭고 깔끔한 시트에 프레임을 넣으려면 텍스처 패커에 로드하여 다시 압축합니다. 자동 또는 격자로 슬라이싱하고 결과에 대한 데이터 파일이 필요한 경우, 언패커는 이미지 대신 메타데이터만 내보낼 수 있습니다.
이 모든 작업은 브라우저에서 실행되므로 아트워크를 컴퓨터에서 내보내지 않고도 이전 시트에서 새 시트로 전환할 수 있습니다.
작성자:
Ankit Kumar
ToolBuddy의 수석 소프트웨어 엔지니어 겸 창립자
WebAssembly, 웹 오디오 및 캔버스 기술을 사용하여 업로드 요구 사항이 없는 엔지니어링 브라우저 우선 유틸리티입니다.