Wie gehen Sie bei rasterbasierten Grafikinhalten mit der Auflösungsunabhängigkeit um?

32

Spiele, die nicht in der Lage sind, auf einer gesperrten Plattform ausgeführt zu werden, wie z. B. Handhelds, müssen in verschiedenen Auflösungsformaten und Seitenverhältnissen ausgeführt werden.

In einem 3D-Spiel haben Sie möglicherweise ein HUD oder eine Menü-GUI, die auf Raster-Grafiken basiert, und in einem 2D-Spiel haben Sie möglicherweise eine Reihe von Quads, die Schiffe für Sprites sind.

Meine Frage ist also, wie Sie das Entwerfen und Betreiben von Inhalten über verschiedene Auflösungen und Seitenverhältnisse hinweg angehen. Angenommen, Sie haben ein Sprite-Zeichen, das 300 x 400 Pixel groß ist und von einer Ebene aus Kacheln umgeben ist. Bei unterschiedlichen Auflösungen / Seitenverhältnissen wird insgesamt ein anderes FOV angezeigt. Wenn Sie ein HUD- oder GUI-Menü haben, möchten Sie einige Elemente an den gleichen Positionen und in der gleichen Größe im Verhältnis zum Bildschirm anzeigen. Bei der Grafikquelle handelt es sich jedoch um Raster-Bitmaps, nicht um Vektoren.

Offensichtlich ist das Problem mehrfach angesprochen worden. Ich bin daran interessiert, mehr über verschiedene Ansätze zu erfahren, die bisher für Sie funktioniert haben. Behalten Sie eine beliebige dimensionsunabhängige "Pixel" -Einheit bei, die Sie mithilfe einer Formel, die auf Res und Seitenverhältnis oder anderen Ansätzen basiert, auf magische Weise in die erforderlichen Dimensionen umwandeln?

bearbeiten:

Die Schlussfolgerung ist also, Ihre Seitenverhältnisse aufzuzählen. Niedrigste Kombination von Aspekten: Die Auflösung ist diejenige, in die Sie wichtige Dinge entwerfen. Ein sicherer Bereich, wenn Sie so wollen. Gleiche Seitenverhältnisse, aber höhere Auflösungen sind einfache Skalierungsprobleme. Kunstinhalte sind auf höchste Auflösung ausgelegt. Größere Seitenverhältnisse zeigen einfach mehr Level / FOV mit Informationen, die nicht kritisch sind, wie dies im sicheren Bereich der Fall ist. Sowas habe ich in diesem Bild gemacht . Alt-Text

Keyframe
quelle
1
Ich verstehe nicht, wie Sie von den Antworten in dieser Frage zu der Schlussfolgerung gekommen sind, die Sie nach Ihrem " Bearbeiten: " gezogen haben. IMO, diese Antworten sind unzureichend und Sie hätten keine von ihnen akzeptieren sollen. EG: Ihre akzeptierte Antwort spricht nur über einen Teil der Frage (Sprite-Skalierung), nicht über das gesamte Problem. Was Sie nach dem " edit: " gesagt haben, ist nützlicher als die Antworten hier, IMO. Aber ich "verstehe" es nicht gut genug, um es zu implementieren. Wenn ich eine neue Frage zur Ausarbeitung stelle, wird diese leider als Duplikat markiert.
Daniel Kaplan

Antworten:

7

Wenn sich Ihre Auflösungen ähneln, können Sie für alle die gleiche Grafik verwenden, wobei die kleineren Bildschirme zur Laufzeit möglicherweise etwas verkleinert werden. Wenn sie sich um mehr als den Faktor 2 unterscheiden, müssen Sie separate Assets für die verschiedenen Auflösungen erstellen (oder zumindest von einem Künstler anpassen lassen).

Bei 2D hat die Auflösung einen großen Einfluss darauf, wie Sie Bilder entwerfen. Ein Sprite, das in hoher Auflösung detailreich und realistisch aussieht, ist schlammig und nicht zu entziffern. Ebenso wird ein Sprite, das bei niedriger Auflösung sauber und scharf aussieht, bei hoher Auflösung billig und übermäßig einfach aussehen.

herrlich
quelle
Seitenverhältnis macht mir allerdings Sorgen. Zum Beispiel ist es kein großer Sprung von 1080p auf 720p, da der Aspekt derselbe ist. Wir löschen ihn dann mit einfacher Skalierung. Was passiert, wenn Sie 1080p vs 1680x1050 sagen. Zeige ich mehr Level, breiteres FOV bei größerem Aspekt, eine Art Rand? Entwerfen Sie beispielsweise für einen breiteren Bereich mit einem sicheren Bereich, in dem alle wichtigen Inhalte gespeichert werden, um bei engeren Aspekten nicht vom Bildschirm abgeschnitten zu werden.
Keyframe
Ich werde die Frage mit der visuellen Darstellung dieser Lösung aktualisieren. Es scheint, als gäbe es keinen anderen Weg.
Keyframe
4

