Wie verkleinere ich Pixelkunst?


14

Es gibt viele Algorithmen , um die Pixelkunst zu vergrößern. (Ich persönlich bevorzuge hqx .) Aber gibt es irgendwelche bemerkenswerten Algorithmen, um es zu verkleinern ? Mein Spiel ist für eine Auflösung von ausgelegt 1280x720, aber wenn es mit einer niedrigeren Auflösung gespielt wird, möchte ich immer noch, dass es gut aussieht.

Die meisten Pixel-Art-Diskussionen drehen sich um die Verwendung in Konsolenemulatoren 320x200oder deren 640x480Upscaling, aber ich frage mich, wie moderne 2D-Spiele wie das Monkey Island Remake bei niedrigeren Auflösungen gut aussehen können.

Natürlich wird die Option ignoriert, mehrere Versionen von Assets zu haben (dh Mipmapping ).


Mipmapping erfordert nicht mehrere Versionen von Assets. Dies kann beim Laden von Inhalten automatisch durch OpenGL oder DirectX erfolgen. Würde das Ihre Ziele erfüllen?
Seth Battin

@SethBattin Ich bin nicht sicher. Ich denke darüber nach, ein Spiel für 1280x720 in z. B. 1024x576 auszuführen. Was verwenden OpenGL und DirectX zum erneuten Skalieren, wenn ich ein Bild mit einer Größe von 128 x 96 und einer Größe von 102 x 76 angebe? (das ist sogar ein Rundungsproblem, da es 102,4x76,8 Pixel sein sollte)
Michael Stum

Mipmapping verwischt das Bild sehr. Das würdest du für pixelart nicht wollen.
Kromster sagt Unterstützung Monica

5
Nur zu Ihrer Information: Für Monkey Island Remake war kein Downscaling erforderlich. Das Spiel lief mit EGA und hatte eine effektive Größe von 320x200 Pixel. Es ist nicht erforderlich, verkleinerte Versionen für Mobilgeräte zu erstellen, da diese bereits kleiner sind als die Auflösung, die diese Geräte heutzutage haben.
Mistzack

2
Wie sieht deine Pixelkunst aus? Sie bitten uns, blind zu antworten.
aaaaaaaaaaa

Antworten:


13

Ich mache gerade ein Spiel, das auf einer Vielzahl von Bildschirmgrößen und Seitenverhältnissen laufen muss, und es war kein sehr einfacher Prozess. Wenn Sie außerdem Dinge in Pixel Art machen und das Pixel Art-Gefühl beibehalten möchten, während Sie viele Auflösungen unterstützen, tauchen Sie in eine Welt voller Schmerzen ein. Seien Sie also vorbereitet.

Meiner Meinung nach können Sie verschiedene Dinge tun (einige sind exklusiv, andere nicht)

  1. Definieren Sie eine Mindestauflösung und skalieren Sie nur (alles) ganzzahlig mit dem nächsten Nachbarn. Auf diese Weise können Sie das Pixel-Art-Feeling beibehalten. Ich halte Downscaling nicht für eine gute Idee, da Sie sonst Details verlieren und der gesamte Zweck der Verwendung sorgfältig gestalteter Pixelkunst zunichte gemacht wird. Wenn Ihre minimale unterstützte Auflösung für Ihre Sprites zu klein ist, ändern Sie entweder Ihre minimale unterstützte Auflösung oder zeichnen Sie alle Assets neu, um diese minimale Auflösung zu unterstützen.

  2. Wenn Sie auf eine Auflösung oder ein Seitenverhältnis stoßen, das nicht ausreicht, um den gesamten Bildschirm abzudecken, verlängern Sie Ihr Spiel (zeigen Sie mehr Kacheln an), während Sie die Assets intakt halten. Sie sollten Ihr Spiel so gestalten, dass es immer noch mit dem minimalen Auflösungs- / Seitenverhältnis spielbar ist.

  3. Wenn eine Verlängerung des Spiels nicht möglich ist, füllen Sie die nicht zum Spiel gehörenden Bereiche des Bildschirms mit Schwarz. Entweder Streifen oben und unten, links und rechts oder ein schwarzer Rahmen. Dies ist, was das iPad tut, wenn iPhone-Apps im vergrößerten Modus ausgeführt werden. Dies ist auch in Emulatoren weit verbreitet.

  4. Gib auf, dem Pixelraster treu zu bleiben. Aber Sie müssen dann aufhören, Pixelkunstobjekte mit scharfen Ecken zu verwenden. Dann hoch- / runterskalieren mit bilinearer Filterung (oder optimal bikubisch, wenn Ihre Plattform dies unterstützt). Dies ist die beste Wahl, um die Bildschirmnutzung zu maximieren, während die Benutzererfahrung für alle unterstützten Auflösungen gleich bleibt.

Für mein Spiel habe ich Option 4 gewählt, und ich bin ziemlich überrascht, wie gut es auf Geräten aussieht, die von 320 Pixel in der Vertikalen (ein altes Android 2.3) bis zu 1536 Pixel in der Vertikalen (ein iPad mit 2012) reichen Retina Display). Die ursprünglichen Elemente sind für 600 Pixel in der Vertikalen vorgesehen (ursprünglich für die Anzeige von 800 x 600 Pixel auf einem Windows-PC). Obwohl für nachfolgende Spiele, denke ich, dass eine bessere logische vertikale Auflösung 720 Pixel ist.

Das Spiel verwendet eine virtuelle Auflösung von 600 Pixel, skaliert auf die native Auflösung des Geräts mit bilinearer Filterung. Dies bedeutet, dass alle In-Code-Y-Koordinaten von 0 (oben auf dem Bildschirm) bis 600 (unten auf dem Bildschirm) reichen.

Für die horizontale Größe nehme ich an, dass die maximale Breite 1080 Pixel beträgt, was mehr als genug ist, um auch die breitesten 16: 9-Seitenverhältnisse abzudecken. Meine x-Koordinaten sind zentriert, also ist x = 0 die Mitte des Bildschirms, und die x-Koordinaten reichen von -540 links bis 540 rechts. Ich stelle sicher, dass alles zwischen -400 und 400 passt, um die schmalsten Displays zu unterstützen (4: 3)

Wenn ich jedoch das Pixel-Art-Feeling beibehalten müsste, würde ich auf jeden Fall die Optionen 1 und 2 verwenden. Dies bedeutet, dass ich nur ganzzahlig skalieren würde, um das blockartige Feeling von Pixel-Art beizubehalten und das Spiel so zu gestalten, dass die Menge sichtbar wird Kacheln sind nicht fixiert und können an jede Bildschirmauflösung und jedes Seitenverhältnis angepasst werden.

Also, um Ihre Frage (nicht) zu beantworten. Ich denke, dass das Verkleinern von Pixelkunst eine sehr schlechte Idee ist, also sollten Sie es nicht tun. Es gibt andere Möglichkeiten, um verschiedene Bildschirmauflösungen zu unterstützen, die bessere Ergebnisse liefern, als nur Ihre sorgfältig erstellten Kunstwerke zu metzeln.


Ich bin in der gleichen Situation und es macht mich verrückt. Unser Spiel ist Pixelart für eine Bildschirmgröße von 600 Pixel. Aber wenn ich auf 720p-Bildschirme (PC) hochskaliere, sieht es wirklich schrecklich aus, leicht verschwommen. Ich weiß nicht wirklich, was ich hier machen soll. Ich habe auch darüber nachgedacht, eine größere Karte für 720p-Bildschirme zu erstellen und die Pixelart beizubehalten, aber dann habe ich das gleiche Problem für 1080p-Bildschirme. Ich denke, wir hätten 360p Pixelart (oder kleiner) machen sollen, damit wir eine perfekte x2- und x3-Skalierung für 720- und 1080p-Bildschirme hätten. Jetzt ist es zu spät dafür. Weitere Ideen oder Ratschläge?
Damian

8

Erwägen Sie, die verkleinerten Versionen tatsächlich zur Entwicklungszeit zu generieren und sie direkt als Ressource in das Spiel einzubeziehen. Verwenden Sie dazu Photoshop oder ein anderes Tool, mit dem Sie das erstellen, was Sie möchten. Lassen Sie das Spiel dann dynamisch die richtige Grafik auswählen, die für die aktuelle Auflösung geeignet ist.

