텍스처 패킹

Spine에서는 런타임 시 보다 효율적인 렌더링을 위해 개별 이미지를 텍스처 아틀라스 또는 그리드(스프라이트 시트)로 패킹할 수 있습니다. Spine의 텍스처 패커는 범용 툴입니다. 텍스처 패커는 Spine 스켈레톤에 사용할 수 있지만 별도로 실행하여 애플리케이션의 모든 이미지를 패킹할 수도 있습니다.

대부분의 그래픽 API(예: OpenGL)에서는 텍스처가 바인딩되고, 일부 드로잉이 되고, 다른 텍스처가 바인딩되고, 더 많은 드로잉이 되고, 이런 식으로 계속 진행됩니다. 텍스처 바인딩은 비교적 비용이 많이 들기 때문에 더 큰 이미지에 많은 작은 이미지를 저장하고 더 큰 텍스처를 한 번 바인딩한 다음 이미지 부분을 여러 번 그리는 것이 이상적입니다. Spine에서는 많은 작은 이미지를 큰 이미지로 효율적으로 패킹할 수 있으며, 그 결과 "텍스처 아틀라스"가 생성됩니다.

Spine에서는 여러 고급 패킹 알고리즘을 사용합니다. 패킹은 다양한 크기의 수많은 휴리스틱으로 수행되며 가장 효율적인 결과가 선택됩니다.

텍스처 아틀라스 파일

텍스처 아틀라스는 파일 확장자가 .atlas인 텍스트 파일과 아틀라스 "페이지 이미지"라고 하는 하나 이상의 이미지 파일로 구성됩니다. 아틀라스 파일에는 아틀라스 "영역"이라고 하는 패킹된 작은 이미지의 각각에 대해 페이지 이미지 내의 위치가 표시됩니다. 영역은 아틀라스 파일에서 이름으로 참조됩니다.

단일 텍스처 아틀라스에는 많은 페이지 이미지가 있을 수 있으며, 애플리케이션의 모든 이미지를 단일 아틀라스로 패킹할 수 있습니다. 여러 아틀라스를 사용하는 유일한 이유는 일부 이미지를 동시에 로드할 필요가 없을 때입니다.

패킹

텍스처 패킹은 명령줄 인터페이스를 사용하여 수행할 수도 있습니다.

텍스처 패커는 다음의 두 가지 방법으로 실행할 수 있습니다.

데이터 내보내기 중 패킹

JSON 또는 바이너리를 내보낼 때 Pack을 선택합니다.

패킹할 이미지 파일을 찾는 방법에는 두 가지 옵션이 제공됩니다.

  • Attachments 선택하면 어태치먼트에서 사용되는 이미지 파일만 패킹됩니다. pack.json 파일은 사용되지 않습니다.
  • Image folders 선택하면 각 스켈레톤의 이미지 경로에 있는 이미지 파일이 패킹됩니다. 이렇게 하면 pack.json 파일을 사용하여 각 폴더에 대한 패킹을 설정할 수 있습니다.

텍스처 아틀라스가 생성되는 방법에 대해 두 가지 옵션이 제공됩니다.

  • Atlas per skeleton 아틀라스는 각 스켈레톤에 패킹됩니다. 각 아틀라스는 스켈레톤 이름을 사용하여 이름이 지정되며, 스켈레톤 이름은 해당 스켈레톤 데이터 파일의 이름과 일치합니다.
  • Single atlas 모든 스켈레톤에 대한 이미지가 단일 아틀라스로 패킹됩니다. 아틀라스는 파일 확장자가 없는 프로젝트 파일의 이름을 사용하여 이름이 지정됩니다.

Pack Settings 버튼은 텍스처 패커 설정을 구성합니다.

이 옵션은 스켈레톤 데이터와 텍스처 아틀라스를 동시에 내보내는 편리한 방법입니다. 그러나 텍스처 패커를 별도로 실행하는 것이 더 다루기 쉬울 수 있습니다.

텍스처 패커를 별도로 실행

주 메뉴에서 Texture Packer를 선택합니다.

텍스처 패커 대화 상자에서 패킹할 이미지가 들어있는 폴더, 아틀라스 파일을 쓸 위치 및 아틀라스 이름을 지정합니다.

Settings 버튼은 텍스처 패커 설정을 구성합니다.

설정

텍스처 패커에는 이미지가 패킹되는 방법을 제어하는 많은 설정이 있습니다.

이 대화 상자는 처음에는 부담이 될 수 있지만 많은 설정을 기본값으로 둘 수 있습니다. 아래에 몇 가지 중요한 설정이 있습니다.

  • 최대 너비와 높이. 이 설정은 단일 아틀라스 페이지 이미지에 들어갈 수 있는 양을 결정합니다.
  • 직사각형 또는 다각형 패킹. 다각형 패킹이 더 효율적이지만 느리고 컨텍스트에 대한 프로젝트 파일을 알아야 합니다.
  • 미리 곱해진 알파. 이 설정은 런타임 시 이미지가 렌더링되는 방법과 일치해야 합니다.
  • 공백 제거
  • 크기 조정

영역

설정설명
X/Y 공백 제거

입력 이미지의 가장자리 주변에 있는 빈 픽셀을 제거합니다. 제거된 양은 아틀라스 데이터에 저장되므로 이미지는 공백이 제거되지 않은 것처럼 애플리케이션에서 그려질 수 있습니다.

회전

일부 이미지를 90도 회전하면 보다 효율적인 패킹이 가능합니다. 애플리케이션에서 이러한 영역을 적절하게 그리려면 특별한 주의를 기울여야 합니다.

에일리어스

픽셀을 비교하여 동일한 두 이미지는 한 번만 패킹됩니다.

빈 이미지 무시

투명한 픽셀만 있는 이미지는 패킹되지 않습니다.

알파 임계값

공백이 제거될 때 이보다 낮은 알파 값은 0으로 처리됩니다.

영역 패딩

설정설명
X/Y 패딩

패킹된 이미지 사이의 픽셀 수입니다. 일부 텍스처 필터링은 인접 픽셀을 평균하므로 인접 영역이 서로 영향을 미치는 것을 방지하기 위해 2패딩을 권장합니다.

모서리 패딩

패딩은 페이지 이미지의 모서리에도 적용됩니다.

패딩 복사

패딩은 가장 가까운 영역에서 픽셀을 복사합니다. 이렇게 하면 텍스처 필터링에서 패딩 픽셀을 선택하는 경우 "심" 아티팩트를 숨길 수 있습니다.

공백 제거 시 공백이 아닌 픽셀이 있는 모서리에만 패딩 복사가 적용됩니다. 다각형을 패킹할 때 전체 이미지를 커버하는 영역 어태치먼트 또는 메쉬 어태치먼트에서 사용되는 이미지에만 패딩 복사가 적용됩니다.

페이지

설정설명
최소 너비/높이

페이지 이미지의 가장 작은 크기입니다.

최대 너비/높이

페이지 이미지의 최대 크기입니다. 이미지가 이 크기의 페이지에 맞지 않으면 여러 페이지 이미지가 출력됩니다.

2의 거듭제곱

출력 페이지 치수를 2의 거듭제곱으로 만듭니다. 이는 일부 게임 툴킷의 요구 사항입니다.

4로 나누어짐

출력 페이지 치수를 4로 나누어떨어지도록 합니다. 이는 일부 텍스처 압축 알고리즘의 요구 사항입니다.

스퀘어

너비와 높이를 동일하게 만듭니다. 이는 일부 텍스처 압축 알고리즘(예: PVRT)의 요구 사항입니다.

런타임

이러한 설정은 런타임에 선택적으로 적용할 데이터를 로드하는 애플리케이션에 대한 힌트입니다.

설정설명
Filter min/mag

텍스처 축소 및 확대 설정입니다.

X/Y 랩

텍스처 랩 설정입니다.

포맷

메모리 내 포맷입니다.

출력

설정설명
형식

PNG 또는 JPG 페이지를 출력합니다.

JPG 화질

JPG 출력을 위한 압축입니다.

패킹

이미지가 패킹되는 방법을 결정합니다.

  • Grid는 이미지를 균일한 그리드(스프라이트 시트라고 함)로 패킹합니다.
  • Rectangles은 이미지를 직사각형을 사용하여 패킹합니다.
  • Polygons은 Spine 프로젝트의 메쉬 헐을 사용하여 이미지를 최대한 빽빽이 패킹합니다.

미리 곱하기 알파

픽셀 RGB 값에 알파 값을 곱합니다. 런타임 시 이미지를 렌더링할 때도 미리 곱해진 알파를 사용해야 합니다. 이 옵션은 올바른 블렌딩을 위해 권장됩니다.

블리드

투명 픽셀의 RGB 값을 가장 가까운 투명하지 않은 픽셀의 RGB 값으로 설정합니다. 런타임 시 미리 곱해진 알파를 사용하지 않을 경우, 이 옵션을 사용하면 투명 픽셀에 RGB 값이 샘플링될 때 텍스처 필터링 아티팩트를 방지할 수 있습니다.

크기 조정

지정된 각 크기 조정에 대해 전체 아틀라스가 출력됩니다.

접미사

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

리샘플

크기 조정에 사용할 알고리즘입니다.

옵션

설정설명
아틀라스 확장자

아틀라스 데이터 파일의 파일 확장자입니다.

하위 디렉터리 결합

현재 폴더와 모든 하위 폴더는 동일한 페이지에 패킹됩니다. pack.json 파일이 포함된 하위 폴더는 결합되지 않습니다.

경로 평면화

하위 폴더는 영역 파일 이름에서 제거됩니다. 이미지 파일 이름은 고유해야 합니다.

인덱스

이미지 이름은 마지막 밑줄 뒤의 모든 것이 지워집니다. 이미지 인덱스를 참조하십시오.

레거시 출력

Spine 런타임 4.0 이전 버전에서 읽을 수 있는 형식으로 아틀라스 파일을 씁니다.

디버그

출력 페이지에 선이 그려져 패킹된 이미지 경계를 표시합니다.

빠름

패킹은 효율적이지는 않지만 훨씬 빠르게 실행됩니다.

메모리 제한

선택하지 않으면 모든 이미지가 동시에 메모리에 로드되어 패킹 속도가 올라갑니다. 사용 가능한 메모리가 충분하지 않으면 Spine이 충돌할 수 있습니다.

예쁜 인쇄

아틀라스 파일은 사람이 읽기 쉽도록 추가 공백에서 쓰입니다.

현재 프로젝트

선택하면 현재 프로젝트의 메쉬 이미지 파일에 대한 메쉬 UV를 사용하여 공백을 제거합니다.

데이터 내보내기의 일부로 패킹할 때 이 설정은 무시되고 항상 현재 프로젝트의 메쉬를 사용하여 공백을 제거합니다.

기타

이러한 설정은 설정 대화 상자에서 사용할 수 없으며 JSON 설정 파일에서만 지정할 수 있습니다.

설정설명
무시

이 폴더와 하위 폴더의 이미지는 패킹되지 않습니다.

블리드 반복

블리드가 적용된 횟수입니다. 기본값은 2입니다.

구분 기호

파일 이름에 숫자를 추가할 때 사용할 문자열입니다. 기본값은 밑줄(_)입니다.

폴더 구조

데이터 내보내기 중 패킹을 하고 Attachments를 선택할 때는 폴더 구조가 사용되지 않습니다.

Spine에서는 애플리케이션의 모든 이미지를 한 번에 패킹할 수 있습니다. 폴더가 지정되면 이미지 파일을 재귀적으로 검색합니다. Spine에서 검색되는 각 이미지 폴더의 경우 이미지를 더 큰 페이지 이미지로 패킹합니다. 폴더의 이미지가 한 페이지의 최대 크기에 맞지 않으면 여러 페이지가 사용됩니다.

동일한 폴더에 있는 이미지는 동일한 페이지 세트로 이동합니다. 모든 이미지가 한 페이지에 들어가는 경우 하위 폴더를 사용하면 안 됩니다. 이는 한 페이지에 모든 이미지를 포함하는 것이 가장 효율적이기 때문입니다. 그렇지 않으면 하위 폴더를 사용하여 관련 이미지를 분리하고 텍스처 바인딩을 최소화할 수 있습니다.

예를 들어, 애플리케이션에서는 모든 "게임" 이미지를 "일시 정지 메뉴" 이미지와 분리하여 별도의 폴더에 배치할 수 있습니다. 이 두 세트의 이미지는 연속적으로 그려지기 때문입니다. 모든 게임 이미지가 그려진(하나의 바인딩) 다음 일시 정지 메뉴가 맨 위에 그려집니다(또 다른 바인딩). 이미지가 두 페이지 이상으로 된 단일 폴더에 있는 경우, 각 페이지에는 게임 및 일시 정지 메뉴 이미지의 믹스가 포함될 수 있습니다. 이로 인해 각각 하나씩이 아닌 많은 텍스처가 바인딩되어 게임 및 일시 정지 메뉴를 렌더링하게 됩니다.

하위 폴더는 관련 텍스처 설정으로 이미지를 그룹화하는 데에도 유용합니다. 런타임 메모리 형식(RGBA, RGB 등) 및 필터링(최단, 선형 등)과 같은 설정은 텍스처별로 적용됩니다. 텍스처별로 다른 설정이 필요한 이미지는 별도의 페이지로 이동해야 하므로 별도의 하위 폴더에 배치해야 합니다.

페이지에서 함께 그룹화되는 이미지를 제어하는 대신 구성에 하위 폴더를 사용하려면 Combine subdirectories 설정을 참조하십시오.

아틀라스 파일의 영역 이름에 하위 폴더 경로가 사용되지 않도록 하려면 Flatten paths 설정을 참조하십시오.

JSON 설정

데이터 내보내기 중 패킹을 하고 Attachments를 선택할 때는 pack.json 파일이 사용되지 않습니다.

각 폴더에는 pack.json 파일이 들어있어 해당 폴더에 대한 설정을 지정할 수 있습니다. 각 하위 폴더는 상위 폴더의 모든 설정을 상속합니다. 하위 폴더에 설정된 모든 설정은 상위 폴더에 설정된 해당 설정을 재정의합니다.

