Eine Basisauflösung von 640×360, ganzzahlig skaliert auf 1280×720, 1920×1080, 2560×1440 und 3840×2160

Bevor du die erste Kachel zeichnest, hat dein Pixel-Art-Spiel schon zwei Entscheidungen getroffen – entweder zufällig oder weil du sie bewusst triffst. Die erste ist die Basisauflösung: wie viele Pixel breit und hoch deine Spielwelt tatsächlich ist. Die zweite ist die Sprite-Größe: wie viele dieser Pixel eine Figur oder eine Kachel bekommt.

Beides klingt nach Technik, prägt aber alles, was danach kommt: wie viel Detail du zeigen kannst, wie viele Animationsframes du dir leisten kannst und ob deine Grafik auf einem modernen Monitor knackig oder verschmiert aussieht. Änderst du die Werte mitten im Projekt, zeichnest du deine Assets neu. Deshalb lege ich sie immer als Erstes fest.

In diesem Tutorial suchst du dir eine Basisauflösung aus, die sauber auf gängige Bildschirme skaliert, vergleichst Sprites mit 16, 32 und 64 Pixeln und siehst, was dich jede Variante an Zeichenzeit kostet. Am Ende zeige ich dir kurz, wie du die Einstellungen in Godot 4 festlegst. Eine ausführliche Engine-Anleitung folgt als eigenes Tutorial.

Was du brauchst

  1. Einen Pixel-Art-Editor (ich arbeite mit Aseprite; falls du neu dabei bist, hilft dir der Aseprite-Einstiegs-Guide)
  2. Die Basics aus den Pixel Art Grundlagen – Canvas einrichten und das Pixelraster
  3. Einen Taschenrechner oder eine Tabelle – die Rechnungen sind einfach, aber du wirst sie ein paarmal prüfen
  4. 30 Minuten

Schritt 1: Die zwei Zahlen auseinanderhalten

Am Anfang werden Basisauflösung und Sprite-Größe gern verwechselt. Also trennen wir sie sauber.

Die Basisauflösung ist die Größe der internen Leinwand deines Spiels. Bei 640×360 ist die gesamte sichtbare Welt 640 Pixel breit und 360 Pixel hoch – egal, ob jemand am Laptop oder vor einem 4K-Fernseher spielt. Die Engine zeichnet alles in dieser Größe und vergrößert danach das fertige Bild auf den Bildschirm.

Die Sprite-Größe ist die Größe eines einzelnen Assets auf dieser Leinwand: eine Kachel mit 16×16, eine Figur mit 32×32, ein Boss mit 64×64. Sie bestimmt, wie viel Platz du für Details innerhalb eines Objekts hast.

Die beiden Zahlen ergeben nur zusammen einen Sinn. Eine 32 Pixel große Figur auf einer 640×360-Leinwand nimmt denselben Anteil der Bildhöhe ein wie eine 16 Pixel große Figur auf 320×180: jeweils rund 8,9 % (32/360 bzw. 16/180). Gleiche Wirkung auf dem Bildschirm, aber eine ganz andere Menge Pixel, die du zeichnen musst.

Schritt 2: Eine Basisauflösung wählen, die glatt aufgeht

Für Pixel Art auf modernen Bildschirmen gilt eine goldene Regel: Jedes Spielpixel muss zur gleichen Zahl an Bildschirmpixeln werden. Wird ein Pixel zu einem 3×3-Block, dann alle. Das nennt man ganzzahlige Skalierung (Integer Scaling). Was ohne sie passiert, siehst du in Schritt 3.

Die Frage lautet also nicht „Welche Auflösung sieht schön aus?“, sondern „Welche Auflösung lässt sich glatt auf die Bildschirme meiner Spielerinnen und Spieler hochrechnen?“ Die gängigen 16:9-Ziele sind 1280×720 (720p), 1920×1080 (1080p), 2560×1440 (1440p) und 3840×2160 (4K).

Die Godot-Dokumentation zu mehreren Auflösungen gibt einen guten Rahmen vor: Die meisten Pixel-Art-Spiele nutzen Viewport-Größen zwischen 256×224 und 640×480. 640×360 nennt sie eine gute Ausgangsbasis, weil sie sich mit ganzzahliger Skalierung ohne schwarze Ränder auf alle vier Ziele bringen lässt. Rechnen wir nach:

Ziel Rechnung Faktor
720p 640×360 × 2 = 1280×720 ×2
1080p 640×360 × 3 = 1920×1080 ×3
1440p 640×360 × 4 = 2560×1440 ×4
4K 640×360 × 6 = 3840×2160 ×6

Jeder Faktor ist eine ganze Zahl. Das ist der ganze Trick.

Willst du gröbere Pixel, halbierst du einfach: 320×180 skaliert mit ×4 auf 720p, ×6 auf 1080p, ×8 auf 1440p und ×12 auf 4K – ebenfalls überall glatt. Die Pixel-Art-Anleitung von GDQuest nennt 320×180, 426×240, 568×320 und 640×360 als Startpunkte und empfiehlt, mit einem 16:9-Verhältnis zu beginnen.

Meine Faustregel: Fang mit 640×360 oder 320×180 an. Mit beiden bleibt jeder gängige 16:9-Bildschirm bei ganzzahligen Faktoren.

Schritt 3: Ganzzahlige Skalierung prüfen, bevor du dich festlegst

Nicht jede Auflösung, die nach 16:9 aussieht, verhält sich so brav. So sieht es bei ein paar anderen Kandidaten aus:

Basis 720p 1080p 1440p 4K
320×180 ×4 ×6 ×8 ×12
640×360 ×2 ×3 ×4 ×6
480×270 ×2,67 ×4 ×5,33 ×8
426×240 ×3 (Breite 1278) ×4,5 ×6 (Breite 2556) ×9 (Breite 3834)

480×270 passt perfekt auf 1080p und 4K, aber nicht auf 720p oder 1440p. 426×240 ist nah dran an 16:9, aber eben nicht exakt: Mit ×3 werden daraus 1278×720 – zwei Pixel zu wenig für 1280.

Was macht die Engine, wenn der Faktor nicht aufgeht? Es gibt zwei Möglichkeiten, und beide haben ihren Preis:

  • Fraktionale Skalierung streckt trotzdem. Manche Spielpixel werden zwei Bildschirmpixel breit, ihre Nachbarn drei. Die Godot-Doku sagt klar, dass das zu ungleichmäßiger Pixelskalierung und einer falschen Darstellung von Pixel Art führt. Du siehst es an wackligen Linien und Flimmern, sobald sich die Kamera bewegt.
  • Ganzzahlige Skalierung rundet den Faktor auf die nächste ganze Zahl ab und füllt den Rest mit schwarzen Rändern. 426×240 bekommt auf einem 1080p-Bildschirm ×4 statt ×4,5. Das Bild ist dann 1704×960 groß, mit Rändern von 108 Pixeln links und rechts und 60 Pixeln oben und unten.

Dasselbe Schachbrettmuster mit ×3 skaliert (jedes Pixel ein 3×3-Block) und mit ×2,5 (Pixel abwechselnd 3 und 2 Bildschirmpixel breit)

Schwarze Ränder sind kein Weltuntergang, viele Spielerinnen und Spieler nehmen sie hin. Aber wenn du sie mit einer saubereren Basisauflösung schon am ersten Tag vermeiden kannst – warum nicht?

Schritt 4: Kachel- und Sprite-Größe festlegen

Jetzt geht es um die Größe deiner Bausteine. 16, 32 und 64 Pixel sind die üblichen Stufen, jede mit doppelter Kantenlänge der vorherigen.

Dieselbe runde Form in 16×16, 32×32 und 64×64: 256, 1.024 und 4.096 Pixel

Das Diagramm zeigt eine einfache Form in gleicher Darstellungsgröße. Zähl den Unterschied:

  • 16×16 = 256 Pixel. Jedes Pixel ist eine Entscheidung. Ein Gesicht besteht aus zwei Punkten, ein Schwert aus einer Linie. Diese Größe zwingt dich zum Vereinfachen – eine richtig gute Übung. Die Pixel Art Grundlagen empfehlen genau solche kleinen Sprites fürs tägliche Üben.
  • 32×32 = 1.024 Pixel, also viermal so viele. Platz für ein lesbares Gesicht, einfache Stofffalten und eine klare Silhouette mit Charakter. Ein angenehmer Mittelweg für Figuren.
  • 64×64 = 4.096 Pixel, sechzehnmal so viele wie bei 16×16. Jetzt schattierst du Muskeln und Stoff. Das sieht reich aus, ist aber näher am Malen als an klassischer Pixel Art.

