Sprite Maker

Eine Sprite-Leinwand ist kein Bild, das später verkleinert wird: Die Größe, die du wählst, ist die Auflösung, die der Spieler sieht. Bei 16×16 ist eine Figur eine Silhouette mit zwei Pixeln als Augen – deshalb passt diese Größe zu Gegenständen, Icons und kleinen Helden. Bei 32×32 ist Platz für ein Gesicht, eine erkennbare Hand und eine Schattierungsreihe. Bei 64×64 bist du näher an der Illustration, und jeder Animationsframe kostet viermal so viele Pixel wie einer mit 32×32.

Leite die Größe von den anderen Sprites deines Spiels ab, nicht von den Details, die du gern hättest. Ein Tileset auf einem 16-Pixel-Raster verlangt Figuren, die 16 oder 32 Pixel hoch sind. Muss ein Sprite wachsen, hält das Größenfeld die Zeichnung an der gewählten Kante oder Ecke fest, und jeder Frame wird genauso skaliert – die Animation bleibt deckungsgleich.

Die meisten guten Sprites kommen mit vier bis sechzehn Farben aus. Eine kleine Palette zwingt jede Farbe, eine Aufgabe zu übernehmen: Umriss, Grundton, ein oder zwei Schatten, ein Glanzlicht. Wähle eine Grundfarbe und baue mit den Schaltflächen „dunkler“ und „heller“ daneben eine Farbreihe auf; wenn der Farbton in den Schatten leicht Richtung Blau und in den Lichtern Richtung Gelb wandert, wirkt das wie Licht statt wie Grau.

Umrisse trennen das Sprite von jedem Hintergrund, auf dem es landet. Ein durchgehender dunkler Umriss ist bei kleinen Sprites die sicherste Wahl; bei größeren wirkt ein Umriss weicher, der die Farbe der Form annimmt, die er umschließt (Selective Outline). Vermeide es, jede Form von den Kanten nach innen zu schattieren – das macht sie flach („Pillow Shading“). Das Licht kommt von einer Seite, der Schatten fällt auf die andere.

Kurze Schleifen tragen den Großteil der Spielanimation. Ein Idle-Atmen oder -Wippen funktioniert mit zwei bis vier Frames bei vier bis sechs Bildern pro Sekunde. Ein Laufzyklus braucht meist vier bis acht Frames bei acht bis zwölf: die zwei Kontaktposen, in denen ein Fuß den Boden berührt, und die Durchgangsposen dazwischen. Ein Treffer oder Angriff liest sich am besten mit einem langsamen Ausholframe, ein oder zwei sehr schnellen Aktionsframes und einer gehaltenen Pose danach.

Zeichne zuerst die Schlüsselposen und fülle dann dazwischen auf. Duplizieren ist das Werkzeug dafür: Kopiere den Frame, auf dem du bist, und ändere nur die Pixel, die sich bewegen, damit der Körper nicht von Frame zu Frame wackelt. Mit eingeschalteter Zwiebelhaut scheint der vorige Frame blass unter den leeren Pixeln durch, sodass du einen Arm leicht um ein oder zwei Pixel verschiebst, statt ihn neu zu zeichnen. Um eine Pose länger zu halten, duplizierst du sie; jeder Frame eines GIFs läuft gleich lang.

Sieh dir die Vorschau in der Geschwindigkeit an, die das Spiel nutzen wird. Eine Animation, die in Zeitlupe flüssig wirkt, ruckelt bei voller Geschwindigkeit oft – und die Lösung sind fast immer weniger Pixel, die sich zwischen den Frames ändern, nicht mehr Frames.

Ein Spritesheet ist jeder Frame der Animation auf einem einzigen Bild. Das Sheet, das dieses Tool exportiert, hat weder Rand noch Lücke zwischen den Frames, deshalb kann jede Engine es allein anhand der Framegröße zerschneiden: Ein 32×32-Sprite mit acht Frames wird als 256×32-Streifen exportiert oder als 3×3-Raster, dessen letzte Zelle leer bleibt.

Exportiere für eine Engine in 1× und lass die Engine hochskalieren. Stelle in Godot den Texturfilter auf Nearest, damit die Pixel scharf bleiben. Setze in Unity den Filter Mode auf Point (no filter), schalte die Komprimierung aus und lass Pixels Per Unit der Sprite-Größe entsprechen. Importiere in GameMaker den Streifen und gib die Anzahl der Frames an. Transparente Pixel bleiben transparent, sodass das Sprite auf jedem Hintergrund stehen kann.

Ein 32×32-GIF in Originalgröße ist kleiner als ein Vorschaubild, und die meisten Seiten zeichnen kleine Bilder beim Vergrößern weich. Exportiere stattdessen in 4× oder 8×: Jedes Pixel wird zu einem Block aus 4×4 oder 8×8 gleichen Pixeln, und die Datei bleibt klein, weil GIF solche gleichen Folgen sehr gut komprimiert.

Transparenz in einem GIF ist eine abgeschaltete Farbe, deshalb zeigen manche Chat-Apps und soziale Netzwerke sie als Schwarz oder Weiß. Wenn die Animation dort gepostet wird, wo du den Hintergrund nicht bestimmst, exportiere sie auf Weiß.