Sprite-Größen

Die Größe deiner Sprites bestimmt Look, Arbeitsaufwand und Bildschirmaufteilung eines Pixel-Art-Spiels. So wählst du sie und hältst die Größen stimmig.

Ein laufender Goblin, gerendert von Pixor
Eine sich drehende Münze, gerendert von Pixor
Ritter, 32 Pixel hoch gerendert
32 px
Ritter, 64 Pixel hoch gerendert
64 px

Was es ist

Die Sprite-Größe ist die Größe des Frames, in dem ein Objekt gezeichnet wird, oft ein Quadrat wie 16×16 oder 32×32. Sie hängt eng mit zwei anderen Zahlen zusammen: der Grundauflösung des Spiels (wie viele Art-Pixel auf den Bildschirm passen) und dem Maßstab (zu wie vielen Bildschirmpixeln jedes Art-Pixel wird).

Übliche Größen

  • 16 px. Klassische Kacheln, Items und kleine Figuren. Sehr gut lesbar, wenig Platz für Details, schnell gezeichnet. Passt zu Retro-Platformern und Top-down-Abenteuern mit viel auf dem Bildschirm.
  • 32 px. Eine gängige Figurengröße für moderne Pixel-Art-Spiele. Platz für ein Gesicht, Kleidung und klare Posen. Kacheln sind oft 16 oder 32 px groß.
  • 48 px. Ein Mittelweg für Figuren mit Ausrüstung und ausdrucksstarker Animation, ohne den Arbeitsaufwand von 64.
  • 64 px und mehr. Detaillierte Figuren, Fighting Games, Bosse und Nahaufnahmen. Jeder Frame braucht von Hand viel länger zum Zeichnen.

Kacheln und Figuren

Kacheln und Figuren müssen nicht zusammenpassen. Ein Kachelraster von 16 px mit einem 24 oder 32 px großen Helden ist üblich: Der Held ist anderthalb oder zwei Kacheln groß. Wähle die Figurengröße nach Lesbarkeit und Animation, die Kachelgröße nach dem Levelbau. Halte dann die Pixelgröße für beides gleich, sonst bekommst du Mixels.

Um ganze Zahlen skalieren

Pixel-Art wird klein gezeichnet und groß gezeigt. Wähle eine Grundauflösung und skaliere sie dann um eine ganze Zahl:

  • 320×180 skaliert mit 6 auf 1920×1080 und mit 8 auf 2560×1440.
  • 640×360 skaliert mit 3 auf 1920×1080 und mit 6 auf 3840×2160.

Bei ganzzahligen Maßstäben wird jedes Art-Pixel zu einem scharfen Quadrat. Bei 2.5× werden manche Pixel zu zwei Bildschirmpixeln und manche zu drei, was ungleichmäßig aussieht. Schalte die Texturfilterung ab (Nearest Neighbour), damit Pixel scharf bleiben.

Häufige Fehler

  • Zu groß wählen. Figuren mit 64 px sehen im Mock-up großartig aus und kosten weit mehr Frames, als ein kleines Team zeichnen kann.
  • Sprites einzeln skalieren. Einen großen Gegner durch 2×-Skalieren eines kleinen zu machen, zerstört das Pixelraster.
  • Den Bildschirm ignorieren. Eine Figur mit 64 px auf einem 320×180-Bildschirm lässt wenig Raum zum Spielen.

Wie du von Hand wählst

  1. Lege die Grundauflösung fest und was auf den Bildschirm passen muss.
  2. Bau ein Mock-up eines Bildschirms mit einer Figur, ein paar Kacheln und der Oberfläche.
  3. Teste die Figur in zwei Größen, etwa 24 und 32 px, und spiel sie in echter Geschwindigkeit an.
  4. Leg die Größe fest und miss dann alles andere daran.

So macht es Pixor

Gib den Kameras in Pixor einen festen Wert für Pixel/m (standardmäßig passt jede ihr Sprite an eine eigene Größe an). Stell ihn so ein, dass deine Hauptfigur die gewünschte Höhe hat, und jedes andere Modell rendert im richtigen Verhältnis mit derselben Pixelgröße. Um 32 gegen 64 auszuprobieren, ändere den Maßstab und rendere neu; nichts muss neu gezeichnet werden. Der Pivot bleibt in jedem Frame und auf jeder Seite auf ein Pixel fixiert, sodass Sprites auf dem Kachelraster ausgerichtet sind.

Fragen

Meint die Sprite-Größe Breite oder Höhe?

Meist ist die Größe des Frames oder der Kachel gemeint, etwa 32×32. Figuren füllen oft nur einen Teil davon, also prüfe auch die Höhe der Figur.

Sollten Kacheln und Figuren gleich groß sein?

Nicht unbedingt. Ein übliches Setup sind Kacheln mit 16 px und Figuren mit 16 bis 32 px Höhe. Wichtig ist, dass alle Art dieselbe Pixelgröße nutzt.

Warum sieht meine Pixel-Art in der Engine unscharf aus?

Es wird um einen nicht ganzzahligen Faktor skaliert oder gefiltert. Nutze Nearest-Neighbour-Filterung und ganzzahlige Maßstäbe.

Weiterlesen

Probier es mit deinem eigenen Modell aus, kostenlos im Browser, oder hol dir die Vollversion.

Im Browser testen Pixor holen