Wie gehe ich mit Sprite-Blättern mit ungleichmäßigen Sprite-Abmessungen um?


14

Wie kann ich für ein Spritesheet mit ungleichmäßigen Sprite-Abmessungen die Begrenzungsrechtecke für jedes einzelne Sprite ermitteln (dh die blauen Kästchen in der folgenden Abbildung / ich habe nur einige Beispiele gezeichnet)?

Was ich feststellen möchte, sind: offset_x, offset_y, width, height

Bildbeschreibung hier eingeben

Bisher habe ich nur Spritesheets verwendet, auf denen alle Sprites identische Abmessungen haben. In diesem Fall müssen Sie lediglich den x- und den y-Versatz angeben, um ein bestimmtes Sprite zu erhalten. Bei Spritesheets mit ungleichmäßigen Abmessungen funktioniert dies jedoch nicht.

EDIT: Nachdem ich die Kommentare und Antworten gelesen hatte, formulierte ich meine Frage neu, um sie umfassender zu gestalten. der eigentliche Prozess der Verwendung eines Spritesheets in einem Spiel. Zuvor enthielt die Frage die Punkte, warum Spritesheets mit ungleichmäßigen Abmessungen erstellt werden und wie ich damit umgehen kann.


1
Es sieht für mich so aus, als hätten sie alle identische Größen. Der Raum, der nicht mit Farbe ausgefüllt wird, besteht nur aus Pixeln, bei denen das Alpha auf Null gesetzt ist.
Derek

Antworten:


8

Die meisten Sprite-Sheets mit nicht identischen Dimensionen haben normalerweise eine Art Metadaten mit dem Anker des Sprites. Es gibt viele Tools, mit denen Sie beispielsweise vollständige Alpha-Pixel entfernen und die benötigten Daten bereitstellen können, damit diese Daten nicht manuell generiert werden.

Wenn Sie diese Metadaten nicht haben, müssen Sie sie selbst verfassen. Der genaueste Weg ist der, den Sie in Ihrer Frage gesagt haben, und zwar einfach von Hand. Es kann eine Weile dauern, ist aber wahrscheinlich schneller als das Erstellen neuer Sprites.


Dies - während Ansätze, die auf der automatischen Erkennung basieren, ihren Nutzen haben, sind sie in der Praxis heikel und fehleranfällig. Sie haben bereits benötigten Metadaten für den Ursprung des Sprites (Sprites tut einen Ursprung hat, nicht wahr?), So zusätzliche Daten kaum zu viel von einer Belastung sind. Der Künstler sollte immer besser als Ihre App wissen, wie groß die einzelnen Sprites sind.
Steven Stadnicki

+1. Wenn Sie die Sprites mit Metadaten versehen, wird dies garantiert auf vernünftige Weise gelöst .
Bartek Banachewicz

5

Sie können das Bild analysieren, um die Begrenzungsrechtecke der einzelnen Sprites zu lokalisieren, diese Begrenzungsrechtecke zu sortieren (möglicherweise durch Erhöhen von mindestens X, dann Y), und Sie erhalten eine Reihe von Begrenzungsbereichen, die den Rahmen des Sprite-Blatts entsprechen.

Da dieser Vorgang relativ teuer sein kann, möchten Sie ihn wahrscheinlich offline ausführen, z. B. als Teil des Erstellungsprozesses für Ihr Spiel. Anschließend können Sie die Informationen zum Begrenzungsbereich in eine Datei serialisieren, die Sie mit dem entsprechenden Sprite-Sheet-Bild speichern. Zur Laufzeit laden Sie sowohl das Bild als auch die Grenzdefinitionsdatei und verfügen über die Informationen, die Sie für den Zugriff auf jedes einzelne Sprite benötigen.

Das ist aber leichter gesagt als getan. Im Wesentlichen sollten Sie die Feature-Erkennung und speziell die Blob-Erkennung durchführen, bei denen es sich um Bildverarbeitungsprobleme handelt. Sie können das Bild auch mit einem Schwellenwert versehen (Schwarzweiß) und eine Kantenerkennungstechnik verwenden . Die relevante Mathematik, die hinter diesen Techniken steckt, wird in diesen Links viel besser erklärt als ich, und falls Sie nicht in der Lage sind, diese Mathematik selbst zu implementieren, stehen Ihnen einige Bibliotheken zur Verfügung, die Sie unterstützen können. Die folgenden Links schienen mir am vielversprechendsten zu sein:


