Was unterscheidet das Skalieren von Pixelkunst von anderen Bildern?


12

Vor kurzem habe ich einen Entwickler geschult, der sich mit der Entwicklung von Pixelkunst-Spielen noch nicht auskennt, und mir wurde klar, dass es um die Skalierung von Pixelkunst geht, die für einen Neuling nicht offensichtlich und möglicherweise nicht gut dokumentiert ist. Also, hier ist ein Versuch, das zu beheben ....


  1. Ich habe gehört, ich sollte Pixelkunst nur um 200%, 300% usw. skalieren, nicht zwischen Größen wie 120%.

    • Warum das? Sollte die Skalierung nicht genauso funktionieren wie bei anderen Bildern?
    • Was ist, wenn ich meinen Charakter wirklich nur um einen Bruchteil vergrößern oder verkleinern muss, um das richtige Gameplay oder Aussehen zu erzielen? Wie behebe ich das?
  2. Mir wurde gesagt, es sei "schlecht", in einem Spiel Pixelkunst in verschiedenen Maßstäben zu verwenden - warum?

    • Wenn ich zum Beispiel meinen Charakter so skaliert habe, dass jedes Sprite-Texel 4x4 Bildschirmpixel hat, während meine Hintergrundgrafiken so skaliert sind, dass jedes Sprite-Texel 6x6 Bildschirmpixel hat. Ist ein Pixel nicht ein Pixel am Ende des Tages?

Antworten:


30

Skalierung nach ganzen Zahlen

Das Skalieren um 2x, 3x ... n x ist einfach - jedes Pixel wird einfach zu einem n x n- Quadrat von Pixeln, und das Aussehen des ursprünglichen Sprites bleibt perfekt erhalten (einschließlich aller scharfen Linien, Ecken und Zick-Zack-Linien im Treppenhaus). .

Bei der Skalierung von Pixelkunst um einen Bruchteil (z. B. das 1,5-fache) treten jedoch Probleme auf, da Pixel von Natur aus diskret sind. Wir können nicht wirklich "einen halben Pixel" haben.

Bei anderen Arten von Kunstwerken können wir es oft vermeiden, benachbarte Quellpixel zu überblenden, bei denen das Pixel "halb gefärbt" sein sollte, und bei hohen Auflösungen sind die Artefakte normalerweise nicht erkennbar. Auf großen, klobigen Pixelbildern zerstört dies jedoch schnell den gestochen scharfen Look.

Stattdessen verwenden wir normalerweise die Filterung "Nächster Nachbar" (auch als Punktfilterung bezeichnet), damit jedes Pixel nach dem Skalieren seine Farbe von genau einem Pixel im ursprünglichen Sprite erhält.

Dies hat einen weiteren Knick: Da die Anzahl der Pixel nach dem Skalieren nicht ein ganzzahliges Vielfaches der Anzahl der Quellpixel ist, werden einige Quellpixel stärker dupliziert als andere (beim Skalieren) oder ganz übersprungen (beim Skalieren).

Leider sind Bildbearbeitungssoftware und GPU-Texturfilter nicht sehr wählerisch, wo sie Pixel duplizieren oder überspringen. Sie folgen lediglich grundlegenden Rundungsregeln, wodurch das Ergebnis verzerrt und ungleichmäßig aussehen kann.

Schauen Sie sich das folgende Beispiel an. In der Mitte haben wir das Pilz-Sprite mithilfe der Nearest Neighbor-Filterung um 150% vergrößert, und das Ergebnis sieht wackelig und willkürlich aus. Ein Auge ist größer als das andere, einige Konturen sind dick, während andere dünn bleiben, und die abgerundeten Stellen sehen blockartig aus ... es sieht nicht so aus, als würde ein Pixelkünstler mit Absicht zeichnen.

Beispiel für Artefakte bei Verwendung einer nicht ganzzahligen Skala

Wenn wir wirklich brauchen, dass das Sprite 150% größer ist (zum Beispiel, damit sich das Gameplay richtig anfühlt oder um alternative Bildschirmauflösungen zu unterstützen ), können wir die Problembereiche wie im Beispiel auf der rechten Seite neu zeichnen. Jetzt sieht es eher so aus, als würde ein Künstler etwas machen, und es passt stilistisch zu anderen Kunstwerken im Spiel. (Obwohl ich selbst kein großartiger Pixelkünstler bin, könnte es trotzdem besser sein 😉)

Leider gibt es dafür nicht viele gute Abkürzungen. Für ganzzahlige Skalierungen können Sie speziell entwickelte Pixel-Art-Upscaling-Algorithmen verwenden - eine große Auswahl steht in Tools wie ImageResizer zur Verfügung -, um einen weniger blockigen Startpunkt als Nearest Neighbour zu erhalten Erhalten Sie ein qualitativ hochwertiges Ergebnis.


Übrigens: Bruchskalen können auch zur Laufzeit auftreten .

Stellen Sie sich vor, Ihr Spiel hat eine NES-Auflösung (256 x 240) und Sie möchten es auf einem 1080p-Bildschirm anzeigen.

1080 ÷ 240 = 4,5, sodass einige der Quellpixel oder "Texel" in Ihrer Szene bis zu 5 Bildschirmpixel überdecken, während andere nur 4 Pixel haben und Verzerrungen verursachen, wie wir oben gesehen haben. In Bewegung neigen sie dazu, Sprites zu kräuseln und ablenkend zu schimmern, ohne eine offensichtliche Ursache zu haben:

Beispiel für eine fraktionierte Pilzbewegung, die plätschernde Artefakte zeigt

Sie werden oft Leute sehen, die vorschlagen, Kamera- oder Objektpositionen auf ganzzahlige Pixelkoordinaten abzurunden, aber das behebt das Problem nicht wirklich. Das Runden erfolgt bereits im Rahmen der Filterung nach dem nächsten Nachbarn - das Problem besteht darin, dass einige Bildschirmpixel auf dasselbe Quelltextelement gerundet werden (duplizieren), während andere dies nicht tun, was zu einem ungleichmäßigen Ergebnis führt.

Die Lösung besteht darin, eine Kombination aus Padding / Cropping oder alternativen Asset-Sets zu verwenden, um für jede zu unterstützende Bildschirmauflösung wieder ein konsistentes Verhältnis von Bildschirmpixeln zu Texeln zu erhalten. Hier finden Sie einige Unity-Beispiele . Dies ist ein weiterer Fall, in dem es keine einfache universelle Lösung gibt und Sie ein gewisses Maß an Urteilskraft und Geschick anwenden müssen, um Ihr Spiel scharf zu halten.

Gleichbleibende Pixel-Skalierung

Diese "Regel" beruht auf stilistischer Konsistenz.

Wenn Sie Pixelkunst in verschiedenen Maßstäben verwenden, sieht es so aus, als wären Objekte aus verschiedenen Spielen zusammengeschustert worden, anstatt eine einheitliche Ästhetik zu haben.

Beispiel für die unterschiedliche Skalierung von Assets in einem einzelnen Spiel

Im Beispiel links habe ich einige Sprites von Super Mario World zusammengestellt, alle im gleichen Maßstab, und es sieht großartig aus.

In der Mitte habe ich Mario und das Level auf die doppelte Auflösung des Hintergrunds und den Maulwurf auf die dreifache Auflösung vergrößert. Da ich Ganzzahlskalen verwendet habe, bekommen wir nirgendwo Verzerrungen oder Wellen, aber es sieht immer noch ein bisschen komisch aus.

Zum einen ist der Hintergrund so viel detaillierter als der Vordergrund. Es ist in der Lage, glatte Kurven und scharfe Glanzlichter darzustellen, wodurch der Vordergrund im Gegensatz dazu besonders "blockig" aussieht, anstatt ein einheitliches Pixelkunstgefühl zu haben. Und die Umrisse des Maulwurfs sind merklich dicker und gezackter als der Rest des Vordergrunds.

Auf der rechten Seite zeige ich, dass wir durch die Neulackierung der Assets auf einer gemeinsamen Pixel-Skala mit den neuen Asset-Größen ein einheitlicheres und bewussteres Gefühl zurückbringen können.

Aber muss ich

Nein nicht wirklich. Es ist dein Spiel und du kannst es so machen, wie du willst.

Besonders wenn Sie Prototypen entwickeln und Spaß an Ihrem Spiel haben, ist es wichtiger , Dinge schnell ausprobieren zu können, als sie perfekt aussehen zu lassen. Sie werden wahrscheinlich die Größe wichtiger Dinge wie Ihr Charakter falsch oft erhalten , bevor Sie das finden , was Ihr Spiel am besten ist, und es würde saugen , um jeden Animationsrahmen jedes Mal , wenn Sie etwas anderes ausprobieren will neu streichen müssen. Also, früh nicht schwitzen.

Für das veröffentlichte Spiel ist es ein Urteilsspruch. Keine Pixel-Art-Polizei wird Ihnen verbieten, Ihr Spiel zu verbreiten, wenn Sie sich nicht an die Regeln halten, und viele Spieler könnten den Unterschied nicht beschreiben. Die Beachtung dieser Pixeldetails wird von vielen Playern (und Rezensenten) als wichtiges Qualitätsmerkmal angesehen. Lernen Sie also Ihr Publikum kennen und entscheiden Sie, was für das Erlebnis, das Sie ihnen bieten möchten, am besten ist.

Eine letzte Überlegung ist, dass viele Pixel-Art-Spiele ein sehr präzises Gameplay haben. Denken Sie in den frühen Mega Man-Spielen an das Wechseln zwischen 1-Block-Plattformen. In diesen Situationen kann ein konsistentes Pixelraster (und Kachelraster) ein wichtiger Hinweis für den Spieler sein, wenn er seine Bewegungen beurteilt und ausführt. Das Einführen von Unregelmäßigkeiten in die Kunst könnte das Lernen des Spiels tatsächlich erschweren, was frustrierend sein kann.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.