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


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.