1
+1. Ich bin damit einverstanden, dass es einige Computer-Wahrnehmungs- / Bildmanipulationsfähigkeiten erfordert, um die richtigen Sprite-Grenzen zu finden. Manchmal ist es sogar unmöglich, zum Beispiel, wenn Sie sich die Animation von Schildkröten zu Muscheln ansehen. Es wird schwierig sein, die richtige Position für diese relativ zu den anderen Animationsrahmen zu bestimmen. Und was das Warum betrifft : Es liegt höchstwahrscheinlich an der optimalen Nutzung des Texturraums. Normalerweise sollte eine Datei mit den Koordinaten mit einem solchen Spritesheet geliefert werden. Wenn Sie es jedoch einfach aus der Google-Bildersuche abrufen, fehlen möglicherweise diese Informationen.
Bummzack

Sie sprechen einen guten Punkt an: Meine Antwort geht nicht auf das Problem der Sprite-Herkunft ein. es würde nur dazu führen, eng anliegende Begrenzungsrechtecke zu finden, und für ein Blatt mit ungleichmäßigen Sprites ist es ziemlich wichtig, den Ursprung jedes Rahmens zu kennen. Dies ist nur dann automatisch möglich, wenn Sie einige (wahrscheinlich domänenspezifische) Annahmen getroffen haben, zum Beispiel, dass der Ursprung immer (width / 2, maximum Y) oder so ist.

4

Ich habe mein eigenes Tool für diese Art von uneinheitlichem Spritesheet erstellt. Es ermöglicht das Bearbeiten von Offsets und so weiter. Hier ist ein Screenshot, um Ihnen eine Idee zu geben:

Bildbeschreibung hier eingeben


Wie sieht es aus, wenn Sie ein einheitliches Spritesheet erstellen, das nur eine Animation aus der nicht einheitlichen enthält? Oder interpretiere ich das falsch?
Ben

Nein, ich öffne ein ungleichmäßiges Spritesheet und zeichne ein Rechteck um die Sprites (das automatisch auf die richtige Größe verkleinert wird). Sobald ich eine Animation erstellt habe, kann ich jede Animation abspielen und den Versatz nach meinen Wünschen anpassen.
Anonymouse

Scheint wie ein sehr ordentliches Werkzeug, das Sie dort gemacht haben. Möchten Sie das Tool weitergeben?
eckyputrady

@eckyputrady, es tut mir leid, aber es ist alles andere als vollständig, aber ich empfehle ein anderes Tool (das mich im Grunde inspiriert hat). Sie finden es hier: colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse

0

Schauen Sie sich den Texturepacker an

http://www.texturepacker.com/

Es gibt eine Datei wie diese aus (abhängig von Ihren bevorzugten Einstellungen)

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

Mit diesen Daten können Sie einfach die einzelnen Rechtecke aus dem Bild ziehen.


Dies ist keine Frage, welche Technologie verwendet werden soll. Einfach mit einem Link auf ein Tool und einem Beispiel für dessen Ausgabe zu antworten, reicht meiner Meinung nach nicht aus.
MichaelHouse

-1

spritebuddy.com hat für mich großartig funktioniert. Auf der Website selbst konnte keine Hilfe gefunden werden, in diesem Google Groups-Beitrag wird dies jedoch sehr gut erläutert. Die Grenzen für Ihre Sprites werden automatisch erraten, Sie können sie anpassen UND Sie können sie in Animationssequenzen anordnen. Anschließend wird eine Metadatendatei für all dies entweder in JSON oder XML ausgegeben. Dann müssen Sie nur noch diese Datendatei in Ihrem Spiel analysieren, um die richtigen Begrenzungsrechtecke zu erhalten.


1
Dies ist keine Frage, welche Technologie verwendet werden soll. Weiterhin wurde dieses Tool bereits in einem der Kommentare vorgeschlagen.
MichaelHouse

Ich habe meine Antwort aktualisiert, bin jedoch nicht der Meinung, dass dies nicht die Frage des OP beantwortet: "Was ich bestimmen möchte, sind: offset_x, offset_y, width, height." Ob dies zur Laufzeit des Spiels (was fürchterlich nicht performant wäre) oder früher geschehen muss oder nicht, ist nicht festgelegt. In Bezug auf "BEARBEITEN: [...] Ich habe meine Frage umformuliert, um sie für den tatsächlichen Prozess der Verwendung eines Spritesheets in einem Spiel umfassender zu gestalten". Dies ist mein Prozess. Ich generiere die entsprechende JSON-Datei mit Spritebuddy und analysiere sie dann in meinem Spiel, um die benötigten Daten zu erhalten.
CletusW

1
@CletusW: Gute Antworten erklären, warum dieses Tool für Ihren Prozess so gut funktioniert, was es tut und wie es hilft usw. Ich sollte in der Lage sein, Ihre Antwort zu lesen und dann zu wissen, wie ich ein Tool auswähle oder mein eigenes schreibe. Wenn Sie auf Ihr Lieblingsbeispiel verlinken, ist das nur ein Bonus, nicht das Fleisch der Antwort.
Sean Middleditch
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.