Anleitung: Outline-Generator
- Lege ein Sprite oder Spritesheet ab.
- Wähle eine Farbe. „Dunkelste Farbe nutzen“ nimmt die dunkelste Farbe, die schon im Sprite steckt.
- Stelle die Dicke ein und wähle außen, innen oder beides.
- Schalte die Ecken um: Aus ergibt das klassische Pixel-Art-Outline mit offenen Diagonalen, An füllt sie.
- Bei Spritesheets lässt du „Jeden Frame umranden“ an, prüfst das Raster und lädst dann herunter.
Was du bekommst
- PNG mit Outline, Leinwand erweitert, damit nichts abgeschnitten wird
- Spritesheet, in dem jeder Frame umrandet und um denselben Betrag vergrößert ist
Tipps aus der Spieleentwicklung damit
- Die meiste handgezeichnete Pixel-Art nutzt bei 1 px Outlines ohne diagonale Ecken. Schalte die Ecken für Outlines ab 2 px oder für klobige UI-Icons ein.
- Ein dunkel getöntes Outline (tiefes Lila oder Marineblau) wirkt vor wechselnden Hintergründen meist besser als reines Schwarz.
- Ein inneres Outline in einem dunkleren Ton der eigenen Sprite-Farben verleiht schnell mehr Definition, ohne die Sprite-Größe zu ändern.
- Beim Umranden eines Spritesheets wächst jeder Frame auf jeder Seite um die Dicke. Passe die Frame-Größe in deiner Engine entsprechend an.
Anwendungsfälle
- Sprites auf unruhigen Hintergründen lesbar machen
- Auswahl- oder Hover-Outlines für Items und Einheiten erstellen
- KI-generierte Sprites in einheitlichem Stil umranden
- UI-Icons mit Outline bauen
FAQ
Was macht die Ecken-Option?
Aus nutzt nur die Nachbarn oben/unten/links/rechts, die diagonalen Ecken bleiben leer: der übliche handgezeichnete Pixel-Art-Look. An nutzt auch die diagonalen Nachbarn und füllt diese Ecken für ein runderes, kräftigeres Outline.
Warum ist mein Bild größer geworden?
Ein äußeres Outline braucht Platz außerhalb des Sprites, daher wächst die Leinwand auf jeder Seite um die Dicke. Innere Outlines behalten die Originalgröße.
Blutet das Outline auf einem Spritesheet zwischen die Frames?
Nicht mit „Jeden Frame umranden“. Jeder Frame wird ausgeschnitten, umrandet und mit zusätzlichem Platz zurückgesetzt, sodass sich Frames nie berühren.
Kann ich eine „Ausgewählt“-Hervorhebung erstellen?
Ja. Nutze eine helle Farbe wie Gelb oder Weiß mit äußerem Outline und speichere sie als eigenes Bild, das du zur Laufzeit unter oder über das Sprite zeichnest.
Kommt es mit halbtransparenten Pixeln klar?
Jedes Pixel mit Alpha über null zählt zum Sprite. Bereinige weiche Kanten zuerst mit dem Pixel-Art-Schärfer, wenn das Outline holprig wird.