Jetzt kombinierst du Sprite-Größe und Basisauflösung. Auf einer 640×360-Leinwand ergibt ein 16-Pixel-Raster 40 Kacheln in der Breite und 22,5 in der Höhe (640/16 und 360/16). Mit 32-Pixel-Kacheln sind es 20 in der Breite und 11,25 in der Höhe. Achte auf die halben und Viertel-Kacheln: 360 lässt sich weder durch 16 noch durch 32 glatt teilen. Für ein scrollendes Spiel ist das egal, die Kamera zeigt sowieso selten ein exaktes Raster. Baust du aber ein Puzzlespiel auf einem einzigen Bildschirm, plane dein Spielfeld entsprechend.

Ein hilfreicher Check: Wie viel der Bildhöhe füllt deine Hauptfigur? Ein 32-Pixel-Held auf 640×360 füllt rund 8,9 % (32/360). Derselbe 32-Pixel-Held auf 320×180 füllt rund 17,8 % (32/180) – doppelt so groß, mit halb so viel sichtbarer Welt drumherum. Das ist genauso eine Design- wie eine Grafikentscheidung.

Derselbe Ritter-Sprite in 16×16, 32×32 und 64×64 Pixeln, jeweils auf seinem Pixelraster: bei 16 lesen sich nur Helm, Schild und Schwert, bei 32 kommt ein Gesicht dazu, bei 64 Rüstungsschattierung und Umhangfalten

Schritt 5: Detail gegen Aufwand abwägen

An dieser Stelle bleiben viele Hobbyprojekte stecken. Die Pixelzahl wächst nicht linear mit der Kantenlänge, sondern mit der Fläche. Doppelte Kante heißt vierfache Pixelzahl.

Und ein Spiel hat nicht nur ein Sprite, sondern Animationen. Nimm eine Figur mit einem Laufzyklus aus 8 Frames:

Sprite-Größe Pixel pro Frame Pixel für 8 Frames
16×16 256 2.048
32×32 1.024 8.192
64×64 4.096 32.768

Nicht jedes Pixel kostet gleich viel Mühe, den leeren Hintergrund eines Frames zeichnest du nicht von Hand. Die Tendenz ist trotzdem eindeutig: Von 16 auf 64 Pixel versechzehnfachst du das Rohmaterial – für jeden Frame, jede Richtung, jeden Gegner.

Frag dich also ehrlich:

  1. Wie viele Figuren und Animationen braucht dein Spiel? Viele Gegner mit vielen Zuständen sprechen für kleinere Sprites.
  2. Wie viel Zeit hast du pro Woche? Wenn du abends zeichnest, halten 16 oder 32 Pixel dein Projekt machbar.
  3. Was muss das Gameplay vermitteln? Wenn Gesichtsausdrücke lesbar sein müssen, wird 16×16 womöglich zu eng.

Eine „richtige“ Größe gibt es nicht. Es gibt nur die Größe, in der du dein Spiel in der Qualität fertigbekommst, die du dir wünschst.

Ein Laufzyklus aus vier Frames vom selben Ritter, zweimal: oben als kleiner 16-Pixel-Sprite mit wenigen Pixeln pro Frame, unten als 64-Pixel-Sprite mit bewegtem Umhang und Rüstung in jedem Frame

Schritt 6: In der Engine festlegen (Godot 4, kurz)

Deine Engine muss von deiner Entscheidung wissen, sonst glättet und streckt sie deine Pixel munter drauflos. Das sind die Einstellungen, auf die es in Godot 4 ankommt. Beide Quellen beschreiben sie, ich gebe nur wieder, was dort steht.

  1. Basisauflösung: Unter Project → Project Settings → Display → Window trägst du bei Viewport Width und Viewport Height deine Basisauflösung ein, zum Beispiel 640 und 360 (GDQuest).
  2. Stretch Mode viewport: Im selben Abschnitt stellst du den Stretch Mode auf viewport. Laut Godot-Doku wird der Root-Viewport dann exakt auf deine Basisgröße gesetzt und als Ganzes hochskaliert. GDQuest empfiehlt viewport für einen klassischen, gleichmäßig verpixelten Look und canvas_items, wenn du weiche Kamerabewegungen, Tweens und Partikel brauchst.
  3. Scale Mode integer: Stell den Scale Mode von fractional (Standard) auf integer. Godot rundet den Skalierungsfaktor dann auf die nächste ganze Zahl ab – genau das Verhalten aus Schritt 3.
  4. Texture Filter Nearest: Schalte oben rechts im Fenster der Projekteinstellungen Advanced Settings ein, geh zu Rendering → Textures und setze Default Texture Filter auf Nearest (GDQuest). Ohne diese Einstellung werden deine Sprites beim Skalieren unscharf.

