Wie würden Sie mit unterschiedlichen Seitenverhältnissen in einem 2D-Plattformer umgehen?

Vor langer Zeit war 4: 3 so ziemlich das einzige Verhältnis, das Sie auf einem PC finden würden. Heutzutage ist 16:10 am häufigsten, aber die meisten neuen Monitore (insbesondere Laptops) sind 16: 9

Ich schreibe einen 2D-Plattformer und kann mich nicht entscheiden, wie ich mit den verschiedenen Verhältnissen umgehen soll.

Hier sind ein paar Ideen:

1. 4: 3 bringt mehr Inhalt, Widescreens werden oben und unten geschnitten
2. 16: 9 bekommt mehr Inhalt, die anderen werden links und rechts geschnitten
3. Das Spiel ist im 16: 9-Format mit schwarzen horizontalen Balken für andere ARs
4. Das Spiel ist im 4: 3 mit schwarzen senkrechten Balken für andere ARs

Wenn Sie keinen zwingenden Grund haben, Ihr Spiel "weit" (in diesem Fall verwenden Sie Ansatz 3) oder "eng" (in diesem Fall verwenden Sie Ansatz 4) zu machen, wählen Sie eine Kombination aus 1 und 2 (oder möglicherweise 3 und 4, wenn Sie möchten) Dinge außerhalb des Bildschirms verstecken).

Wählen Sie ein Kompromiss-Seitenverhältnis (16:10 ist gut oder sogar 16:11). Wenn der Benutzer 16: 9 hat, geben Sie ihm mehr Inhalt zur Seite, und wenn er 4: 3 hat, geben Sie ihm mehr Inhalt oben und unten.

In jedem Fall - ich finde es am besten, es mit so etwas in Ihrer Kamera-Klasse zu implementieren:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

An diesem Punkt können Sie einfach mit verschiedenen nominalen Weltgrößen experimentieren (dh der Größe der Kamera in Welteinheiten) und einfach die beste auswählen.

Nun, als grundlegender Ratschlag würde ich auf dem PC sagen: "Gehen Sie nicht davon aus, dass Ihr Benutzer den Vollbildmodus ausführen möchte." Wählen Sie im Fenstermodus Ihr ideales Verhältnis und verwenden Sie es direkt.

Benutzer, von denen ich denke, dass sie schwarze Balken akzeptieren, wenn sie mit Vollbildinhalten dargestellt werden. Die Strategien 3 und 4 sind also akzeptabel, wenn nicht ideal. Sie haben den Vorteil, dass Sie immer wissen, wie viel Inhalt Sie rendern: dh keine heimlichen Fehler, die nur bei der Ausführung im Breitbildmodus auftreten.

Wenn Sie versuchen, sich anzupassen und die Benutzerrate über die Bildschirmauflösung zu ermitteln und so viele Inhalte wie möglich anzuzeigen, müssen Sie Inhalte mit hoher und niedriger Priorität unterschiedlich berücksichtigen. Inhalte mit hoher Priorität sind Dinge, die der Benutzer unbedingt auf dem Bildschirm sehen muss, wenn sie sich außerhalb des Bildschirms befinden, schlägt das Spiel fehl. Das sind also Dinge wie HUD- und UI-Elemente und der Player-Avatar und alles, mit dem sie interagieren. Inhalte mit niedriger Priorität sind Dinge, die gut sind, wenn sie auf dem Bildschirm angezeigt werden, aber wenn sie außerhalb des Bildschirms angezeigt werden, ist das keine große Sache. ZB: Hintergrundgrafiken und Dinge, die einigermaßen weit vom Avatar entfernt sind.

Angenommen, Sie haben eine Benutzeroberfläche / ein HUD, das über eine „physikalische“ 2D-Welt gelegt wird, dann ist dies einfach genug. Elemente mit niedriger Priorität sind einfach. Sie müssen nur sicherstellen, dass das 4: 3-Ansichtsfenster auf die interessanten Dinge zentriert ist, und dann so viele Elemente mit niedriger Priorität wie möglich nach links oder rechts zeichnen. Dinge mit hoher Priorität in der 2D-Welt (z. B. Ihr Charakter, Feinde, gegen die Ihr Charakter direkt kämpft) sollten immer im 4: 3-Ansichtsfenster aufbewahrt werden. Das heißt, Sie müssen Ihren Spielcode nicht in die Kamera zoomen, um die zusätzliche Bildschirmfläche zu nutzen, da Sie dann einen Spielcode haben, der im Breitbildmodus anders funktioniert als im Nicht-Breitbildmodus. Lassen Sie den Spielcode davon ausgehen, dass die Welt in 4: 3 gerendert wird, und lassen Sie Ihren Rendering-Code nur wissen, dass tatsächlich mehr als das sichtbar ist.

Das Erstellen von UI / HUD-Elementen kann auf zwei Arten erfolgen:

1. Dynamische Positionierung: Geben Sie alle Ihre Elemente relativ zu Bildschirmrändern an (dh nicht alle relativ zu 0,0). Abhängig von Ihrem Seitenverhältnis befinden sich die Elemente näher oder weiter von der Bildschirmmitte entfernt. Vorteile: Ermöglicht es Ihnen, Dinge an Ecken zu hängen und sie einfach funktionieren zu lassen. Nachteile: Es ist schwierig, das Layout in der Mitte gut zum Laufen zu bringen, und es besteht die Gefahr, dass sich Elemente überlappen
2. Konservative statische Positionierung: Platzieren Sie alle Ihre Elemente im 4: 3-Format und versetzen Sie sie einfach, wenn Sie im Breitbildmodus ausgeführt werden. Vorteile: einfache, eindeutige Layoutlogik / Koordinaten. Nachteile: Lässt links und rechts von den Steuerelementen der Benutzeroberfläche einen sichtbaren Totraum, in dem die 2D-Welt im Hintergrund angezeigt wird, jedoch keine Benutzeroberfläche.

Welches ist für dein Spiel am besten geeignet? Wenn Sie Canabalt machen (dh ein Spiel, das von der horizontalen Geschwindigkeit abhängt), ist ein breites Seitenverhältnis mit schwarzen Balken (# 3) auf engeren Seiten ideal, um die seitliche Bewegung hervorzuheben. Auf der anderen Seite ist ein größerer Bildschirm (Nr. 2 oder Nr. 4) am besten, wenn Sie ein Flugspiel wie Super Smash Brothers haben. Ich würde meine Entscheidung darauf stützen, was für das Spiel am besten funktioniert.

Ich stimme anderen Respondern zu, dass auf Elemente geachtet werden sollte, die auf einem Display sichtbar sein könnten, auf einem anderen jedoch nicht.

Castle Crashers scheint ein bisschen von # 2 und ein bisschen von # 3 zu verwenden - Sie erhalten schwarze Balken auf einem 4: 3-Bildschirm und auch einen etwas kleineren sichtbaren Bereich - aber Sie sollten immer einen "sicheren Bereich" um die Ränder haben wo man sowieso nichts lebenswichtiges unterbringt (für Bildschirme wie Röhrenfernseher, die die Ränder beschneiden)

Es gibt noch eine andere Option. Sie können ein Zwischenverhältnis festlegen und beide normalen Auflösungen beschneiden und erweitern (oder angrenzen).

Ich glaube, dass Fernsehfilme auf diese Weise gerahmt sind, sodass der Breitbildmodus in Ordnung aussieht (nicht jeder ist mitten in der Szene), wohingegen das Beschneiden für 4: 3 nicht ganz so drastisch ist und es nur minimale Schwenks gibt.

Hier ist ein Blog-Beitrag zum Umgang mit mehreren Bildschirmgrößen auf Mobilgeräten und hier der zweite Teil, wie dieser Ansatz mit libgdx in Java codiert wurde . Es ist ein bisschen wie Andrews Antwort, kann aber jemand anderem helfen.

Der Blogbeitrag behandelt drei Hauptansätze:

1. Lebe mit schwarzen Balken oben oder an den Seiten.
2. Verwenden Sie ein virtuelles Ansichtsfenster.
3. Verwenden Sie schwebende Elemente, ähnlich wie Sie es in einem Webseiten-Flexbox-Layout finden würden.

Nr. 1 ist ziemlich selbsterklärend.

Um nicht zu veranschaulichen. 2, nehmen wir an, Sie möchten drei verschiedene Geräte mit drei verschiedenen Seitenverhältnissen unterstützen. Öffnen Sie das Bild in einem Bildeditor. Zeichnen Sie für das erste Gerät das größte Rechteck im Seitenverhältnis des Geräts, das in Ihr Bild passt. Machen Sie dasselbe für das zweite und das dritte Gerät. Ihr nutzbarer Bereich oder virtuelles Ansichtsfenster ist der Schnittpunkt aller drei Rechtecke. Es kann nicht garantiert werden, dass etwas außerhalb dieses Ansichtsfensters sichtbar ist.

Nr. 3 beinhaltet das Platzieren von Objekten auf dem Bildschirm, ähnlich wie Sie Elemente auf einer Webseite mit Flexbox oder Float platzieren würden. Beispielsweise würden Sie die Pause-Schaltfläche 5 Pixel von oben und 5 Pixel von rechts platzieren. Unabhängig vom Seitenverhältnis des Geräts befindet sich die Pausentaste immer in der rechten oberen Ecke.