Sprites schön und pixelig halten

7

Wie halte ich die Sprites in meinem Spiel auf Bildschirmen aller Größen und Auflösungen schön pixelig? Ich verwende die Texturfilterung für den nächsten Nachbarn, wenn ich die Größe von Pixeln verändere, aber dies funktioniert nur bei sehr hohen Vergrößerungen, da sonst die Pixel verzerrt und ungleichmäßig werden.

Jitter

Ich verstehe die Grenzen der Skalierung für den nächsten Nachbarn und würde dies nicht fragen, es sei denn, es gibt so viele Spiele, die Pixelkunst ohne dieses Problem verwenden. Ich denke, es gibt einen Trick, den ich nicht kenne.

— TimSim
quelle

3

Was ist mit der Verwendung des nächsten Nachbarn zur Vergrößerung, aber der linearen Filterung zur Verkleinerung?

— János Turánszki

Alle drei Symbole im Bild wurden mit dem nächsten Nachbarn vergrößert, aber nur das 8-fache sieht richtig aus.

— TimSim

Vielleicht nicht der richtige Begriff für andere, aber wenn Sie mit XNA in C # waren, würde ich davon ausgehen, dass Sie vergessen haben, Ihren Stichprobenstatus in PointClamp zu ändern. Was Sie in Bezug auf die Filterung des nächsten Nachbarn beim Ändern der Größe beschreiben, sollte einwandfrei funktionieren, solange Sie durch Vergrößerungen ganzer Werte (x1, x2, x3 usw.)

— skalieren

1

Das Problem ist, selbst wenn ich auf verschiedenen Geräten um ganze Zahlen vergrößere, was zu unterschiedlichen Pixelwerten führt, die selbst keine exakten Vielfachen der Abmessungen des ursprünglichen Sprites sind, da mein Ansichtsfenster an den Bildschirm angepasst wird. Ich denke, ich muss auf Pixelkunst verzichten, es ist einfach einfacher, hochauflösende Kunstobjekte zu verwenden, die auf alles skaliert werden können.

— TimSim

5

Zum einem nächsten Nachbar wird ergeben perfekte Skalierung Pixel nur dann , wenn es zu gehobener in ganzzahligen Vielfachen verwendet wird . Abgesehen davon sollten Sie keine Skalierungsoperationen für Ihre Ansichts- / Projektionsmatrizen durchführen. Wenn Sie Ihre Ansicht so einstellen, dass sie mit den Abmessungen des Bildschirms übereinstimmt, und Ihre Projektionsmatrix orthografisch mit den Abmessungen übereinstimmt, die mit dem Ansichtsfenster übereinstimmen, sind Ihre "Welt" -Koordinaten echte Bildschirmpixel. Die Größe Ihres Ansichtsfensters kann an verschiedene Bildschirme angepasst werden, es sollte jedoch keinen Skalierungsfaktor angeben. Sie sollten lediglich mehr oder weniger der Spielwelt anzeigen. Außerdem sollten Sie wahrscheinlich AA deaktivieren und sich daran erinnern, dass sich in OpenGL die Mitte jedes Pixels bei (.5, .5) und nicht bei (0, 0) befindet.

Schauen Sie sich diese verwandten Fragen an:

/programming/10040961/opengl-pixel-perfect-2d-drawing

/programming/16511374/pixel-perfect-projection-matrix-in-opengl

— Nox
quelle

1

Nox sagt: "Denken Sie daran, dass in OpenGL die Mitte jedes Pixels bei (.5, .5) und nicht bei (0, 0) liegt." <== super wichtige Infos!

— David van Brink

2

Sie müssen die Sprite-Pixel mitteln, die unter jedem Bildschirmpixel sichtbar sind. Die Sprite-Pixel können "am nächsten" abgetastet werden. Um sich jedoch in Subpixel-Schritten auf dem Display reibungslos zu bewegen, benötigen Sie eine Art Überabtastung.

Wenn Sie OpenGL verwenden, können Sie dies in Ihrem Shader tun, indem Sie durchschnittlich 4 oder 9 oder mehr Sprite-Samples berechnen, die in der Nähe jedes Fragments versetzt sind (berechnet innerhalb eines Bildschirmpixels). Alternativ können Sie Ihre Szene mit dem 4- oder 9-fachen der Bildschirmgröße rendern und dann mit der Mittelwertbildung reduzieren. (Dies ist möglicherweise direkt auf Ihrer Plattform verfügbar oder als Shader implementiert, wird jedoch am Ende nur einmal ausgeführt und nicht pro Sprite.)

Welches leistungsfähiger ist, hängt von der Szene, der Anzahl der Sprites usw. ab.

- BEARBEITEN: Noch ein Ansatz - Machen Sie Ihre Sprites vorvergrößert, pixelig, aber schön groß und verwenden Sie lineare Interpolation. Auf diese Weise erhalten Sie eine Mischung, wenn sich eine (große) "Pixelkante" unter einem Fragment befindet.