Zur Version: Die Godot-Doku nennt die Einstellung für den Stretch Scale Mode verfügbar seit Godot 4.2, GDQuest nennt Godot 4.3 oder neuer als Voraussetzung für ganzzahlige Skalierung. Mit einer aktuellen Godot-4-Version bist du in beiden Fällen auf der sicheren Seite.

Mehr brauchst du fürs Erste nicht. Das ausführliche Godot-Setup – Kamera, Pixel-Snapping, UI in einer anderen Auflösung – bekommt ein eigenes Tutorial.

Schritt 7: Früh in echter Größe testen

Bevor du dein komplettes Tileset zeichnest, mach einen schnellen Test:

  1. Leg in deinem Editor eine Leinwand in deiner Basisauflösung an.
  2. Setz eine Figur und eine Reihe Kacheln in 1×-Größe darauf.
  3. Exportiere als PNG (niemals JPEG – die Kompression zerstört die harten Kanten) und sieh dir das Bild ganzzahlig hochskaliert in deiner Zielgröße an, oder wirf es in ein leeres Engine-Projekt mit den Einstellungen aus Schritt 6.
  4. Schau es dir aus deinem normalen Spielabstand an. Kannst du die Figur lesen? Wirkt der Bildschirm überladen oder leer?

Zehn Minuten Test an dieser Stelle ersparen dir später, fünfzig Sprites neu zu zeichnen.

Typische Fehler

In der finalen Bildschirmauflösung zeichnen. Eine 1920×1080-Leinwand mit „Pixel-Art-Pinseln“ ist keine Pixel Art – die Engine kann sie nicht sauber skalieren, und das Füllen dauert ewig. Zeichne in deiner Basisauflösung und lass die Engine skalieren.

Eine Auflösung wählen, die nur fast 16:9 ist. 426×240 wirkt richtig, ist aber kein exaktes 16:9-Verhältnis und trifft 1280×720 nie mit einem ganzzahligen Faktor. Rechne für jeden Zielbildschirm nach, bevor du dich festlegst.

Fraktionale Skalierung eingeschaltet lassen. In Godot ist sie der Standard. Deine Grafik sieht dann ungleichmäßig aus, und du zweifelst womöglich an deinem Zeichenkönnen statt an einer einzigen Einstellung.

Den Texturfilter vergessen. Lineare Filterung macht deine Sprites unscharf, sobald sie skaliert werden. Stell ihn einmal projektweit auf Nearest.

Sprite-Größen ohne Plan mischen. Ein 64-Pixel-Boss neben 16-Pixel-Helden ist eine legitime Entscheidung. Aber hochskalierte 16-Pixel-Sprites neben nativen 64-Pixel-Sprites wirken wie zwei verschiedene Spiele. Halte die Pixelgröße einheitlich und skaliere einzelne Sprites im Spiel nie um krumme Faktoren.

64×64 wählen, weil es beeindruckend aussieht. Tut es. Es versechzehnfacht aber auch deinen Animationsaufwand gegenüber 16×16. Wähl die Größe, mit der du fertig wirst.

Die Auflösung mitten im Projekt ändern. Jedes Asset, jedes UI-Layout und jedes Level hängt daran. Entscheide früh, teste einmal und bleib dann dabei.

Kurzübersicht

  • 640×360 → ×2 / ×3 / ×4 / ×6 für 720p / 1080p / 1440p / 4K
  • 320×180 → ×4 / ×6 / ×8 / ×12 für dieselben Ziele
  • 16×16 = 256 Pixel, 32×32 = 1.024 Pixel, 64×64 = 4.096 Pixel
  • Godot 4: Stretch Mode viewport, Scale Mode integer, Default Texture Filter Nearest

Was du gelernt hast

  • Den Unterschied zwischen Basisauflösung und Sprite-Größe – und warum sie nur zusammen funktionieren
  • Wie du eine Basisauflösung auf saubere ganzzahlige Skalierung für 720p, 1080p, 1440p und 4K prüfst
  • Was dich Sprites mit 16, 32 und 64 Pixeln an Detail und Zeichenzeit kosten
  • Die Godot-4-Einstellungen, die deine Pixel scharf halten

Als Nächstes: Zeichne dein erstes Sprite in der Größe, die du gewählt hast. Die Pixel Art Grundlagen führen dich Schritt für Schritt hindurch, und Farbtheorie für Spiele hilft dir, eine Palette zu finden, die auch in kleinen Größen gut lesbar bleibt.

Quellen