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.
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.
Antworten:
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
quelle
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.
quelle
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.
quelle
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:
Dies wurde mit einem Unschärferadius von 1 Pixel durchgeführt.
quelle