Warum Pixel Art verschwommen aussieht und wie man das Problem behebt

Pixel Art wird normalerweise nach der Erstellung verschwommen, nicht während der Erstellung. Die Feile ist möglicherweise vollkommen scharf. Dann zeigt ein Browser, eine Design-App oder eine Spiel-Engine es in Bruchteilsgröße an und vermischt benachbarte Pixel.

Die Lösung besteht darin, herauszufinden, wo die Interpolation in die Pipeline gelangt ist.

Überprüfen Sie die Datei zu 100 %

Öffnen Sie das exportierte PNG in seinen ursprünglichen Abmessungen. Wenn jeder Block eine harte Kante hat, ist der Export in Ordnung. Wenn es bereits weich ist, kehren Sie zur Quelle zurück und exportieren Sie es ohne erneutes Sampling.

Beurteilen Sie kein 128×128-Bild, während ein Bildbetrachter es automatisch an ein 700-Pixel-Fenster anpasst. Stellen Sie die Ansicht auf 100 %, 200 % oder einen anderen ganzzahligen Zoom ein.

Skalierung durch ganze Zahlen

Ein 64-Pixel-Bild lässt sich sauber auf 128, 192 oder 256 Pixel skalieren. Bei 150 Pixeln kann nicht jedes Quellpixel die gleiche Anzahl an Anzeigepixeln belegen. Der Renderer muss sie vermischen oder ungleichmäßig verteilen.

Verwenden Sie 2×, 3×, 4× und andere ganzzahlige Vielfache, wann immer das Layout dies zulässt.

Wenn das Ziel eine feste, ungünstige Größe hat, sollten Sie erwägen, das Pixelraster für dieses Ziel zu erstellen, anstatt ein vorhandenes Asset darin zu erzwingen.

Browserglättung deaktivieren

Für Pixel Art auf einer Website kann CSS eine Skalierung mit harten Kanten anfordern:

.pixel-art {
  image-rendering: pixelated;
}

Geben Sie dem Bild weiterhin sinnvolle Werte für Breite und Höhe. „Image-Rendering“ hilft bei der Sampling-Methode; es kann die gebrochene Geometrie nicht ideal machen.

Überprüfen Sie außerdem, ob ein übergeordnetes Element eine CSS-Transformation wie „scale(0.9)“ verwendet. Transformationen können das Bild auf Subpixel verschieben, selbst wenn die angegebene Breite korrekt aussieht.

Überprüfen Sie Designtools und Game-Engines

Viele Editoren verwenden standardmäßig die bilineare oder bikubische Größenänderung, da diese Methoden für Fotos gut aussehen. Wählen Sie Nächster Nachbar, wenn Sie die Größe der Pixelgrafik ändern.

Deaktivieren Sie in Spiel-Engines die Texturfilterung und achten Sie auf Folgendes:

• nicht ganzzahliger Kamerazoom;
• Sprites, die zwischen Bildschirmpixeln platziert werden;
• Texturkomprimierung;
• automatische Mipmaps; – ein UI-Canvas, skaliert um einen Bruchfaktor.

Eine scharfe Quelle kann nicht scharf bleiben, wenn die Kamera sie zwischen den Pixeln abtastet.

Vermeiden Sie Screenshot-Workflows

Erstellen Sie keine Pixel-Art-Datei, indem Sie einen Screenshot einer Vorschau machen. Möglicherweise hat der Browser die Vorschau bereits skaliert und das Betriebssystem fügt möglicherweise eine Anzeigeskalierung hinzu.

Exportieren Sie direkt aus PixelTool als PNG oder SVG. Wenn Sie ein größeres PNG benötigen, wählen Sie eine geeignete Ausgabegröße, anstatt einen Screenshot zu vergrößern.

Suchen Sie nach Lichthöfen, nicht nur nach Unschärfe

Ein damit verbundenes Problem sind blasse oder dunkle Ränder um transparente Kunstwerke. Es entsteht häufig durch halbtransparente Randpixel, die beim Entfernen oder Ändern der Größe des Hintergrunds entstehen.

Überprüfen Sie das Bild sowohl auf schwarzem als auch auf weißem Hintergrund. Bei klassischen Sprites mit harten Kanten sollten Randpixel normalerweise entweder vollständig undurchsichtig oder vollständig transparent sein.

Eine kurze Debugging-Anweisung

1. Überprüfen Sie die exportierte Datei zu 100 %.
2. Bestätigen Sie, dass die angezeigten Abmessungen ein ganzzahliges Vielfaches sind.
3. Aktivieren Sie Nearest-Neighbor oder Pixel-Rendering.
4. Entfernen Sie Bruchtransformationen und Kamerapositionen.
5. Deaktivieren Sie gegebenenfalls Filterung, Komprimierung oder Mipmaps.
6. Erneut exportieren, anstatt einen Screenshot zu machen.

Ändern Sie jeweils eine Stufe. Sobald die Weichheit verschwindet, haben Sie den Teil der Rohrleitung gefunden, der eine dauerhafte Fixierung benötigt.