텍스처 패킹

Spine은 개별 이미지를 텍스처 아틀라스나 그리드(스프라이트시트)로 패킹하여 런타임에 더욱 효율적으로 렌더링할 수 있도록 합니다. Spine의 텍스처 패커는 일반 목적 도구입니다. Spine 뼈대에 사용할 수 있지만 모든 이미지를 응용 프로그램에 개별적으로 패킹할 수도 있습니다.

대부분의 그래픽 API(예: OpenGL)에서 텍스처를 바인드하고 드로잉하고 다른 텍스처를 바인드하고 드로잉하는 식으로 작업을 진행합니다. 텍스처를 바인드하는 것은 비교적 부하가 높은 작업이기 때문에 다수의 작은 이미지들을 큰 이미지에 저장하고 큰 텍스처를 한 번 바인드하고 텍스처의 일부를 여러 번 드로잉할 때 좋습니다. Spine은 다수의 작은 이미지들을 큰 이미지에 효율적으로 패킹할 수 잇습니다. 작은 이미지의 위치는 간단한 데이터 파일에 저장되기 때문에 응용 프로그램에서 이름으로 참조할 수 있습니다.

Spine은 다양한 고급 패킹 알고리즘을 사용합니다. 다양한 크기의 많은 휴리스틱을 사용해 패킹하며 가장 효율적인 결과를 선택합니다.

패킹

텍스처 패커는 두 가지로 사용할 수 있습니다:

1) JSON 또는 바이너리 파일로 내보내며 Create Atlas를 체크합니다:

데이터와 아틀라스를 동시에 내보낸 수 있는 편리한 방법이지만 각 뼈대가 참조하고 폴더 구조JSON 파일을 무시하는 이미지만 패킹하게 됩니다. 여러 뼈대들의 이미지를 하나의 아틀라스로 패킹하기 위해 패커를 실행하는 다음 방법을 사용합니다.

2) 메인 메뉴에서 Texture Packer를 선택합니다:

패킹할 이미지의 경로를 입력합니다:

설정

이미지를 패킹하는 방법을 제어할 수 있는 많은 설정들이 있습니다:

처음에는 어려울 수 있지만 대부분의 경우 기본값으로도 잘 작동합니다. 가장 중요한 설정입니다: 1) 최대 폭/높이, 2) 프리멀티플라이드 알파 사용 여부, 3) 화이트스페이스 스트리핑 작동 여부. 메쉬를 사용한다면 화이트스페이스 스트리핑을 반드시 꺼야 합니다.

영역

설정설명
화이트스페이스 X/Y 스트립입력된 이미지 모서리 주변의 비어 있는 픽셀을 제거합니다. 제거된 양만큼 아틀라스 데이터에 저장되어 화이트스페이스 스트립이 되지 않은 것처럼 응용 프로그램에서 이미지를 그릴 수 있습니다. 메쉬를 사용한다면 화이트스페이스 스트리핑을 반드시 꺼야 합니다.
회전몇몇 이미지를 90도 회전시키면 더욱 효율적인 패킹을 할 수 있습니다. 응용 프로그램에 특별한 주의를 기울여 이 영역을 제대로 그려야 합니다.
에일리어스동일한 픽셀 별로 두 이미지는 한 번만 패킹됩니다.
빈 이미지 무시투명한 픽셀만 있는 이미지는 패킹되지 않습니다.
알파 임계 값화이트스페이스가 제거될 때 이 이하의 알파 값은 0으로 처리됩니다.

영역 패딩

설정설명
패딩 X/Y패킹된 이미지 사이의 픽셀 수입니다. 몇몇 텍스처 필터링은 주변 픽셀을 평준화하기 때문에 주변 영역에 서로 영향을 주지 않으려면 패딩을 2개 하는 것을 권장합니다.
모서리 패딩페이지 이미지 모서리에도 패딩을 할 수 있습니다.
패딩 복제패딩은 가장 가까이 있는 영역의 픽셀을 복사합니다. 텍스처 필터링이 패딩 픽셀을 선택할 경우 "봉합 표시"가 있는 아트를 숨길 수 있습니다.

페이지

