Sprite-Sheet-Ersteller mit Animation und Metadaten

01

Sprite-Sheet-Ersteller ohne Atlas-Software verwenden

Sprite-Sheet-Ersteller — Frames ordnen, Zelle festlegen, Bewegung prüfen und exportieren

Füge Frames in Abspielreihenfolge hinzu. Verschieben oder Löschen ändert Vorschau und Metadatenindex. Ein Streifen eignet sich für kurze Schleifen, ein Raster verhindert eine extrem breite Textur.

Breite und Höhe legen jede Zelle fest. Einpassen zeigt die ganze Quelle, Ausfüllen beschneidet, Strecken erzwingt das Maß. Abstand trennt Zellen, der Außenrand umgibt den Atlas; beide fließen in x und y ein.

Erzeuge die Ausgabe vor dem Kopieren. Übersteigt der Atlas ein sicheres Budget, werden Bild und Koordinaten gemeinsam skaliert. CSS oder JSON beschreibt dadurch exakt die gespeicherte Datei.

• Sprite-Sheet-Ersteller — Nutze einheitliche Bildausschnitte.
• Sprite-Sheet-Ersteller — Bewahre Alpha für unregelmäßige Figuren.
• Sprite-Sheet-Ersteller — Dateinamen werden Metadatenschlüssel.
• Sprite-Sheet-Ersteller — Teste Bild und Koordinaten im Zielsystem.

02

Sprite-Sheet-Ersteller — Atlas-Abmessungen bewusst wählen

Sprite-Sheet-Ersteller — Zellen, Abstand und Rand bestimmen Koordinaten

Der Sprite-Sheet-Ersteller macht seine Geometrie nachvollziehbar. Spalten bestimmen Zeilenumbrüche; Streifen erzwingen eine Zeile oder Spalte. Jeder Ursprung beginnt nach dem Außenrand und rückt um Frame-Maß plus Abstand weiter. Muss die Canvas-Fläche verkleinert werden, verwenden Bild und Koordinaten denselben endgültigen Maßstab.

03

Sprite-Sheet-Ersteller — Unveröffentlichte Grafiken im Browser behalten

Sprite-Sheet-Ersteller — Lokale APIs vermeiden Verarbeitungs-Uploads

Ausgewählte Dateien werden mit createImageBitmap() dekodiert und auf einer lokalen Canvas gezeichnet. Vorschaubilder nutzen vom Browser erzeugte Blob-Adressen. Es gibt keinen Upload-Endpunkt, kein Konto und kein Cloud-Projekt. Beim Leeren werden Bitmaps geschlossen und Vorschau-URLs widerrufen, ohne die Quelldateien zu verändern.

04

Sprite-Sheet-Ersteller — Koordinaten für CSS oder Game-Engines exportieren

Sprite-Sheet-Ersteller — Alle Formate beschreiben denselben Atlas

Das JSON-Array bewahrt die Reihenfolge, während das JSON-Objekt nach Dateinamen suchen lässt. CSS erzeugt eine gemeinsame Hintergrundregel und je Frame eine Klasse mit negativen background-position-Werten. PNG erhält Alpha; WebP bietet regelbare Qualität. Sämtliche Maße beziehen sich auf die tatsächlich exportierte Atlas-Datei.

05

Sprite-Sheet-Ersteller — Atlas-Ausgabe verifizieren

Sprite-Sheet-Ersteller — Offizielle Spezifikationen ermöglichen reproduzierbare Prüfungen

Die Prüfung verbindet offizielle Dokumentation und reproduzierbare Browser-Tests. MDN beschreibt drawImage() und toBlob(), der W3C-Standard background-position. Tests laden Farben mit unterschiedlichen Maßen und Alpha, ändern die Reihenfolge, prüfen Rechtecke, exportieren WebP, lesen 148 mal 414 Pixel erneut aus und unterscheiden im Netzwerkprotokoll statische Ressourcen von lokalen Blob-Zugriffen.

06

Sprite-Sheet-Ersteller — Mit der Leserichtung beginnen

Sprite-Sheet-Ersteller — Das Layout soll die richtige Geschichte erzählen

Sprite-Sheet-Ersteller — Beginne mit der Reihenfolge. Die Liste zeigt die Ausgabe und erlaubt Verschieben oder Entfernen, ohne das Original zu ändern. Horizontal vergleicht, vertikal zeigt Schritte, das Raster ordnet Sammlungen und intelligentes Stitching verbindet aufeinanderfolgende Screenshots.