Bei all diesen Methoden besteht die Gefahr eines verwaschenen Stroboskopierens, wenn Sprite-Pixel nahe an Bildschirmpixeln liegen oder wenn sie übereinstimmen, aber geringfügig versetzt sind. Ich denke, die gute Regel wäre, wenn Sprite- und Bildschirmpixel genau übereinstimmen und ausgerichtet sind: Sieht gut aus. Andernfalls sollten Sprites mindestens 2,0+ skaliert und fraktioniert gemittelt werden, um mindestens ein vollfarbiges Bildschirmpixel pro Sprite-Pixel zu gewährleisten.

— David Van Rand
quelle

1

Sie sollten sich mit Pixel-Art-Upscaling-Filteralgorithmen ( http://en.wikipedia.org/wiki/Image_scaling ) befassen . Diese wurden speziell entwickelt, um Pixelkunst zu verbessern. Sie haben die Eigenschaften, (1) die ursprüngliche Farbpalette beizubehalten (auch bekannt als keine Unschärfe) und (2) Zacken zu entfernen (Aliasing, das aufgrund der nächsten Nachtabtastung auftritt).

Einige Namen von Algorithmen sind: Eagle, 2XSAI, Super Eagle, Super 2XSAI, Scale2X, Scale3X, HQ2X, HQ3X, HQ4X, 2XBR, 3XBR, 4XBRZ. Sie sind mehr oder weniger von einfach bis komplex geordnet, wobei 4XBRZ mein Favorit im Aussehen ist.

Sie alle arbeiten mit ganzzahligen Vergrößerungsfaktoren (2, 3 und 4). Der übliche Ansatz zum Erhalten von nicht ganzzahligen Vergrößerungen besteht darin, die nächste ganze Zahl zu nehmen, die größer als der gewünschte Vergrößerungsfaktor ist, und das resultierende Bild zu verkleinern (entweder unter Verwendung der nächsten Nacht oder linearer Interpolation). Eine Alternative besteht darin, die nächste Ganzzahl kleiner als die gewünschte Vergrößerung zu nehmen und Ränder um das Bild hinzuzufügen. Die Wahl zwischen diesen beiden Ansätzen hängt vom Stil Ihrer Pixelkunst und Ihren persönlichen Vorlieben ab.

Bearbeiten: Ich habe Ihr Image durch eine Implementierung von Eagle, Scale2X und Scale3X geführt, die ich vor einiger Zeit erstellt habe. Hier sind die Ergebnisse in der richtigen Reihenfolge (vergrößert um x2, damit Sie besser sehen können, was der Algorithmus mit den Pixeln macht). Scale3X ist der komplexeste Algorithmus und sieht meiner Meinung nach auch am besten aus. Es gibt jedoch viel komplexere Algorithmen in der Liste, die ich oben erwähnt habe. Sie sollten also mit mehr experimentieren.

Adler Scale2X Scale3X

— Jelle van Campen
quelle

-1

Sie müssen einen Tiefpassfilter anwenden, bevor das Downsampling (Downscaling) auf den Bildschirmen mit niedriger Auflösung erfolgt.

Ich habe einfache Gaußsche Unschärfe (Faltungstransformation) mit guten Ergebnissen verwendet:

Geben Sie hier die Bildbeschreibung ein

Dies wurde mit einem Unschärferadius von 1 Pixel durchgeführt.

— Dominic Cerisano
quelle

2

Sorry, aber ich würde diese Ergebnisse nicht als gut bezeichnen

— Kromster

1

Die von Ihnen vorgeschlagene Lösung für das Downsampling eignet sich hervorragend für natürliche Bilder mit meist niederfrequenten Spektralkomponenten. Ein Beispiel für natürliche Bilder wären Fotografien. Im Anwendungsfall von TimSim arbeitet er mit synthetischen Bildern. Diese weisen aufgrund scharfer Kanten (verursacht durch die eingeschränkte Farbpalette der Pixelkunst) hohe Spektralkomponenten auf. Aus diesem Grund werden die meisten Leute argumentieren, dass die Lösung der Tiefpassfilterung hier unangemessen ist.

— Jelle van Campen

Das verwendete Tiefpassfilterverfahren ist eine einfache Faltungsmatrix und weitaus leistungsfähiger (und daher für Spiele geeignet) im Vergleich zu den anderen Skalierungsalgorithmen (Eagle usw.). Moderne HDTVs verwenden genau diese Methode, die eher eine künstlerische als eine technische Lösung darstellt. Wenn Sie die beiden obigen Ergebnisse vergleichen, ist es Geschmackssache, auf welche Sie länger starren möchten. Das Downvoting einer gültigen und akzeptierten Lösung ist kontraproduktiv. Diese Lösung führte zu einer weiteren Lösung, die Ergebnisse enthielt und eine Vergleichsbasis darstellte.

— Dominic Cerisano