설정설명
최소 폭/높이각 페이지 이미지의 최소 크기입니다.
최대 폭/높이각 페이지 이미지의 최대 크기입니다. 이 크기의 이미지가 페이지에 맞지 않으면 여러 페이지 이미지가 출력됩니다.
2의 거듭제곱출력 페이지 차원은 2의 거듭제곱입니다. 이는 몇몇 게임 툴킷에 필수적입니다.
정사각형폭과 높이를 정합니다. 몇몇 텍스처 압축 알고리즘(예: PVRT)에 필수적입니다.

출력

설정설명
포맷PNG 또는 JPG 페이지로 출력합니다.
JPG 품질JPG 출력으로 압축됩니다.
패킹

Atlas는 이미지를 최대한 타이트하게 패킹합니다. Grid는 통일된 그리드(스프라이트시트로 알려져 있음)에서 이미지를 패킹합니다.

프리멀티플라이 알파

픽셀 RGB 값을 알파 값으로 곱합니다. 적절한 블렌딩을 위해 권장합니다.

블리드

투명한 픽셀의 RGB 값을 가장 가까이 있는 불투명한 RGB 값으로 설정합니다. RGB 값이 투명한 픽셀에 샘플링될 때 텍스처 필터링 아트를 막습니다.

크기조정입력된 각 크기에 맞는 전체 아틀라스가 출력됩니다.
접미사크기조정된 각 아틀라스의 접미사입니다. 비어있다면 여러 크기의 파일이 크기 별로 폴더의 동일한 이름으로 출력됩니다.

옵션

설정설명
아틀라스 확장자아틀라스 데이터 파일의 파일 확장자입니다.
하위 디렉토리 결합동일한 페이지에 현재 폴더와 모든 하위 폴더가 패킹됩니다. 하위 폴더의 모든 JSON 설정 파일은 무시됩니다.
경로 제거영역 파일 이름에서 하위 폴더가 제거됩니다. 이미지 파일 이름은 유일해야 합니다.
인덱스 사용인덱스 접미사(마지막 밑줄 표시 다음의 모든 것)를 제거하지 않고 이미지 이름이 사용됩니다.
빠르게패킹이 효율적이지는 않지만 더욱 빠르게 실행됩니다.
디버그출력 페이지에 선을 그려 패킹된 이미지 경계를 표시합니다.

런타임

이 설정은 런타임에 응용 프로그램이 선택적으로 적용하도록 만들어진 힌트입니다.

설정설명
필터 최소/최대텍스처 최소화 및 최대화 설정입니다.
랩 X/Y텍스처 랩 설정입니다.
포맷인메모리 포맷입니다.

폴더 구조

Spine은 응용 프로그램의 모든 이미지를 한 번에 패킹할 수 있습니다. Spine에 있는 이미지 폴더별로 이미지를 큰 텍스처, 즉 페이지에 패킹합니다. 폴더 내 이미지가 한 페이지의 최대 크기에 맞지 않으면 여러 페이지가 사용됩니다.

동일한 폴더의 이미지는 동일한 페이지 세트로 들어갑니다. 모든 이미지가 한 페이지에 맞으면, 한 페이지에서 앱은 텍스처 바인드 하나만 수행하기 때문에 하위 폴더를 사용해야 합니다. 또는 하위 폴더를 사용하여 관련 이미지를 분리하여 텍스처 바인드를 최소화할 수 있습니다.

예를 들어, 어떤 응용 프로그램이 "일시정지 메뉴" 이미지로부터 모든 "게임" 이미지를 개별 폴더에 위치시키고자 할 때, 이 두 세트의 이미지가 연속으로 그려집니다. 모든 게임 이미지가 그려지고(바인드 하나), 일시정지 메뉴가 위에 그려집니다(또 다른 바인드). 이미지가 여러 페이지를 구성하는 한 폴더에 있다면 각 페이지는 게임과 일시정지 이미지 조합을 포함할 수 있습니다. 여러 텍스처 바인드로 게임 및 일시정지 메뉴를 렌더링할 수 있습니다.

하위 폴더는 이미지를 관련 텍스처 설정으로 그룹화할 때 유용합니다. 런타임 메모리 포맷(RGBA, RGB 등)과 필터링(최근, 선형 등) 등의 설정은 텍스처마다 있습니다. 텍스처 설정마다 달라야 하는 이미지는 페이지 별로 들어가야 하기 때문에 분리된 하위 폴더에 위치해야 합니다.

