Jak poradzić sobie z arkuszami sprite o niejednolitych wymiarach sprite?

14

W przypadku arkusza o niejednolitych wymiarach, w jaki sposób mogę uzyskać prostokąty ograniczające dla każdego pojedynczego duszka (tj. Niebieskie pola na poniższym obrazku / narysowałem tylko kilka przykładów)?

Chciałbym ustalić, co następuje: offset_x, offset_y, width, height

wprowadź opis zdjęcia tutaj

Do tej pory korzystałem tylko z arkuszy sprite, w których wszystkie sprite mają identyczne wymiary. W takim przypadku wystarczy określić przesunięcie xiy, aby uzyskać określony duszek. Jednak w przypadku arkuszy o niejednolitych wymiarach to nie działa.

EDYCJA: Po zapoznaniu się z komentarzami i odpowiedziami sformułowałem moje pytanie, aby uczynić je bardziej włączającym. rzeczywisty proces korzystania z arkusza sprite w grze. Wcześniej pytanie zawierało informacje o tym, dlaczego ludzie produkują arkusze sprite o niejednorodnych wymiarach i jak sobie z tym poradzić.

Ben
źródło
1
Wydaje mi się, że wszystkie mają identyczne rozmiary, przestrzeń, która nie jest wypełniana kolorem, to tylko piksele z wartością alfa ustawioną na zero.
Derek

Odpowiedzi:

8

Większość arkuszy sprite o nieidentycznych wymiarach zwykle zawiera pewien rodzaj metadanych, w których znajduje się kotwica sprite. Istnieje wiele narzędzi, które wykonują takie czynności, jak usuwanie pełnych pikseli alfa i dostarczanie potrzebnych danych, aby dane te nie były generowane ręcznie.

Jeśli nie masz tych metadanych, musisz je samodzielnie utworzyć. Najdokładniejszym sposobem jest ten, który wypowiedziałeś w swoim pytaniu, czyli po prostu zrobić to ręcznie. Może to chwilę potrwać, ale prawdopodobnie jest szybsze niż tworzenie nowych duszków.

Tetrad
źródło
To - chociaż metody oparte na automatycznym wykrywaniu mają swoje zastosowania, w praktyce są wybredne i podatne na błędy. Już trzeba metadane pochodzenia ikonki (Twój skrzaty zrobić mieć pochodzenie, prawda?), Więc dodatkowe dane jest prawie zbyt duże obciążenie. Artysta powinien zawsze wiedzieć lepiej niż Twoja aplikacja, jaki jest rozmiar poszczególnych duszków.
Steven Stadnicki
+1. Dostarczenie metadanych duszkom gwarantuje, że rozwiąże je w sposób rozsądny .
Bartek Banachewicz
5

Możesz przeprowadzić analizę obrazu, aby zlokalizować obwiedni prostokąty każdego duszka, posortować te obwiednie prostokąty (być może przez zwiększenie minimum X, a następnie Y), a otrzymasz zestaw obszarów granicznych, które odpowiadają ramkom arkusza duszka.

Ponieważ ten proces może być stosunkowo drogi, prawdopodobnie będziesz chciał zrobić to offline, na przykład w ramach procesu kompilacji gry. Następnie można serializować informacje o regionie granicznym do pliku przechowywanego z odpowiednim obrazem arkusza ikon. W czasie wykonywania ładujesz zarówno obraz, jak i plik definicji granicy i masz informacje potrzebne do uzyskania dostępu do każdego indywidualnego duszka.

Łatwiej jednak powiedzieć niż zrobić. Zasadniczo będziesz chciał zrobić wykrywanie funkcji, a konkretnie wykrywanie kropel, które są problemami z widzeniem maszynowym. Możesz także ustawić próg obrazu (do czerni i bieli) i zastosować technikę wykrywania krawędzi . Odpowiednia matematyka za tymi technikami jest wyjaśniona na tych linkach znacznie lepiej niż ja, a w przypadku, gdy nie masz ochoty samodzielnie wdrażać tej matematyki, dostępnych jest kilka bibliotek, które mogą ci pomóc. Najbardziej obiecujący był następujący zestaw linków:


źródło
1
+1. Zgadzam się, że będzie to wymagało pewnych umiejętności percepcji komputerowej / manipulacji obrazem, aby znaleźć właściwe granice duszka. Czasami może to być nawet niemożliwe, na przykład, jeśli spojrzysz na animację żółwia do pocisków. Trudno będzie ustalić prawidłową pozycję dla tego względem innych klatek animacji. A jeśli chodzi o przyczynę : najprawdopodobniej z powodu optymalnego wykorzystania przestrzeni tekstur. Zwykle plik ze współrzędnymi powinien być dostarczony z takim arkuszem sprite, ale jeśli po prostu pobierasz go z wyszukiwania grafiki Google, może brakować tych informacji.
bummzack
Podnosisz dobrą rację: moja odpowiedź nie dotyczy kwestii pochodzenia duszka; prowadziłoby to po prostu do znalezienia ciasno dopasowanych prostokątów ograniczających, a dla arkusza z niejednolitymi duszkami wiedza o pochodzeniu każdej klatki jest dość ważna. Byłoby to trudne do wykonania automatycznie, chyba że poczyniłeś pewne założenia (prawdopodobnie specyficzne dla domeny), na przykład, że źródło zawsze będzie (szerokość / 2, maksymalne Y) lub coś takiego.
4

Zrobiłem własne narzędzie do tego rodzaju niejednorodnego arkusza sprite. Umożliwia edycję odsunięć itp. Oto zrzut ekranu z pomysłem:

wprowadź opis zdjęcia tutaj

Anonimowa
źródło
Wygląda na to, że tworzysz jednolity arkusz sprite zawierający tylko jedną animację z niejednolitej? A może źle to interpretuję?
Ben
nie, otwieram niejednorodny arkusz sprite i rysuję prostokąt wokół sprite (który automatycznie się kurczy do właściwego rozmiaru). Po utworzeniu animacji powtarzam, że mogę odtworzyć każdą animację i dostosować przesunięcie zgodnie z moimi potrzebami.
Anonimowa
Wygląda na bardzo fajne narzędzie, które tam stworzyłeś. Chcesz udostępnić to narzędzie?
eckyputrady
@eckyputrady, przykro mi, ale nie jest jeszcze kompletny, ale polecam inne narzędzie (które w zasadzie mnie zainspirowało). Można go znaleźć tutaj: colourclash.com/sprite_buddy/sprite_buddy.html
Anonimowa
0

Sprawdź texturepacker

http://www.texturepacker.com/

Wysyła taki plik (w zależności od preferowanych ustawień)

    {
    "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}
}

Korzystając z tych danych, możesz łatwo pobrać oddzielne prostokąty z obrazu.

omgnoseat
źródło
To nie jest technologia, której użyć pytania. Po prostu odpowiedź z linkiem do narzędzia i przykładem jego działania nie jest moim zdaniem wystarczająca.
MichaelHouse
-1

spritebuddy.com działa dla mnie świetnie. Nie mogłem znaleźć żadnej pomocy w samej witrynie, ale ten post w Grupach dyskusyjnych Google bardzo dobrze to wyjaśnia. Automatycznie zgaduje granice dla twoich duszków, pozwala ci to dostosować, ORAZ pozwala ci ułożyć je w sekwencje animacji. Następnie wyrzuca plik metadanych dla tego wszystkiego w JSON lub XML. Następnie wystarczy przeanalizować ten plik danych w grze, aby uzyskać prawidłowe prostokąty ograniczające.

CletusW
źródło
1
To nie jest technologia, której użyć pytania. Ponadto narzędzie to zostało już zasugerowane w jednym z komentarzy.
MichaelHouse
Zaktualizowałem swoją odpowiedź, ale nie zgadzam się, że nie odpowiada na pytanie PO: „Chciałbym ustalić: offset_x, offset_y, szerokość, wysokość”. To, czy musi się to zdarzyć w czasie wykonywania gry (co byłoby strasznie nieskuteczne), czy wcześniej, nie jest określone. Jeśli chodzi o „EDYTUJ: [...] Przeredagowałem moje pytanie, aby było bardziej uwzględniające wrt. Faktyczny proces korzystania z arkusza sprite w grze”, to mój proces. Generuję odpowiedni plik JSON za pomocą spritebuddy, a następnie analizuję go w mojej grze, aby uzyskać potrzebne dane.
CletusW
1
@CletusW: dobre odpowiedzi wyjaśniłyby, dlaczego to narzędzie działa tak dobrze w twoim procesie, co robi i jak to pomaga itp. Powinienem być w stanie przeczytać twoją odpowiedź, a następnie wiedzieć, jak wybrać narzędzie lub napisać własne. Jeśli umieścisz link do swojego ulubionego przykładu, to tylko bonus, a nie sedno odpowiedzi.
Sean Middleditch