Skalierung meines Pixel Art-Plattformers von 720p auf 1080p


12

Ich entwickle einen Pixel Art 2D-Plattformer für PC und Smartphone, stecke aber in einem technischen Problem fest.

Ich habe mich für eine 32x32-Kachelauflösung und eine 64x64-Zeichen-Sprite-Auflösung entschieden. Die Ebenen sind in Abschnitte unterteilt, die ich "Bildschirme" nenne. Auf jedem Bildschirm befinden sich 40 x 22,5 Kacheln, ungefähr 40 x 23, sodass die Mindestauflösung 1280 x 720 beträgt.

Im Spiel habe ich eine Doppelsprungmechanik, daher brauche ich auf jedem "Bildschirm" eine gute vertikale Sichtweite.

Hier kommt das Problem: 1280x720 ist keine sehr hohe Auflösung. Auf HD-Monitoren wäre das Fenster nicht groß, und wenn ich die Auflösung um das Zweifache erhöhe, ist es in 2560 x 1440 und das Fenster wäre viel größer als ein tatsächlicher HD-Monitor. Wenn ich Größen zwischen 1280x720 und 2560x1440 versuche, fängt die Grafik an zu ruckeln oder ist deformiert.

Wie kann ich dieses Problem lösen? Gibt es eine Lösung, bei der ich nicht alle Kacheln und Sprites im 16x16-Format neu zeichnen muss?


Ist das Verringern der Auflösung, aber das Bewegen des Bildschirms mit einer Kamera eine akzeptable Wahl für das Design? Das heißt, die Auflösung beträgt jetzt 640 x 360, aber Ihre Bildschirme sind immer noch 1280 x 720, aber Sie müssen sich im Raum bewegen, etwa wie Metroid oder Axiom Verge?
Mozzajp

Sie befinden sich an der falschen Stelle, auch wenn es sich um ein 2-D-Spiel handelt, müssen Sie eine Kamera definieren. Die Kamera definiert also die Anzeigeauflösung, das Sichtfeld und die Blickwinkel, und Sie präsentieren die Daten einfach der Kamera. Auf diese Weise ist Ihr Spiel unabhängig von Resoultion
Yosh Synergi


Ich versuche nur sicher zu sein, wo genau das Problem liegt. Wollen Sie damit sagen, dass Sie, weil Ihre 1280X720-Kartenanzeige kleiner ist als beispielsweise eine 1920X1080-Monitoranzeige, Ihre Kartenanzeige so skalieren möchten, dass sie möglichst im Vollbildmodus angezeigt wird? Ich bin verwirrt, da das Zeichnen von 16X16-Kacheln das Problem (wie ich es verstehe) sowieso nicht lösen würde.
RobM

@DMGregory, wenn Sie mir einige Beispiele mit Artefakten bei der Skalierung bei der Verwendung der gebrochenen Skalierung zur Verfügung stellen können, wäre das fantastisch, da ich mir kein einziges Szenario vorstellen kann, in dem ich ein Bild in beide Richtungen gleich stark skaliere, wenn die Menge gleich groß ist eine ganze oder gebrochene Zahl, die Artefakte erscheinen. mit artefakten meine ich dinge, die es nicht geben sollte, die sich von unschärfe unterscheiden und bei denen es zu einer hohen skalierung ohne genügend pixel kommt.
Yosh Synergi

Antworten:


16

Für alle, die sich fragen, warum dies ein Problem für Pixel Art ist, hier ein kurzes Beispiel mit einer Szene aus Super Mario World:

Beispiel für eine skalierte Pixel-Kunstszene mit Artefakten

Wenn wir ein Pixel-Art-Spiel zur Laufzeit nur von 720 auf 1080 skalieren (wie es bei einer typischen Spielekamera der Fall ist), erhalten wir Artefakte aufgrund des nicht ganzzahligen Verhältnisses von Bildschirmpixeln pro Quelltext. Überprüfen Sie die Inkonsistenz in den Zahlen aus dem skalierten Beispiel auf der rechten Seite und wie verstümmelt das Blatt und Marios Ohr aussehen.

