Anleitung: Sprite-Pivot-Editor
- Lege ein Spritesheet ab und prüfe das erkannte Raster.
- Klicke in die große Frame-Ansicht, um den Pivot zu setzen, oder nutze eine Vorgabe: Mitte, unten Mitte, oben links oder Füße (automatisch anhand der untersten Pixel erkannt).
- Blättere mit den Pfeilen oder den Tasten , und . durch die Frames und verschiebe Pivots mit den Pfeiltasten (Shift = 4 px).
- Beobachte die Vorschau: Die Frames werden an ihrem Pivot ausgerichtet über einer Bodenlinie gezeichnet, so fällt jedes Zittern sofort auf.
- Stelle FPS, Dauer pro Frame und Loop-Modus ein und exportiere dann generisches JSON, JSON im Aseprite-Stil oder im Godot-Stil.
Was du bekommst
- Generisches JSON: Frame-Rechtecke, Pivot in px und 0–1, Dauer, FPS, Loop
- JSON im Aseprite-Stil (json-array mit frameTags)
- Godot-freundliches JSON (Regionen, Offsets, relative Dauer)
Tipps aus der Spieleentwicklung damit
- „Füße“ findet unten mittig die sichtbaren Pixel jedes Frames – der richtige Pivot für die meisten Figuren in der Seitenansicht.
- Die Zwiebelhaut zeichnet den vorherigen Frame an seinem Pivot ausgerichtet, so kannst du Fuß oder Kopf zwischen den Frames exakt angleichen.
- Halte einen Key-Frame länger, indem du ihm eine eigene Dauer gibst: Anticipation- und Impact-Frames brauchen oft das 2- bis 3-Fache der Grundzeit.
- Wenn du ein exportiertes JSON wieder importierst, werden Pivots und FPS wiederhergestellt – du kannst also später weiter justieren.
Anwendungsfälle
- Zittern aus KI-generierten oder abgepausten Animationen entfernen
- Ursprungspunkte für Angriffe und Sprünge festlegen, die sich pro Frame unterscheiden
- Spritesheets für Engines vorbereiten, die Ursprünge pro Frame auslesen
- Timing-Daten an einen Programmierer übergeben
FAQ
Was ist ein Pivot?
Der Punkt eines Frames, der im Spiel auf der Position des Sprites liegt. Bei einer Figur ist das meist zwischen den Füßen, damit sie auf dem Boden steht, egal wie der Frame gezeichnet ist.
Warum rutscht oder zittert meine Animation?
Die Figur steht nicht in jedem Frame an derselben Stelle. Mit einem Pivot pro Frame kann die Engine das ausgleichen, und die Vorschau hier zeigt das Ergebnis schon vor dem Export.
Welche Formate kann ich exportieren?
Ein generisches JSON mit allem, ein json-array im Aseprite-Stil mit Frame-Tags und normalisierten Pivots sowie ein JSON im Godot-Stil mit Regionen und Offsets relativ zur Frame-Mitte.
Kann ich Pivots wieder importieren?
Ja. Jedes der drei Exportformate lässt sich wieder laden, um Pivots, Dauer und FPS wiederherzustellen.
Verändert das mein Bild?
Nein. Das Spritesheet bleibt, wie es ist; exportiert werden nur die JSON-Daten.
Wird mein Spritesheet hochgeladen?
Nein. Alles passiert lokal in deinem Browser.