Hier sind ein paar Gründe, warum Sie dies tun könnten ...

Spart Bearbeitungsarbeit

Wenn Sie die Skalierung zur Laufzeit programmgesteuert vorgenommen haben, wird Ihre Software das Bildmaterial wahrscheinlich trotzdem erstellen und zwischenspeichern. Warum also nicht einfach die verkleinerten Versionen in das Art-Asset-Bundle aufnehmen? Ich nehme an, wenn es den Download größer gemacht hat, als Sie möchten, ist es vielleicht wichtig, aber Sie sparen etwas CPU-Last, Festplatten-Schreibzugriffe usw.

Größere künstlerische Kontrolle

Wenn Sie die Kunst selbst neu skalieren, haben Sie eine bessere Kontrolle über das endgültige Erscheinungsbild. Das macht vielleicht keinen Unterschied, wenn Sie einen kleinen Betrag verkleinern, aber wenn Sie zu viel niedrigeren Auflösungen kommen, möchten Sie möglicherweise eine bessere künstlerische Kontrolle über das endgültige Erscheinungsbild haben. Wenn zum Beispiel die Augen eines bestimmten Charakters hervorgehoben werden müssen, können Sie die Versionen mit niedrigerer Auflösung mit weniger verkleinerten Augen zeichnen, um den Effekt beizubehalten - etwas, was die programmatische Skalierung nicht kann.

Dynamische Skalierung ist nicht perfekt

Sie können unverwechselbare künstlerische Entscheidungen treffen, die mit dynamischer Skalierung nicht funktionieren. Angenommen, Sie möchten ein Bild umrahmen, umranden oder hervorheben. Bei einer höheren Auflösung sieht dies möglicherweise gut aus, bei einer verkleinerten Version kann es jedoch vorkommen, dass der Effekt verschmutzt oder gänzlich verloren geht. Wenn Sie dies jedoch von Hand tun, können Sie den Effekt auf jede Größe einzeln anwenden und garantieren, dass Sie die Wirkung behalten.

andere Gedanken

Sie können auch einen hybriden Ansatz mit einer Reihe von auflösungsspezifischen Ressourcen durchführen, die dort verwendet werden, wo sie gefunden werden, und einer generischen Menge, die dynamisch skaliert wird, wenn keine auflösungsspezifische Version gefunden wird. Dies ist ein bisschen so wie die Android-Plattform funktioniert. Einige Informationen hierzu finden Sie unter http://developer.android.com/guide/practices/screens_support.html


0

Das Verkleinern ist einfacher als das Vergrößern, da Sie Informationen zum Wegwerfen auswählen, anstatt neue (und möglicherweise falsche) Informationen erfinden zu müssen, um die Lücken zu füllen. In diesem Sinne benötigen Sie hier wahrscheinlich nichts Besonderes, und die meisten Standard-Resampling-Algorithmen aus dem Bereich der Bildverarbeitung sollten für die Verkleinerung eines Bildes recht gut funktionieren: bilinear, Gauß, Lanczos usw.

Insbesondere Lanczos könnten eine interessante Wahl sein, da es das Bild schärft und möglicherweise Details beibehält, die ansonsten bei der Kombination mehrerer Pixel zu einem Bild verloren gehen würden. Dies geht natürlich zu Lasten der potenziellen Einführung unerwünschter Artefakte.

Einige visuelle Vergleiche hier: /gis/10931/what-is-lanczos-resampling-useful-for-in-a-spatial-context


3
-1, weil Verkleinerung Pixel-Art (die in der Regel von Hand gearbeiteten ist Pixel-per-Pixel, Beispiel ) wird mit jeder dieser Algorithmen nie gut aussehen. Bei einer Annäherung an den nächsten Nachbarn verlieren Sie wichtige Liniensegmente. Beim Interpolieren erhalten Sie unscharfe Bilder. Ich fürchte, es gibt keine befriedigende Antwort auf die Frage des OPs, es sei denn, man macht es manuell.
Mistzack
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.