Es ist spielbar, aber es geht die charmante Knusprigkeit der Pixelkunst verloren. Und diese Artefakte in Bewegung können über einen Sprit kriechen , es schimmernde aussehen zu lassen.

Wenn Sie einen Filtermodus zum Mischen benachbarter Pixel verwenden, werden die Wellen vermieden, die Pixelkunst wird jedoch verwischt und verwischt, sodass dies ebenfalls nicht sehr wünschenswert ist.


Leider ist das 1,5-fache Verhältnis zwischen 720p und 1080p der schlimmste Fall, dem wir begegnen können.

Wie Sie bemerken, ist die 1x-Skalierung zu klein und die 2x-Skalierung zu groß, und es gibt kein ganzzahliges Skalierungsverhältnis dazwischen, das wir wählen können.

Ihre Optionen beschränken sich auf:

  • Toleriere 1x Skalierung und zeige dein Spiel in einem Fenster, das 1/3 kleiner ist als der Bildschirm.

    • Möglicherweise können Sie den Zuschnitt verlängern und mehr Szenen gleichzeitig auf hochauflösenden Bildschirmen anzeigen. Dadurch wird der Platzbedarf für das Padding / Letterboxing verringert, es muss jedoch geprüft werden, ob sich dies auf den Spielverlauf auswirkt

      (Gibt es Spielern auf einigen Geräten einen unfairen Vorteil oder lässt es sie Geheimnisse entdecken, die sie nicht so leicht sehen sollten?)

  • Skaliere die Größe um das Doppelte und beschneide deine Szene , damit der Spieler weniger von der Szene gleichzeitig sieht (ungefähr 3/4, so weit sie vorher sehen konnten).

    Auch dies kann sich auf das Spiel auswirken, z. indem es dem Spieler erschwert wird, die Orte zu sehen, zu denen er doppelt springen muss.

    • Möglicherweise können Sie dies durch Kameralogik ausgleichen, indem Sie den Anzeigebereich dem Player folgen lassen oder diesen antizipieren, sodass der wichtige Inhalt auf einem Bildschirm im kleineren Ausschnitt weiterhin sichtbar ist, aber es gibt keine universell einsetzbare Kamera.

      Wenn Sie sich für diese Route entscheiden, versuchen Sie, einige Details Ihres Spiels und der aktuellen Kamera sowie eine Beispielszene mitzuteilen. Auf diese Weise können wir Ihnen möglicherweise dabei helfen, das Kameraverhalten zu optimieren, um dies zu kompensieren (oder Ihr Spiel erfordert einfach mehr Sichtbarkeit).

  • Erstellen Sie alternative Assets mit einer anderen Auflösung . (Ja, das ist eine Menge Arbeit, bietet aber die meisten Optionen, um das Aussehen und Verhalten des Spiels zu steuern.)

    Dies bedeutet nicht, dass Sie Ihre vorhandenen Assets, die auf 720p großartig aussehen, wegwerfen müssen. In diesem Artikel wird das kontextbezogene Austauschen zwischen verschiedenen Asset-Sets beschrieben, um einen größeren Bereich von Zielauflösungen zu unterstützen (in Unity, das Prinzip kann jedoch auch in Nicht-Unity-Spielen angewendet werden).

    • Wenn Sie Ihr gesamtes Vermögen in halber Größe ( 16 x 16 Kacheln, 32 x 32 Zeichen ) neu zeichnen , können Sie 720p im 2-fachen Maßstab und 1080p im 3-fachen Maßstab verarbeiten, wobei die gleiche Anzahl von Kacheln angezeigt wird, wie Sie jetzt haben. Möglicherweise ist die Auflösung kleiner Kacheln jedoch optisch restriktiver.

    • Sie können auch ein alternatives Asset-Set im "Großformat" zeichnen, das 150% größer ist ( 48x48 Kacheln, 96x96 Zeichen ) und 1080p im 1x-Maßstab unterstützt. (Sie würden Ihre vorhandenen Assets für 720p oder 1440 usw. verwenden.) Die größere Auflösung soll Ihnen helfen, die Wiedergabetreue Ihrer aktuellen Grafik beizubehalten, damit Sie nicht auf den Stil und die Details verzichten müssen, die Sie jetzt haben.

      Beispiel eines zu 150% neu gezeichneten Assets

    • Eine dritte Option ist das Zeichnen eines nur geringfügig kleineren Asset-Sets ( 24x24 Kacheln, 48x48 Zeichen ), das 1080p im 2- fachen Maßstab verarbeiten kann und wiederum weniger Detailverlust bedeutet als die Halbierung aller Ihrer Asset-Größen.

      Mit allen drei Optionen können Sie die Frames und das Gameplay bei 720 und 1080 genau gleich halten, allerdings auf Kosten der etwa doppelten Ressourcenarbeit.

Leider gibt es hier keinen einfachen Gewinn, nur verschiedene Kompromisse.


2
Sie erwähnen die Beibehaltung des ursprünglichen Maßstabs und die Verwendung von Zierleisten. Abhängig vom Kontext kann dies der perfekte Ort sein, um GUI-Elemente wie Score und Leben zu platzieren. Wenn diese Ränder groß genug sind, um diese Informationen korrekt einzufügen, kann dies dazu führen, dass sie weniger wie Füllmaterial, sondern vielmehr als inhaltsreich und für das Spiel relevant aussehen.
Gnemlock

3

Spezifische Erläuterung der Option von @ DMGregory, alternative Assets mit unterschiedlichen Auflösungen zu erstellen:

Die beste Lösung, die ich kenne, ist an dieser Stelle wahrscheinlich die geringste Verwendung für Sie: Entwickeln Sie Ihre Kunstobjekte in einem Vektorformat und rastern Sie sie nach Bedarf später. Dies ist kein Wundermittel; Meistens werden Sie feststellen, dass Sie nach dem Rastern einige kleine handgefertigte Änderungen vornehmen müssen.

Die nächstbeste Option, die ich kenne, besteht darin, verschiedene Bildskalierungsalgorithmen auszuprobieren, insbesondere Pixelkunst-Skalierungsalgorithmen . Dies ist nach wie vor keine Bauchspeicheldrüse; Die Auswahl eines bestimmten Skalierungsalgorithmus ist stark kontextspezifisch. Es hat so viel mit dem "Feeling" deines Spiels zu tun wie mit der Grafik selbst. Selbst wenn ein guter Algorithmus und eine Grafik zusammenpassen, musst du wahrscheinlich einige Sprites von Hand optimieren.

In beiden Fällen besteht die Idee darin, einen Großteil der Arbeit mit einem Tool für Sie zu erledigen und den menschlichen Aufwand auf die verbleibenden Details zu konzentrieren. Wie @DMGregory sagte: "Es gibt hier keinen einfachen Gewinn, nur verschiedene Kompromisse."


Bearbeitung bezüglich fraktionaler Skalierung: Die meisten Pixel-Art-Skalierungsalgorithmen werden nur um ganze Zahlen erhöht. Wenn Sie nicht nur Ihren eigenen benutzerdefinierten Skalierungsalgorithmus verwenden, müssen Sie wahrscheinlich Upscaling und Downscaling kombinieren, um die gewünschte 1,5-fache Änderung zu erzielen. Als Referenz ist hier das Ergebnis der Kombination des scale3x-Algorithmus mit dem upscale und des fant-Algorithmus mit dem downscale um 50%:

Original:

Bildbeschreibung hier eingeben

Skaliert:

Bildbeschreibung hier eingeben


Leider verarbeiten die meisten Pixel-Art-Skalierungsalgorithmen, die ich gefunden habe, nach wie vor in der Regel nur ganzzahlige Skalierungen (2x, 3x, 4x), sodass sie im Fall 720-> 1080 nicht viel helfen. (Vielleicht könnte man einen 3x-Pixel-Upscaler verwenden, der dann um die Hälfte verkleinert wird ...? Ich bin mir nicht sicher, ob das besser oder schlechter aussehen würde als ein direkter
Upscale

Gutes Argument. Ein bisschen bearbeitet, um es zu adressieren. Ich bin auch auf diesen Shader gestoßen , der die fraktionierte Skalierung zu unterstützen scheint .
Pikalek

+1 zur Vektorlösung. Sie müssen Ihr Vermögen wirklich groß und klein machen.
Mark Aven
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.