Scharfer Pixel-Art-Look mit image-rendering

Das Konzept

Retro-Ästhetik von Pixel-Art wird immer beliebter, besonders in Indie-Spielen oder Beiträgen zu Game Jams. Da heutige Bildschirme Inhalte in hoher Auflösung darstellen, gibt es das Problem, sicherzustellen, dass die Pixel-Art nicht unscharf aussieht. Entwickler haben Grafiken manuell hochskaliert, damit sie mit Blöcken dargestellt werden, die Pixel repräsentieren. Zwei Nachteile dieser Methode sind größere Dateigrößen und Kompressionsartefakte.

Originalgröße	4x Größe	4x Größe (mit einem Bildbearbeitungsprogramm skaliert)
kein	Algorithmus des Anbieters	Nearest-Neighbor-Algorithmus

Eine CSS-basierte Lösung

Die gute Nachricht ist, dass Sie CSS verwenden können, um das Hochskalieren automatisch durchzuführen. Dies löst nicht nur das Unschärfeproblem, sondern ermöglicht es Ihnen auch, die Bilder in ihrer ursprünglichen, kleineren Größe zu verwenden, was die Downloadzeit spart. Auch einige Spieltechniken erfordern Algorithmen, die Bilder analysieren und ebenfalls davon profitieren, mit kleineren Bildern zu arbeiten.

Die CSS-Eigenschaft, um dieses Skalieren zu erreichen, ist image-rendering. Die Schritte zur Erreichung dieses Effekts sind:

• Erstellen Sie ein <canvas>-Element und setzen Sie seine Attribute width und height auf die ursprüngliche, kleinere Auflösung.
• Setzen Sie seine CSS-Eigenschaften width und height auf den 2-fachen oder 4-fachen Wert der HTML-Attribute width und height. Wenn das Canvas beispielsweise mit einer Breite von 128 Pixeln erstellt wurde, würden wir die CSS-width auf 512px setzen, wenn wir eine 4-fache Skalierung wünschen.
• Setzen Sie die CSS-Eigenschaft image-rendering des <canvas>-Elements auf pixelated, wodurch das Bild nicht unscharf wird. Es gibt auch die Werte crisp-edges und -webkit-optimize-contrast, die in einigen Browsern funktionieren. Lesen Sie den Artikel zu image-rendering, um mehr über die Unterschiede zwischen diesen Werten zu erfahren und welche Werte je nach Browser zu verwenden sind.

Ein Beispiel

Schauen wir uns ein Beispiel an. Das Originalbild, das wir skalieren möchten, sieht folgendermaßen aus:

Hier ist etwas HTML, um ein einfaches Canvas zu erstellen:

<canvas id="game" width="128" height="128">A cat</canvas>

CSS, um das Canvas zu dimensionieren und ein scharfes Bild darzustellen:

canvas {
  width: 512px;
  height: 512px;
  image-rendering: pixelated;
}

Und etwas JavaScript, um das Canvas einzurichten und das Bild zu laden:

// Get canvas context
const ctx = document.getElementById("game").getContext("2d");

// Load image
const image = new Image();
image.onload = () => {
  // Draw the image into the canvas
  ctx.drawImage(image, 0, 0);
};
image.src = "cat.png";

Dieser zusammen verwendete Code erzeugt das folgende Ergebnis: