Knackiger Pixelkunst-Look mit Bild-Rendering

Retro-Pixelkunst-Ästhetik wird immer beliebter, besonders in Indie-Spielen oder Game-Jam-Einträgen. Da heutige Bildschirme Inhalte in hoher Auflösung anzeigen, gibt es das Problem, sicherzustellen, dass die Pixelkunst nicht unscharf wirkt. Entwickler haben die Grafiken manuell skaliert, sodass 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 (skaliert mit einem Bildeditor)
keine	Algorithmus des Anbieters	Nächster-Nachbar-Algorithmus

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

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 seine width- und height-Attribute auf die ursprüngliche, kleinere Auflösung.
• Setzen Sie seine CSS-width- und height-Eigenschaften auf das 2-fache oder 4-fache des Werts der HTML-width- und height-Eigenschaften. Wenn das Canvas beispielsweise mit einer Breite von 128 Pixel erstellt wurde, setzen wir die CSS-width auf 512px, wenn wir eine 4-fache Skalierung wünschen.
• Setzen Sie die CSS-Eigenschaft image-rendering des <canvas>-Elements auf pixelated, was das Bild nicht unscharf macht. Es gibt auch die Werte crisp-edges und -webkit-optimize-contrast, die in einigen Browsern funktionieren. Schauen Sie sich den Artikel über image-rendering für weitere Informationen zu den Unterschieden zwischen diesen Werten an und welche Werte je nach Browser verwendet werden sollten.

Schauen wir uns ein Beispiel an. Das ursprüngliche Bild, das wir skalieren 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 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";

Zusammen ergeben diese Codes das folgende Ergebnis: