Spiele / Bilder
Sprite-Sheet-Ersteller, -Zuschneider und -Animator
Ordne Bilder in einem Sprite-Sheet oder Texture-Atlas an, teile ein Sheet in einzelne Frames auf und animiere sie. Speichere PNGs, JSON-Hash-Metadaten, CSS-Klassen, ZIP-Dateien oder ein animiertes GIF, ohne deine Bilder hochzuladen.
Sprite-Sheet-Ersteller, -Zuschneider und -Animator: Erstellen kombiniert PNG-, JPG-, WebP-Bilder und dekodierte GIF-Frames zu einem Raster, einer Zeilen- oder Spaltenanordnung oder einem gepackten Sheet. Gleich große Zellen passen sich an das größte Bild an und können mittig oder unten-mittig ausgerichtet werden. Außerdem stehen Innenabstand, Abstand zwischen den Zellen und optional Zweierpotenz-Dimensionen zur Verfügung. Zuschneiden teilt nach Rasteranzahl oder Pixelgrößen auf oder erkennt durch Transparenz beziehungsweise eine Hintergrundfarbe getrennte Inseln. Du kannst Rechtecke ausschließen, leere Zellen überspringen und transparente Ränder vor dem Speichern als ZIP oder vor dem Übergeben der Frames an Animieren entfernen. Animieren spielt einen ausgewählten Frame-Bereich mit 1–60 FPS in einer Schleife oder in Pingpong-Reihenfolge ab, mit Pixelzoom und optionaler Zwiebelschicht. Es speichert ein GIF oder einen horizontalen PNG-Streifen. Wenn du deine Frames zuerst zeichnen möchtest, starte mit dem Pixel-Art-Ersteller. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Spiele & Party
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
Ordne Einzelbilder in einem Sprite-Sheet für dein Spiel an.
Einheitliche Zellen verwenden das größte Einzelbild sowie Innenabstand auf jeder Seite. Der Abstand trennt die Zellen.
Füge Einzelbilder hinzu, um zu beginnen. Du kannst ein Sprite-Sheet auch unter „Zuschneiden“ aufteilen und die Einzelbilder hierher senden.
Deine Bilder und Exporte bleiben in diesem Browser. Verwende die gespeicherten Dateien in deinem eigenen Spielprojekt.
Sprite Sheets und Texturatlanten
Ein Sprite Sheet speichert mehrere Animationsbilder oder Spielgrafiken in einem Bild. Ein regelmäßiges Raster beschreibt jedes Bild anhand seiner Zellposition. Ein Texturatlas kann unterschiedlich große Rechtecke verwenden und benötigt Koordinaten, die jedes Bild beschreiben. Die Dokumentation von Godots AtlasTexture (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) erklärt, wie ein Bereich eines Atlasses als Textur verwendet wird.
Die Ausrichtung an der unteren Mitte hält die Füße einer Figur über alle Bilder hinweg auf derselben Grundlinie. Beim Packen in Zeilen bleiben die ursprünglichen Abmessungen jedes Bildes erhalten; eine Drehung findet nicht statt. Eine Zweierpotenz-Größe fügt rechts oder unten ungenutzte Pixel hinzu, skaliert dein Bildmaterial aber nicht. PNG behält die vollständige Alphatransparenz, während GIF weniger Farben und nur eine Transparenz mit einem Bit bietet.
JSON-Hash-Koordinaten
Der JSON-Hash-Export verwendet die Bildnamen als Schlüssel unter frames. Jeder Eintrag enthält ein Bildrechteck mit x, y, w und h, eine sourceSize, eine spriteSourceSize sowie die Kennzeichen rotated und trimmed. Die Koordinaten zählen Pixel von der oberen linken Ecke des Sheets aus. Das meta-Objekt speichert den Dateinamen des Bildes und die Gesamtgröße des Sheets. Der JSON-Hash-Atlas-Loader von Phaser (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) beschreibt dieses Format mit benannten Bildern.
Lass Exporte die ursprünglichen Bildgrenzen statt der aufgefüllten Zellgrenzen verwenden und setze trimmed und rotated auf false. Mit „Ausschneiden“ kannst du eine separate Liste ausgewählter Rechtecke exportieren. Schneide transparente Ränder nur dann ab, wenn du eng zugeschnittene Ausschnitte möchtest; lasse diese Option deaktiviert, um regelmäßige Animationszellen und ihre Ausrichtung zu erhalten. Vergleiche die gespeicherten Rechtecke mit dem Import deines Projekts, bevor du den Atlas in einem Projekt verwendest.
So benutzt du es
- Wähle Erstellen, Zuschneiden oder Animieren. Für jeden Modus gibt es einen Link, den du als Lesezeichen speichern kannst.
- Füge Frames oder ein Sheet hinzu und passe anschließend das Layout, das Zuschneide-Raster oder die Animationseinstellungen an.
- Sieh dir das Ergebnis in der Vorschau an und lade die Dateien für dein Spieleprojekt herunter.
Datenschutz & Einschränkungen
Deine Dateien bleiben in deinem Browser. Es wird nichts hochgeladen.
Ähnliche Tools
Häufige Fragen
Soll ich ein Raster oder einen gepackten Texture-Atlas verwenden?
Ein Raster gibt jedem Frame dieselbe Zellengröße und lässt sich einfach zuschneiden oder als reguläre Animation importieren. Ein gepacktes Sheet ordnet unterschiedlich große Frames in Reihen an, um Platz zu sparen. Gepackte Frames werden nicht gedreht. In deiner Game-Engine brauchst du die exportierten JSON-Rechtecke oder entsprechende Regionseinstellungen.
Warum sollte ich Innenabstand, Abstand oder Rand-Extrusion verwenden?
Gefilterte Texturen können benachbarte Pixel abtasten und Farbsäume erzeugen, das sogenannte Texture Bleeding. Der Innenabstand lässt Platz innerhalb jeder Zelle; der Abstand zwischen den Zellen erzeugt eine Lücke. Dieses Tool fügt transparente Pixel oder Pixel in der Hintergrundfarbe hinzu, kopiert aber keine Randpixel. Bei der Extrusion werden die Randfarben eines Sprites in seinen Randbereich verlängert. Wenn dein Projekt das benötigt, verwende die Textureinstellungen deiner Engine oder einen Atlas-Packer mit Extrusion – besonders bei Mipmaps.
Wie importiere ich das Sheet in Godot, Unity oder Phaser?
Verwende in Godot Bereiche des Sheets als Atlas-Texturen oder Animationsframes. Behandle das Bild in Unity als mehrere Sprites und teile es in ein reguläres Raster auf oder definiere die Rechtecke. Phaser kann ein reguläres Sprite-Sheet oder einen JSON-Hash-Atlas verwenden. Bewahre die PNG und die zugehörige JSON-Datei zusammen auf. Die Importeinstellungen unterscheiden sich: Wähle für gestochen scharfe Pixel-Art die Filterung mit Nächster Nachbar, prüfe Transparenz und Zellengrößen und achte darauf, dass Frame-Namen und JSON-Format zu deinem Projekt passen.
Welche Grenzen gelten für Transparenz und Timing bei GIFs?
GIF unterstützt höchstens 256 Palettenfarben und einen transparenten Paletteneintrag. Pixel sind daher entweder vollständig transparent oder deckend. Ein Alpha-Wert unter 50% wird transparent, alle anderen Alpha-Werte werden deckend. Wähle stattdessen eine matte Farbe, um weiche Kanten zu überblenden. Frame-Verzögerungen werden auf 10 ms gerundet, mit mindestens 20 ms. Daher kann 60 FPS nicht exakt dargestellt werden. Das exportierte GIF wird fortlaufend wiederholt; Pingpong fügt die Rückwärtsframes hinzu, ohne die Endpunkte zu wiederholen.
Verlassen meine Dateien den Browser?
Nein. Das Einlesen der Bilder, das Anordnen der Sheets, das Erkennen von Inseln und das Erstellen der Exporte finden vollständig auf deinem Gerät statt. Große Sheets und lange Animationen benötigen mehr Speicher. Oberhalb von 400 Frames oder 8.192 Pixeln an einer Seite wird eine Warnung angezeigt. Die Arbeitsgrenzen liegen bei 1.000 importierten Frames, 16.384 Pixeln pro Seite und 64 Millionen Pixeln pro Bild oder Animationsexport.
Kostenloses Tool · läuft in deinem browser · kein Konto nötig