Was muss ich bei der Erstellung von 2D-Spielen für mehrere Auflösungen beachten?

27

Ich mache ein 2D (Android) Spiel. Android-Geräte unterscheiden sich erheblich in der Bildschirmauflösung. Was muss ich bei meinem Spiel beachten?

  • Muss ich große Versionen aller Bilder behalten und abhängig von der Auflösung verkleinern (verschwendet das nicht Platz)?
  • Skalieren Bitmap-Schriften gut oder muss ich etwas anderes verwenden?
  • Sonst noch etwas, was ich vergesse?
ashes999
quelle

Antworten:

26

Ich bin der Entwickler eines extrem portablen Handyspiels, das auf allen Geräten läuft, vom PC über Fernseher bis hin zum schwarz-weißen Amazon Kindle (Smiles HD - http://smileshd.com - Mehr Geräte und Plattformen als Sie dort sehen). .

Die beste Möglichkeit, ein Gerät zu unterstützen, besteht darin, eine Basisauflösung auszuwählen und dann auf den aktuellen Bildschirm zu skalieren (oder zu verkleinern). Wenn Sie schummeln möchten, können Sie die neue Bildschirmauflösung anpassen, aber im Idealfall sollten Sie das gleiche Seitenverhältnis beibehalten. Das Anpassen eines für ein 4: 3-Display erstellten Spiels sieht bei einem 16: 9-Format abscheulich aus, aber das Anpassen eines 16: 9-Formats an ein 16:10-Format kann niemand bemerken. Sie werden bemerken, dass ich Bildschirme nach Seitenverhältnis und nicht nach Abmessungen bezeichne, was in dieser Ära völlig zufälliger LCD-Größen besonders hilfreich ist.

Erstellen Sie Hintergründe, die größer sind als die meisten typischen Bildschirme, um Grafiken zu erstellen, die für jeden Bildschirm geeignet sind und das Seitenverhältnis beibehalten. Dies ähnelt dem Konzept der titelsicheren Bereiche beim Fernsehen.

http://en.wikipedia.org/wiki/Safe_area

Die generierten Hintergründe sind dafür sehr gut geeignet. Gekachelte Muster, Schachbrettmuster, fraktale Formen usw. Sie müssen nur ein wenig mehr generieren, um auf einen neuen Bildschirm zu passen.

Erstellen Sie außerdem statische Bilder, die größer sind als für den typischen Benutzer. Breiter als Breitbild (16: 9) und quadratischer als Standardauflösung (4: 3). Kehren Sie wieder zu den titelsicheren Bereichen zurück, platzieren Sie Ihre wichtigen Informationen in einem sicheren Bereich, vergrößern Sie die Größe ein wenig, sodass Ihr sicherer Bereich einen der Ränder Ihres Bildschirms berührt, und lassen Sie für Geräte, die nur ein wenig größer sind, etwas Platz frei.

Eine Variante, mit der ich heute arbeite, ist das Erstellen von "titelsicheren" 3D-Objekten. Da es sich um 3D-Objekte handelt, die ausschließlich aus Scheitelpunkten bestehen und größer als der Bildschirm sind, wird praktisch nicht mehr Speicher benötigt, als wenn sie passen würden. Genau wie die Pixeldichte zunimmt, möchten Sie möglicherweise einige Texturen mit höheren Details. Wenn nicht, na ja, ist es ein bisschen verschwommen.

Benutzerschnittstellen Ich möchte die Hauptbenutzeroberfläche in ein perfektes Quadrat in der Mitte des Bildschirms einfügen. Die Ecken und die Mittelkanten eignen sich auch sehr gut zum Abstellen von Gegenständen. Sie sollten ihre Koordinaten als solche berechnen (relativ zur Ecke oder den Mittelkanten).

http://www.smileshd.com/press/iPad/png/UI01.png

Wenn Sie wirklich Lust haben, können Sie sowohl große als auch breite Orientierungen unterstützen. Einige Geräte melden ihre Bildschirmauflösungen als höher als breit (z. B. das iPhone). Daher müssen Sie möglicherweise sowieso etwas für diese Geräte tun, auch wenn Sie einfach alle Koordinaten drehen.

Eine Benutzeroberfläche, die sich sowohl für große als auch für große Bildschirme eignet, kann ein beeindruckender Anblick sein.

Breit: http://www.smileshd.com/press/iPad/jpg/SmilesHD01.jpg

Hoch: http://www.smileshd.com/press/iPad/jpg/SmilesHD02.jpg

Was das Design angeht, müssen Sie statt Hochformat + Hochformat umkehren + Querformat umkehren nur Hochformat und Breitformat in Betracht ziehen. Wenn Sie die Positionen der Objekte auf dem Bildschirm auswählen, sollten Sie eine geeignetere alternative Position für die andere Ausrichtung in Betracht ziehen.

Muss ich große Versionen aller Bilder behalten und abhängig von der Auflösung verkleinern (verschwendet das nicht Platz)?

Nun, Sie können entweder Speicherplatz verschwenden und eine größere Auswahl an Geräten mit einem einzigen Build unterstützen oder Ihre Zeit verschwenden und müssen für viele Geräte VIELE Builds erstellen und die Bildgröße ändern.

Am besten erstellen Sie Ihre Grafik mit einer höheren Auflösung als die endgültige Größe eines 1080p-Fernsehers (1920 x 1080). 2048x2048 sollte in Ihrer Originalvorlage eine gemeinsame Größe haben. Entweder das, oder Sie können Vektorgrafiken wie Flash und Adobe Illustrator verwenden.

Es wird dringend empfohlen, einen automatisierten Prozess zum Ändern der Bildgröße zu erstellen. Heutzutage überschreiten die meisten Mobilgeräte, einschließlich Tablets, Auflösungen von 720p (1280x720) nicht ... zumindest nicht viel. Nächstes Jahr wissen wir nur noch nicht, ob das noch stimmt (iPad 3?).

In jedem Fall sollten Sie sich für eine optimale Leistung an die Idee von Quellgrafiken und Quellressourcen gewöhnen. Sie können dann einen Prozess ausführen, der die Daten für die Geräte optimiert, auf die Sie abzielen.

Skalieren Bitmap-Schriften gut oder muss ich etwas anderes verwenden?

Sie lassen sich gut skalieren, wenn Sie eine gute Filterung verwenden. Wenn Sie Ihr 2D-Spiel mit 3D-Hardware (OpenGL ES) erstellen, muss ich dringend empfehlen, die lineare Filterung in Kombination mit MipMapping (dh eine Reihe verkleinerter Bilder) zu verwenden. Hiermit erzielen Sie ein perfektes Ergebnis, und es ist oft schneller, Mipmaps zu verwenden, als dies nicht zu tun.

http://en.wikipedia.org/wiki/Mipmapping

Wie auch immer, ich hoffe das hilft. Viel Glück bei Ihrem Projekt.

Mike Kasprzak
quelle
2

Im Allgemeinen sollte jede Textur 256x256 oder 512x512 sein. Wenn Sie auch Pads (Galaxy Tab, Honecomb, iPad) anvisieren, wird 512 x 512 nicht den gesamten Bildschirm ausfüllen. Daher möchten Sie möglicherweise größere Versionen der Kunstobjekte einbeziehen, die den Bildschirm ausfüllen müssen. Apple enthält ein natives "@ 2x" -Image-Suffix, um diesen Fall zu behandeln.

Die einfache Lösung, die ich selbst verwendet habe, ist, einfach ein Spiel für einen 320x480-Bildschirm (iPhone) zu erstellen. Lassen Sie dies natürlich für iPhone 2 (640 x 960) verdoppeln, und der einzige andere Fall, den Sie wirklich anders behandeln müssen, ist die Tatsache, dass einige Android-Geräte einen größeren Bildschirm haben - legen Sie einfach einen Puffer oben und unten (im Hochformat) Modus).