Sprite-Sheet-Ersteller — Natürliche Größen erhalten Pixel, gleiche Breite oder Höhe richtet eine Komposition aus. Abstand, Ausrichtung und Hintergrund werden vor dem Export berechnet. Die Vorschau zeigt falsche Reihenfolgen oder Lücken.

Sprite-Sheet-Ersteller — Die zentrale Aktion steht oben. Dateien lassen sich auswählen oder ablegen und danach mit Maus oder Tastatur neu sortieren. Bilder zusammenfügen bleibt bis zum Download umkehrbar.

07

Sprite-Sheet-Ersteller — Das passende Ausgabeformat wählen

Sprite-Sheet-Ersteller — PNG, JPEG und WebP erfüllen verschiedene Aufgaben

Sprite-Sheet-Ersteller — PNG eignet sich für Text, Screenshots und Transparenz. JPEG verkleinert Fotos oft, verliert aber Details und unterstützt keine Transparenz. WebP ist ein Kompromiss, wenn das Zielsystem es akzeptiert.

Sprite-Sheet-Ersteller — Originalpixel bleiben erhalten, soweit Layout und Sicherheitsgrenzen es erlauben. Breite, Höhe oder Rasterzellen werden nur bei Bedarf angepasst. Prüfe Vorschau und Maße vor dem Download.

Sprite-Sheet-Ersteller — Das beste Format hängt vom Ziel ab. Eine kleine Datei kann feinen Text beschädigen, ein verlustfreies PNG kann ein Portal-Limit überschreiten. Prüfe die Vorgaben des Zielsystems vor dem Export.

08

Sprite-Sheet-Ersteller — Lange Screenshots vorsichtig verbinden

Sprite-Sheet-Ersteller — Die Erkennung muss ohne Datenverlust scheitern

Sprite-Sheet-Ersteller — Die Erkennung funktioniert am besten mit aufeinanderfolgenden Screenshots desselben Ansichtsbereichs und einem stabilen wiederholten Streifen. Animationen, Video, fixe Kopfzeilen oder wechselnde Uhren senken die Zuverlässigkeit.

Sprite-Sheet-Ersteller — Verkleinerte Streifen werden für eine schnelle Prüfung verglichen. Ein gemeinsamer Bereich wird nur oberhalb der gewählten Empfindlichkeit entfernt; andernfalls bleiben beide Bilder vollständig und eine Warnung erscheint.

Sprite-Sheet-Ersteller — Prüfe die Naht bei lesbarem Text. Eine fehlende Zeile ist schlimmer als eine doppelte. Deaktiviere die Option im Zweifel oder erstelle neue Screenshots mit einem größeren stabilen Bereich.

09

Sprite-Sheet-Ersteller — Private und große Dateien schützen

Sprite-Sheet-Ersteller — Lokale Verarbeitung verändert Risiko und Leistung

Sprite-Sheet-Ersteller — Der Browser liest nur ausgewählte Dateien, dekodiert sie und zeichnet das Ergebnis auf einer lokalen Fläche. Kein Konto, kein Verarbeitungsserver und keine kostenpflichtige API sind nötig; 0 Quelldateien werden im Kernablauf an MergeImage gesendet.

Sprite-Sheet-Ersteller — Lokale Verarbeitung eignet sich für Entwürfe, private Fotos, Rechnungen und interne Screenshots, die nicht unnötig übertragen werden sollen. Sie vermeidet auch Wartezeit durch Upload und zweiten Download.

Sprite-Sheet-Ersteller — Der Arbeitsbereich akzeptiert 30 Bilder und 20 MB pro Datei. Ergebnisse über 12.000 Pixel Kantenlänge oder 80 Megapixel werden proportional verkleinert. Das sind Produkt-Schutzgrenzen, keine universellen Browsergrenzen.

10

Sprite-Sheet-Ersteller — Vor dem Teilen prüfen

Sprite-Sheet-Ersteller — Eine kurze Kontrolle spart Nacharbeit

Sprite-Sheet-Ersteller — MDN dokumentiert createImageBitmap() zum asynchronen Erstellen eines Bitmaps und canvas.toBlob() zum Erzeugen eines kodierten Blobs. Die W3C File API beschreibt Dateien aus der Browserauswahl.