Pixel-Art und Sprites: Grafik für kleine Spiele

Kurz: Sprites sind kleine Bilder für Spielfiguren und Objekte; Pixel-Art zeichnet sie Pixel für Pixel mit wenigen Farben und wirkt gerade deshalb klar und charmant.

Genauer: Ein Sprite ist ein 2D-Bild, das im Spiel bewegt wird. In Pixel-Art sind die einzelnen Pixel sichtbar und bewusst gesetzt. Der Stil entstand aus technischen Grenzen alter Konsolen und ist heute besonders bei Indie-Spielen beliebt, weil man mit wenig Aufwand einen einheitlichen Look erreicht.

Im Detail

Grundlagen

• Typische Größen: 16×16, 32×32, 64×64 Pixel; die Einheit bleibt im ganzen Spiel gleich.
• Farbpalette begrenzen (zum Beispiel 16 bis 32 Farben). Fertige Paletten: Lospec, PICO-8, Sweetie 16.
• Hell-Dunkel: Licht kommt von einer Seite, Schatten mit dunkleren Tönen derselben Farbfamilie (Hue-Shifting).
• Keine Kantenglättung (Anti-Aliasing) auf Rändern, damit Kanten scharf bleiben.
• Skalieren nur mit ganzzahligen Faktoren (2×, 3×, 4×) und Nearest-Neighbor, sonst wird es unscharf. In CSS: image-rendering: pixelated;.

Animation und Sprite-Sheets

Animationen bestehen aus Einzelbildern (Frames), die schnell hintereinander gezeigt werden (zum Beispiel Laufen mit 4 bis 8 Frames, 8 bis 12 Bilder pro Sekunde). Alle Frames liegen in einem Sprite-Sheet (ein Bild, regelmäßig aufgeteilt). Im Spiel wird je Frame ein Ausschnitt gezeichnet, zum Beispiel mit ctx.drawImage(sheet, sx, sy, w, h, x, y, w, h) im Canvas. Das spart Ladezeit, weil nur eine Datei geladen wird.

Werkzeuge

Aseprite (kostenpflichtig, beliebt), LibreSprite (frei), Piskel (im Browser), Pixelorama, GIMP/Krita mit Pixelraster. Für Tilemaps: Tiled. Kostenlose Asset-Seiten wie OpenGameArt oder itch.io bieten Sprites, aber Lizenz beachten (CC0, CC-BY, Namensnennung).

Rechte und Kreativität

Zeichne eigene Sprites oder nutze Material mit passender Lizenz und vermerke die Quelle. Kopiere keine geschützten Figuren (Pokémon, Mario). Für Anfänger: klein anfangen, wenige Farben, erst eine Figur mit Idle- und Lauf-Animation, dann Umgebung.

Siehe auch: Game Loop und Deltazeit, Creative Commons und Bildrechte, Browserspiele programmieren