Wie mache ich ein auflösungsunabhängiges System?

Ich mache hier einen Blank. Ich kann natürlich Dinge an Kanten verankern, die meine UI-Auflösung unabhängig machen würden ... bis sie sich so stark ändert, dass die Grafiken zu klein sind. Wie skaliere ich bei Bedarf angemessen? Wie halte ich meine Grafiken beim Skalieren im richtigen Verhältnis? Ich möchte nicht, dass sie gedehnt werden, wenn die Auflösung ein anderes Verhältnis wie 16:10 hat als alles andere.

Gibt es dafür einen echten und erprobten Ansatz? Videoplayer zeigen aufgrund dieses Problems schwarze Ränder. Ist dies nicht richtig lösbar?

Denken Sie zunächst daran, dass es bei der Rasterung technisch gesehen keine echte Unabhängigkeit von der Auflösung gibt. Bei ausreichend hoher Vergrößerung werden einzelne Texel sichtbar. Die einzige Lösung hierfür besteht darin, ein Vektorgrafiksystem zu schreiben.

Abgesehen davon gibt es einige Schritte zum Erstellen eines robusten, rasterbasierten, auflösungsunabhängigen Systems: Größe, Koordinatensysteme und Layout.

Für die Dimensionierung und Positionierung müssen einige Einheiten verwendet werden, die ein Verhältnis zur tatsächlichen Anwendungsauflösung beibehalten. In diesem Fall können Sie Zoll verwenden, da ich Amerikaner bin und Sie Elemente mit DPI (Punkte pro Zoll) skalieren können. Angenommen, Ihre Anwendung wird mit 800 x 600 ausgeführt. Die Standard-Windows-DPI ist 96, dh die Anwendung hat eine Auflösung von (800/96) x (600/96) Zoll oder 8,33 x 6,25 Zoll.

Da Sie zumindest mit den Seitenverhältnissen 4: 3 und 16: 9 arbeiten müssen, wird der Umgang mit Ihrem Bildschirmkoordinatensystem etwas schwierig. Ich empfehle, (0,0) in die Mitte des Anzeigebereichs (sowie in Fenster und Steuerelemente) zu setzen. Dies funktioniert gut, denn wenn Sie (0,0) in eine Ecke einfügen, werden alle Ihre Sprites übersetzt, wenn sich diese Ecke basierend auf Auflösung und Seitenverhältnis bewegt, während die Mitte des Bildschirms immer die Mitte des Bildschirms Nr. 1 ist egal das Gerät. Wenn wir unser Beispiel mit 800 x 600 fortsetzen, würde dies zu einem Koordinatensystem führen, das (von links nach rechts) -4,165 Zoll bis 4,165 Zoll und (von oben nach unten) 3,125 Zoll bis -3,125 Zoll beträgt.

Im Moment haben Sie also ein DPI-unabhängiges UI-System mit Elementen, die sich immer an derselben Stelle relativ zur Bildschirmmitte befinden - nicht ganz auflösungsunabhängig. Glücklicherweise können Sie mit der DPI-Unabhängigkeit die Benutzeroberfläche skalieren, indem Sie die DPI anhand einer Heuristik skalieren. Zum Beispiel können wir DPI mit vertikaler Auflösung als Heuristik skalieren. Wenn 800 x 600 96 DPI ist, verwenden wir 123 DPI für 1024 x 768 oder 115 DPI für 1280 x 720.

Zuletzt müssen Sie ein Layoutsystem erstellen, das sowohl die absolute als auch die relative Positionierung übernimmt. Hervorragende Beispiele hierfür sind WPF und das Web. Sie können festlegen, dass Steuerelemente / Felder einige% des übergeordneten Elements ausfüllen, während Sie es zusammen mit vielen anderen nützlichen automatischen Layoutoptionen an eine Kante andocken. All dies zusammen führt zu einem UI-System, das über viele verschiedene Auflösungen und Seitenverhältnisse hinweg nahezu identisch aussehen kann.

Zusammenfassend kann ich Ihnen nur empfehlen, WPF zu studieren, da es fast alles tut, außer dass es einen Ursprung im Koordinatensystem der oberen linken Ecke beibehält und DPI nicht automatisch basierend auf der vertikalen Auflösung skaliert.

Im Allgemeinen hängt das, was Sie tun möchten, vom Spiel ab.

Eine Möglichkeit besteht darin, schwarze Ränder zu haben, wenn das Seitenverhältnis (Proportionen) unterschiedlich ist (wahrscheinlich am einfachsten, einfach in Textur rendern und dann auf dem Bildschirm rendern und die Größe entsprechend anpassen).

Eine andere Möglichkeit besteht darin, unterschiedliche Renderpfade für unterschiedliche Seitenverhältnisse zu haben. Sie könnten eine für Breitbild, eine für "normal" haben.

Eine weitere Möglichkeit besteht darin, die Dinge separat zu skalieren, z. B. ein UI-Meldungsfeld je nach Auflösung größer oder kleiner zu machen. Wann immer Sie herausfinden müssen, wohin Sie zeichnen sollen, anstatt exakte Pixel zu verwenden, führen Sie Dinge wie 0,2 nach unten, 0,8 nach unten, Breite 0,1, Höhe 0,3 aus. In diesem Fall kommt es offensichtlich zu einer Dehnung der Dinge, obwohl dies davon abhängt, wie Sie Dinge zeichnen, die in Ordnung sein könnten (dh einen UI-Hintergrund strecken, aber nicht den Text).

In Bezug auf 3D sollten Widescreen-Player, solange Sie das Ansichtsfenster korrekt eingerichtet haben, etwas mehr als Nicht-Widescreen-Setups sehen können. (Alternativ können Sie auch schwarze Ränder zeichnen oder die Ansicht erweitern.)