Kurz gesagt, erstellen Sie Ihr Spiel für eine neutrale Bildschirmgröße und decken Sie dann die Ausnahmen ab, basierend auf

Mr. Strange
quelle
2
Ich glaube, du hast mein AndroidEtikett verpasst . Auf jeden Fall saugt Puffer; Es ist besser, wenn Ihr Spiel tatsächlich skaliert und gut aussieht.
Asche999
1

Am besten bewahren Sie die Arbeitskopien aller Assets auf, die Sie besitzen. Wenn Sie beispielsweise ein Bild in Photoshop entwickeln, speichern Sie die ursprüngliche PSD-Datei. Jedes Mal, wenn Sie ein anderes Res-Image benötigen, können Sie es öffnen und das neue Image mit minimalem Qualitätsverlust exportieren.

Anstatt für die eine oder andere Bildschirmgröße zu bauen, würde ich Ihnen dringend empfehlen, von Anfang an für eine Vielzahl von Anwendungen zu bauen. Sie sprechen nicht nur über unterschiedliche Pixeldichten, sondern auch über unterschiedliche Seitenverhältnisse. 16x9 und 16x10 können zu einem ganz anderen visuellen Erlebnis führen. Testen Sie neue Änderungen daher auf einer Vielzahl unterschiedlicher Bildschirmformen und -größen.

Nach meiner Erfahrung lassen sich Bitmap-Schriftarten überhaupt nicht gut skalieren. Dies hängt möglicherweise stark vom verwendeten Schriftstil ab. Im Allgemeinen führt das erneute Abtasten der Schrift-Bitmap jedoch zu sehr schlechten Ergebnissen. Bitmap-Schriftarten funktionieren am besten, wenn für die Texturabtastung nicht Multisampling (GL_NEAREST und ohne Mipmaps) festgelegt ist und sie so gerendert werden, dass sie pixelweise auf den Bildschirm abgebildet werden. Möglicherweise möchten Sie eine Reihe von Renderings mit derselben Schriftart in unterschiedlichen Größen verwenden und sicherstellen, dass die Schriftart in Ihrem Spiel immer im Maßstab == 1 angezeigt wird. Dies ermöglicht Ihnen einige eingeschränkte Optionen bei der Auswahl einer Schriftgröße, die in einem bestimmten Szenario verwendet werden soll.

notlesh
quelle
1

Android bietet eine Hilfe für diese ...

Sie können "alternative Ressourcen" für Elemente wie Ihre Grafiken angeben.
Sehen Sie sich den Abschnitt "Bereitstellen alternativer Ressourcen" unter folgendem Link an: http://developer.android.com/guide/topics/resources/providing-resources.html Sie sollten Beispiele in den SDK-Beispielen oder über Google finden können.

Außerdem stellt Google einen Android-Emulator zur Verfügung, den Sie mit dem SDK erhalten. Sie können mehrere virtuelle Geräte mit unterschiedlichen Konfigurationen definieren, um Ihren Code zu testen. Hier ist ein Link zu weiteren Informationen: http://developer.android.com/guide/developing/devices/emulator.html

Viel Glück amb

amb
quelle
0

Neben den technischen Aspekten (angesprochen von Mr Strange) sollten Sie vorsichtig sein, wenn Sie ein Spiel mit variabler Bildschirmgröße entwerfen. Stellen Sie sich beispielsweise vor, Sie spielen Straßen der Wut auf einer landschaftsähnlichen Leinwand und dann auf einer Leinwand im Hochformat.

Diego
quelle