Scharfer Pixel-Art-Look mit image-rendering

Retro-Ästhetik von Pixel-Art wird immer beliebter, besonders in Indie-Spielen oder Game Jam-Beiträge. Da heutige Bildschirme Inhalte in hohen Auflösungen darstellen, gibt es ein Problem damit, sicherzustellen, dass die Pixel-Art nicht verschwommen aussieht. Entwickler haben Grafiken manuell vergrößert, damit sie mit Blöcken dargestellt werden, die Pixel repräsentieren. Zwei Nachteile dieser Methode sind größere Dateigrößen und Kompressionsartefakte.

ursprüngliche Größe	4x Größe	4x Größe (mit einem Bildeditor skaliert)
keine	Algorithmus des Anbieters	Nearest-Neighbor-Algorithmus

Die gute Nachricht ist, dass Sie CSS verwenden können, um das Hochskalieren automatisch durchzuführen. Dies löst nicht nur das Problem der Unschärfe, sondern ermöglicht es Ihnen auch, die Bilder in ihrer ursprünglichen, kleineren Größe zu verwenden, was die Downloadzeit spart. Einige Spieltechniken erfordern auch Algorithmen, die Bilder analysieren, was ebenfalls von der Arbeit mit kleineren Bildern profitiert.

Die CSS-Eigenschaft, um dieses Skalieren zu erreichen, ist image-rendering. Die Schritte, um diesen Effekt zu erzielen, sind:

• Erstellen Sie ein <canvas>-Element und setzen Sie dessen width- und height-Attribute auf die ursprüngliche, kleinere Auflösung.
• Setzen Sie dessen CSS-width- und height-Eigenschaften auf das 2- oder 4-fache des Werts der HTML-width und height. Wenn das Canvas mit einer Breite von 128 Pixeln erstellt wurde, würden wir zum Beispiel die CSS-width auf 512px setzen, wenn wir eine 4-fache Skalierung wünschen.
• Setzen Sie die image-rendering-CSS-Eigenschaft des <canvas>-Elements auf pixelated, wodurch das Bild nicht verschwommen wird. Es gibt auch die Werte crisp-edges und -webkit-optimize-contrast, die in einigen Browsern funktionieren. Weitere Informationen zu den Unterschieden zwischen diesen Werten und welche Werte je nach Browser verwendet werden sollten, finden Sie im Artikel image-rendering.

Werfen wir einen Blick auf ein Beispiel. Das ursprüngliche Bild, das wir hochskalieren möchten, sieht so 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 zu rendern:

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

Und etwas JavaScript, um das Canvas zu initialisieren 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 Code ergibt zusammen das folgende Ergebnis: