균일하지 않은 스프라이트 치수를 가진 스프라이트 시트를 어떻게 처리 할 수 ​​있습니까?


14

균일하지 않은 스프라이트 치수를 가진 스프라이트 시트의 경우, 각 개별 스프라이트에 대한 경계 사각형 을 어떻게 얻을 수 있습니까?

내가 결정하고 싶은 것은 : offset_x, offset_y, width, height

여기에 이미지 설명을 입력하십시오

지금까지 모든 스프라이트의 치수 가 동일한 스프라이트 시트 만 사용했습니다 . 이 경우 특정 스프라이트를 얻기 위해 x 및 y 오프셋을 지정하면됩니다. 그러나 균일 하지 않은 치수의 스프라이트 시트의 경우 에는 작동하지 않습니다.

편집 : 의견과 답변을 읽은 후 질문을 더 포괄적으로 작성하도록 질문했습니다. 게임에서 스프라이트 시트를 사용하는 실제 과정. 이전에는 사람들이 불균일 한 크기의 스프라이트 시트를 생성하는 이유와 처리 방법에 대한 질문이 포함되어있었습니다.


1
색상이 채워지지 않는 공간은 알파가 0으로 설정된 픽셀 일뿐입니다.
Derek

답변:


8

동일하지 않은 차원의 대부분의 스프라이트 시트에는 일반적으로 스프라이트의 앵커가있는 일종의 메타 데이터가 있습니다. 풀 알파 픽셀을 제거하고이 데이터가 수동으로 생성되지 않도록 필요한 데이터를 제공하는 등 많은 도구가 있습니다.

이 메타 데이터가 없으면 직접 작성해야합니다. 가장 정확한 방법은 당신이 당신의 질문에 말한 것입니다, 그것은 손으로 직접하는 것입니다. 시간이 걸리지 만 새로운 스프라이트를 만드는 것보다 빠를 것입니다.


이것은 자동 감지를 기반으로 한 접근 방식이 실제로 사용되지만 실제로는 까다 롭고 오류가 발생하기 쉽습니다. 이미 스프라이트 (당신의 스프라이트의 기원에 대한 메타 데이터를 필요로 할 수 있도록 추가 데이터가 너무 많은 부담이 거의없는, 오른쪽, 원점이?). 아티스트는 개별 스프라이트의 크기가 앱보다 항상 더 잘 알고 있어야합니다.
Steven Stadnicki

+1. 스프라이트와 함께 메타 데이터를 제공하면이를 확실 하게 해결할 수 있습니다 .
Bartek Banachewicz

5

이미지에 대한 분석을 수행하여 각 스프라이트의 경계 사각형을 찾고 경계 사각형을 정렬하고 (아마도 최소 X, Y를 증가시켜) 스프라이트 시트의 프레임에 해당하는 경계 영역 세트를 갖게됩니다.

이 프로세스는 비교적 비용이 많이들 수 있으므로 게임 빌드 프로세스의 일부로 오프라인에서 수행하는 것이 좋습니다. 그런 다음 경계 영역 정보를 해당 스프라이트 시트 이미지와 함께 저장 한 파일로 직렬화 할 수 있습니다. 런타임에 이미지와 경계 정의 파일을 모두로드하고 각 개별 스프라이트에 액세스하는 데 필요한 정보가 있습니다.

그러나 그것은 말보다 쉽습니다. 기본적 으로 머신 비전 문제인 기능 감지 및 특히 얼룩 감지 를 수행하려고합니다 . 또한 이미지를 흑백으로 임계 값을 지정하고 가장자리 감지 기술을 사용할 수 있습니다 . 이러한 기술의 관련 수학은 내가 할 수있는 것보다 링크에서 훨씬 잘 설명되어 있으며, 그 수학을 직접 구현하지 않으려는 경우 도움을 줄 수있는 라이브러리가 몇 가지 있습니다. 다음 링크 세트가 가장 유망한 것 같습니다.


1
+1. 올바른 스프라이트 범위를 찾으려면 컴퓨터 인식 / 이미지 조작 기술이 필요하다는 데 동의합니다. 예를 들어 거북이 대 조개 애니메이션을 보는 경우와 같이 때로는 불가능할 수도 있습니다. 다른 애니메이션 프레임을 기준으로 올바른 위치를 결정하기는 어렵습니다. 그리고에 대한 같은 이유 : 그것은 때문에 텍스처 공간의 최적 사용의 가장 가능성이 높습니다. 일반적으로 좌표가있는 파일에는 이러한 스프라이트 시트가 제공되어야하지만 Google 이미지 검색에서 단순히 가져 오는 경우이 정보가 부족할 수 있습니다.
bummzack

당신은 좋은 지적을합니다. 내 대답은 스프라이트 원점 문제를 다루지 않습니다. 딱 맞는 경계 사각형을 찾게되고 불균일 스프라이트가있는 시트의 경우 각 프레임의 원점을 아는 것이 매우 중요합니다. 예를 들어 원점이 항상 (너비 / 2, 최대 Y) 또는 다른 것으로 가정하는 경우와 같이 (도메인 고유의) 일부 가정을하지 않으면 자동으로 수행하기가 어렵습니다.

4

나는 그런 종류의 비 균일 스프라이트 시트를 위해 나만의 도구를 만들었습니다. 오프셋 등을 편집 할 수 있습니다. 다음은 아이디어를 제공하는 스크린 샷입니다.

여기에 이미지 설명을 입력하십시오


비 균일 애니메이션에서 하나의 애니메이션 만 포함 된 균일 한 스프라이트 시트를 만드는 것처럼 보입니까? 아니면 이것을 잘못 해석하고 있습니까?
Ben

아니요, 균일하지 않은 스프라이트 시트를 열고 스프라이트 주위에 직사각형을 그립니다 (올바른 크기로 자동 축소됩니다). 반복해서 애니메이션을 만들면 각 애니메이션을 재생하고 필요에 따라 오프셋을 조정할 수 있습니다.
Anonymouse

거기에서 만든 매우 깔끔한 도구 인 것 같습니다. 도구를 공유 하시겠습니까?
eckyputrady 2012 년

@eckyputrady, 미안하지만 완료되지는 않지만 다른 도구 (기본적으로 영감을 얻음)를 권장합니다. 여기에서 찾을 수 있습니다 : colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse

0

texturepacker를 확인하십시오

http://www.texturepacker.com/

원하는 설정에 따라 이와 같은 파일을 출력합니다.

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

이 데이터를 사용하면 이미지에서 별도의 사각형을 쉽게 잡을 수 있습니다.


이것은 어떤 기술을 사용 하느냐가 아닙니다. 단순히 도구에 대한 링크와 그 출력 예를 사용하여 대답하는 것만으로는 충분하지 않습니다.
MichaelHouse

-1

spritebuddy.com 은 저에게 큰 도움이되었습니다. 사이트 자체에 대한 도움말을 찾을 수 없지만 이 Google 그룹스 게시물에서 실제로 도움 이됩니다 . 스프라이트의 경계를 자동 추측하여 조정하고 애니메이션 시퀀스로 정렬 할 수 있습니다. 그런 다음 JSON 또는 XML로이 모든 메타 데이터 파일을 추출합니다. 그런 다음 게임에서 해당 데이터 파일을 구문 분석하여 올바른 경계 사각형을 얻으십시오.


1
이것은 어떤 기술을 사용 하느냐가 아닙니다. 또한이 도구는 이미 의견 중 하나에서 제안되었습니다.
MichaelHouse

답변을 업데이트했지만 OP의 질문에 답변하지 않는 것에 동의하지 않습니다. "내가 결정하고 싶은 것은 offset_x, offset_y, width, height입니다." 이것이 게임 실행 시간에 발생해야하는지 (아주 성능이 떨어질 수 있음) 또는 이전에 지정되지 않았는지 여부입니다. "편집 : [...]에 관해서는 게임에서 스프라이트 시트를 사용하는 실제 프로세스를보다 포괄적으로 만들기 위해 내 질문을 표현했습니다."이것은 내 프로세스입니다. spritebuddy를 사용하여 적절한 JSON 파일을 생성 한 다음 게임에서 파싱하여 필요한 데이터를 얻습니다.
CletusW

1
@CletusW : 좋은 답변은 해당 도구가 프로세스에서 잘 작동 하는 이유 , 그 기능 및 도움이되는 방법 등을 설명합니다. 답변을 읽은 다음 도구를 선택하거나 내 자신을 작성하는 방법을 알아야합니다. 당신이 좋아하는 예제에 연결한다면, 그것은 답의 고기가 아니라 보너스 일뿐입니다.
Sean Middleditch
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.