Texture Packer Settings 대화 상자 하단의 Save 버튼을 클릭하면 Spine을 사용하여 pack.json 파일을 생성할 수 있습니다.

다음은 사용 가능한 모든 설정이 포함된 JSON 예입니다. 대부분의 경우 큰따옴표는 선택 사항입니다.

{
   stripWhitespaceX: true,
   stripWhitespaceY: true,
   rotation: true,
   alias: true,
   ignoreBlankImages: false,
   alphaThreshold: 3,
   minWidth: 16,
   minHeight: 16,
   maxWidth: 2048,
   maxHeight: 2048,
   pot: false,
   multipleOfFour: false,
   square: false,
   outputFormat: png,
   jpegQuality: 0.9,
   premultiplyAlpha: true,
   bleed: false,
   bleedIterations: 2,
   scale: [ 1 ],
   scaleSuffix: [ ],
   scaleResampling: [ bicubic ],
   paddingX: 2,
   paddingY: 2,
   edgePadding: true,
   duplicatePadding: false,
   filterMin: Linear,
   filterMag: Linear,
   wrapX: ClampToEdge,
   wrapY: ClampToEdge,
   format: RGBA8888,
   atlasExtension: .atlas,
   combineSubdirectories: false,
   flattenPaths: false,
   useIndexes: false,
   debug: false,
   fast: false,
   limitMemory: true,
   currentProject: true,
   packing: rectangles,
   silent: false,
   ignore: false
}

모든 설정을 지정할 필요는 없으며 일부 또는 모두를 생략할 수 있습니다. 예를 들어, 패딩과 하위 폴더 결합을 해제하려면 다음 JSON을 사용할 수 있습니다.

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

폴더 및 모든 하위 폴더의 모든 이미지를 무시하려면:

{
   ignore: true
}

텍스처 아틀라스 이름

텍스처 아틀라스 이름을 사용하여 아틀라스 및 PNG 파일의 이름을 지정합니다. 예를 들어, 텍스처 아틀라스 이름이 skeleton이면 아틀라스 파일은 skeleton.atlas, skeleton.png, skeleton2.png 등으로 이름이 지정됩니다.

나인패치

나인패치는 일반적으로 Spine 스켈레톤에 유용하지 않지만 다른 용도로는 유용할 수 있습니다.

이미지 파일 이름이 파일 확장자 바로 앞에 ".9"로 끝나면 나인패치로 간주됩니다. 나인패치 이미지는 수동으로 만들거나 이 툴을 사용하여 만들 수 있습니다. 이미지에는 1px 투명 테두리가 있어야 합니다. 위쪽 및 왼쪽 가장자리에는 필요에 따라 분할 정보, 즉 나인패치의 어느 부분이 늘어날 것인지를 나타내는 검은색 픽셀의 연속된 줄이 하나 있을 수 있습니다. 아래쪽 및 오른쪽 가장자리에는 필요에 따라 패딩 정보를 나타내는 검은색 픽셀의 연속된 줄이 하나 있을 수 있습니다. 이는 나인패치의 맨 위에 있는 콘텐츠가 삽입되는 방식을 의미합니다. 이 이미지가 패킹되면 1px 테두리가 제거되고 아틀라스 데이터 파일에 분할 및 패딩 정보가 저장됩니다.

이미지 인덱스

이미지 인덱스는 일반적으로 Spine 스켈레톤에는 유용하지 않지만 다른 용도로는 유용할 수 있습니다.

이미지 파일 이름이 밑줄 다음에 숫자로 끝나는 경우(예: animation_23.png), 숫자는 "인덱스"로 간주되어 아틀라스 데이터 파일의 영역에 대해 저장됩니다. 이미지 이름은 밑줄과 인덱스 없이 저장됩니다. 이렇게 하면 동일한 이름의 이미지 목록을 인덱스별로 검색하고, 순서를 지정하여 프레임 순서를 잃지 않고 프레임별 애니메이션을 쉽게 패킹할 수 있습니다.

텍스처 언패커

Spine에서는 텍스처 아틀라스를 선택하고 텍스처 아틀라스에서 개별 이미지를 제거하는 텍스처 언패킹 유틸리티를 제공합니다. 아틀라스의 모든 회전이 실행 취소되고 제거된 공백이 개별 이미지에 복원됩니다.

명령줄 인터페이스를 사용하여 텍스처 언패킹을 수행할 수도 있습니다.

Atlas 파일의 경로와 압축을 푼 이미지를 저장할 폴더의 경로인 Output folder 입력합니다. 아틀라스가 미리 곱셈된 알파 로 압축된 경우 Unpremultiply alpha 곱셈 해제를 선택합니다. 아틀라스 파일에 “pma:true”가 있는 경우 이 확인란 대신 사용됩니다.

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