Anleitung: Pixel-Art-Rotator
- Lege ein Sprite oder ein Spritesheet im Tool ab.
- Klicke auf 90°, 180° oder 270° oder zieh den Winkelregler für alles dazwischen.
- Behalte die RotSprite-Methode für saubere Linien oder wechsle zu Nearest für ein härteres, schnelleres Ergebnis.
- Bei einem Spritesheet schaltest du die Drehung pro Frame ein, damit sich jeder Frame um seine eigene Mitte dreht.
- Lade das PNG herunter oder exportiere ein Spritesheet mit 4, 8, 16 oder 32 gleichmäßig verteilten Winkeln.
Was du bekommst
- Gedrehtes PNG mit erhaltener Transparenz
- Leinwand, die mitwächst, damit das gedrehte Sprite hineinpasst (optional)
- Richtungs-Spritesheet mit N gleichmäßig verteilten Drehungen
Tipps aus der Spieleentwicklung damit
- Pixel-Art um krumme Winkel zu drehen kostet immer etwas Detail. Kleine Drehungen (15°–30°) an einfachen Formen wie Schwertern, Pfeilen und Projektilen sehen am besten aus.
- Das Richtungs-Spritesheet ist ein schneller Weg zu 8 oder 16 Ausrichtungen für ein Top-down-Geschoss oder Auto. Die Diagonalen bessert du danach von Hand nach.
- Wenn ein gedrehtes Outline bricht, versuch den Winkel ±1°. RotSprite-Sampling kann bei benachbarten Winkeln anders ausfallen.
- Zeichne für Figuren separate Richtungen von Hand. Drehen funktioniert für Objekte, nicht für alles mit einem klaren „Oben“.
Anwendungsfälle
- Projektile, Autos und Raumschiffe mit 8 Richtungen für Top-down-Spiele erstellen
- Ein Schwert- oder Werkzeug-Sprite für Schlaganimationen drehen
- Ganze Spritesheets mit Tiles oder Items in einem Rutsch um 90° drehen
- Grafiken korrigieren, die in die falsche Richtung gezeichnet wurden
FAQ
Warum wird meine Pixel-Art unscharf, wenn ich sie woanders drehe?
Die meisten Bildbearbeitungen nutzen bilineare Filterung, die benachbarte Pixel zu neuen Zwischenfarben mischt. Dieses Tool sampelt nur vorhandene Pixel, das Ergebnis hat also dieselbe Palette wie die Vorlage.
Was ist RotSprite?
Ein Algorithmus zum Drehen von Pixel-Art. Er skaliert das Sprite mit einem kantenbewussten Scale2x-Durchgang auf 8×, dreht das Ergebnis und sampelt es wieder herunter. Dünne Linien bleiben dabei viel besser verbunden als bei einfacher Nearest-Neighbor-Drehung.
Sind Drehungen um 90°, 180° und 270° verlustfrei?
Ja. Vierteldrehungen verschieben Pixel ohne Resampling, du kannst also zurückdrehen und bekommst exakt das Original.
Kann ich jeden Frame eines Spritesheets drehen?
Ja. Schalte die Drehung pro Frame ein und prüfe das erkannte Raster. Jeder Frame dreht sich um seine eigene Mitte und behält seine Größe, das Layout des Spritesheets bleibt also gleich.
Kommen neue Farben hinzu?
Nein. Beide Methoden kopieren Pixel aus der Quelle, die Ausgabepalette ist also eine Teilmenge der Eingabepalette.
Wird etwas hochgeladen?
Nein. Die Drehung läuft in deinem Browser und die Datei verlässt nie dein Gerät.