Eine Möglichkeit besteht darin, die Bildelemente in einem vektoriellen Format (SVG, Illustrator usw.) zu erstellen und sie nach Bedarf in Rasterbilder zu konvertieren, die von den verschiedenen Versionen des Spiels benötigt werden.

Matias Valdenegro
quelle
Klar, aber ich habe vergessen zu erwähnen, dass das keine Option ist. Das Hauptproblem ist, dass die Erstellung von Raster- und Vektorinhalten völlig anders ist (das Raster ist für Künstler weitaus besser). Eine Möglichkeit wäre, mehrere Raster-Assets zu erstellen, aber ich bin der festen Überzeugung, dass es eine bessere Lösung geben muss. Erstellen Sie zum Beispiel Assets für das größte unterstützte Res / Aspect-Verhältnis und verkleinern Sie es in Runtime-Versionen mit niedrigerer Auflösung im laufenden Betrieb oder in ähnlicher Form. Die Positionierung bleibt jedoch weiterhin das Problem.
Keyframe
Ja, das ist auch eine Option, wenn Sie die Qualitätsverluste und Leistungsprobleme tragen können.
Matias Valdenegro
8
Ich bin nicht sicher, ob es richtig ist, dass "Raster besser für Künstler ist". Mein Grafiker verwendet aus genau diesen Gründen Illustrator. Als es Zeit war, auf die 2X-Auflösung des iPhone 4 zu aktualisieren, war es für sie eine einfache Sache, einfach alles wieder zu exportieren. Raster ist vielleicht besser für Photoshop-Künstler, die sich nicht als Vektorkünstler weiterbilden möchten, aber auf lange Sicht sind sie wahrscheinlich besser dran, Experten für vektorbasierte Grafiken zu werden. Physische Plattformen ändern sich zu schnell, um in Pixeln zu denken.
Chris Garrett
4

Wenn in verschiedenen Auflösungen Vollbild beibehalten wird , wenn Sie Pixel-Perfektion wollen (zB „Wie es die Künstler produziert“), dann ist das Problem , dass es keine voll automatisiert maßstab Sprites nach oben oder unten (oder sie zu drehen) , dass doesn‘ Es bedarf keiner menschlichen Genehmigung. Letztendlich liegt das daran, dass die Platzierung von Pixeln eine subjektive Sache ist. Der Rendering-Algorithmus führt eine gewisse Skalierung oder Drehung durch und muss dazu einige Approximationstechniken verwenden, z. bilineare Filterung. Wenn Sie noch harte Kanten an den Pixeln, um diese „Pixel Perfektion“ haben wollen (also nicht AA oder BF verwendet wird ), dann sind Sie gehen zu müssen , dass die Skalierung von einigen Nicht-Power-of-2 Grad akzeptieren , gehen zu produzieren einige unerwünschte Artefakte.

Ein interessanter Ansatz für ein ähnliches Problem ist RotSprite , eine Anwendung / ein Algorithmus, mit dem Sprites "automatisch" gedreht werden können. Damit meine ich, dass es nach intensiver Verarbeitung eine Reihe von möglicherweise wünschenswerten Endergebnissen liefert, aus denen der menschliche Bediener auswählen kann. Die handverlesenen Sprites landen dann im Spiel, was bedeutet, dass dies ein Schritt zur Erstellung von Inhalten ist und kein Schritt zur Laufzeit.

Eine mögliche Antwort auf Ihre Frage "Agnostisches Pixel mit beliebiger magischer Dimension": OpenGL (das Sie möglicherweise verwenden möchten, wenn Sie plattformübergreifend arbeiten) funktioniert ganz anders als ein Software-Raster-Renderer. Es berücksichtigt die Breite und Höhe der Anzeige im Gleitkommabereich von 0,0 bis 1,0 und ordnet die Pixel der GPU entsprechend zu. Dies kann natürlich selbst zu Artefakten führen, es sei denn, z. BF ist für Texturen aktiviert (was Ihre Sprites in OpenGL sind).

Ingenieur
quelle
Das ist völlig falsch. Sie können Komposition und wiederholbare Elemente (Think Tiles) anstelle der Skalierung verwenden, um das Pixel bei jedem Seitenverhältnis perfekt zu halten. Wenn die Elemente bei höherer Auflösung klein sind, werden sie natürlich immer kleiner. Sie benötigen also eine 2-fache Skalierung oder unterschiedliche Auflösungsressourcen.
Adrix89