Spine이 하위 폴더별 페이지 세트를 출력하지 않고 조직의 하위 폴더를 사용하려면 Combine subdirectories 설정을 봐야 합니다.

아틀라스 파일의 이미지 이름에 사용되는 하위 폴더 경로를 피하려면 Flatten paths 설정을 봐야 합니다.

JSON 설정

각 폴더는 "pack.json" 파일을 포함하고 있으며 해당 폴더의 설정을 보여줍니다. 각 하위 폴더는 상위 폴더의 모든 설정을 물려받습니다. 하위 폴더의 모든 설정은 상위 폴더의 설정을 무시합니다.

아래는 모든 가능한 설정이 적용된 JSON 예시입니다.

{
   pot: true,
   paddingX: 2,
   paddingY: 2,
   bleed: true,
   edgePadding: true,
   duplicatePadding: false,
   rotation: false,
   minWidth: 16,
   minHeight: 16,
   maxWidth: 1024,
   maxHeight: 1024,
   square: false,
   stripWhitespaceX: false,
   stripWhitespaceY: false,
   alphaThreshold: 0,
   filterMin: Nearest,
   filterMag: Nearest,
   wrapX: ClampToEdge,
   wrapY: ClampToEdge,
   format: RGBA8888,
   alias: true,
   outputFormat: png,
   jpegQuality: 0.9,
   ignoreBlankImages: true,
   fast: false,
   debug: false,
   combineSubdirectories: false,
   flattenPaths: false,
   premultiplyAlpha: false,
   useIndexes: true,
   grid: false,
   scale: [ 1 ],
   scaleSuffix: [ "" ]
}

이는 libgdx의 "가장 작은" JSON 포맷이기 때문에 큰 따옴표는 대부분의 경우 선택적입니다.

설정들을 모두 입력해야 하는 것은 아니며 일부 또는 전부를 생략할 수도 있습니다. 예를 들어 패딩을 끄고 하위 폴더를 조합하려면 이 JSON을 사용할 수 있습니다:

{
   paddingX: 0,
   paddingY: 0,
   combineSubdirectories: false
}

설정 대화창에는 JSON 파일을 현재 설정으로 저장하는 Save JSON 버튼이 있습니다. 이 파일 이름은 pack.json으로 정하고 입력 이미지 폴더에 위치할 수 있으며 JSON을 직접 쓰기보다는 해당 폴더의 설정을 구체화할 수 있습니다.

나인패치

나인패치는 보통 Spine 뼈대에 사용되지는 않지만 다른 용도로 사용할 때 유용합니다.

파일 확장자 바로 앞의 이미지 파일 이름이 ".9"으로 끝난다면 나인패치로 간주합니다. 나인패치 이미지는 이 툴을 사용하거나 직접 만들 수 있습니다. 이미지에는 1픽셀짜리 투명한 경계가 있어야 합니다. 위쪽과 왼쪽 모서리는 근처의 선을 하나 선택적으로 가질 수도 있으며 이는 분리된 정보를 나타냅니다. 즉, 나인패치의 일부가 늘어납니다. 아래쪽과 오른쪽 모서리는 근처 검은 픽셀의 선을 하나 선택적으로 가질 수도 있으며 이는 패딩 정보를 나타냅니다. 즉, 나인패치의 맨 위에 있는 내용이 어떻게 들어가는지를 나타냅니다. 이 이미지가 패킹될 때 1픽셀짜리 경계가 제거되며 스플리트와 패딩 정보는 아틀라스 데이터 파일에 저장됩니다.

이미지 인덱스

이미지 인덱스는 보통 Spine 뼈대에 사용되지는 않지만 다른 용도로 사용할 때 유용합니다.

이미지 파일 이름이 밑줄과 숫자(예: animation_23.png)로 끝난다면 숫자를 "인덱스"로 간주하며 아틀라스 데이터 파일 영역에 저장됩니다. 밑줄과 인덱스 없이 이미지 이름이 저장됩니다. 모든 이미지의 목록을 동일한 이름으로 불러올 수 있고 인덱스 별로 정렬할 수 있습니다. 프레임 순서를 유지하며 스프라이트 애니메이션을 쉽게 패킹할 수 있습니다.

다음: 가져오기 이전: 내보내기