Klare Pixelkunst-Optik mit Bilddarstellung

Retro-Pixelkunst-Ästhetik wird immer beliebter, besonders in Indie-Spielen oder Game Jam-Beiträgen. Da jedoch heutige Bildschirme Inhalte in hoher Auflösung darstellen, gibt es das Problem, sicherzustellen, dass die Pixelkunst nicht unscharf aussieht. Entwickler haben Grafiken manuell vergrößert, damit sie mit Blöcken angezeigt werden, die 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 Bildbearbeitungsprogramm)
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 Problem der Unschärfe löst, sondern Ihnen auch ermöglicht, die Bilder in ihrer ursprünglichen, kleineren Größe zu verwenden und somit die Downloadzeit zu sparen. Außerdem erfordern einige Spieltechniken Algorithmen, die Bilder analysieren, was ebenfalls von der Arbeit mit kleineren Bildern profitiert.

Die CSS-Eigenschaft, um diese Skalierung 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 HTML-width- und height-Werts. Wenn das Canvas beispielsweise mit einer Breite von 128 Pixeln erstellt wurde, würden wir die CSS-width auf 512px setzen, wenn wir eine 4x-Skalierung möchten.
• 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 über image-rendering, um mehr Informationen über die Unterschiede zwischen diesen Werten zu erhalten und welche Werte je nach Browser verwendet werden sollten.

Schauen wir uns ein Beispiel an. Das Originalbild, das wir hochskalieren möchten, sieht so aus:

Hier ist ein HTML-Beispiel, 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";

Dieses zusammen verwendete Codebeispiel ergibt folgendes Ergebnis: