Welches Koordinatensystem soll für die 2D-Benutzeroberfläche verwendet werden?

Nach der Frage nach den Seitenverhältnissen bin ich gespannt, was andere Benutzer bei der Arbeit an 2D-UI-Systemen verwenden (höchstwahrscheinlich ihre eigenen Lösungen). Wie gehen Sie konkret mit Koordinatensystemen um? Meiner Meinung nach gibt es drei Möglichkeiten:

1. Hartcodierte Koordinaten (zB: 0 -> 720, 0 -> 576)
2. Normalisierte Koordinaten (0.0 -> 1.0, 0.0 -> 1.0), die vor dem Rendern in reale Koordinaten abgebildet werden
3. Virtuelle Koordinaten (zB: 0 -> 1600, 0 -> 1000), die vor dem Rendern in reale Koordinaten abgebildet werden

Fest codiert ist natürlich nur dann nützlich, wenn Sie sich auf einer festen Plattform befinden und Ihre Bildschirmkoordinaten im Voraus kennen oder wenn Sie bereit sind, Bildschirmlayouts für jeden möglichen Satz von Bildschirmabmessungen zu erstellen.

Normalisierte Koordinaten sind nett, leiden jedoch unter Mehrdeutigkeiten, wenn das Seitenverhältnis des Bildschirms nicht festgelegt ist (z. B. 0,75 wird auf eine andere physische Koordinate abgebildet, wenn im Breitbildmodus ausgeführt wird als in 4: 3). Für die Autoren ist es auch sehr unerklärlich, ein UI-Element als (0,2 x 0,2) zu deklarieren, nur um festzustellen, dass es beim Rendern nicht wirklich quadratisch ist.

Virtuelle Koordinaten sind eindeutig, weisen jedoch die gleichen Probleme auf wie normalisierte Koordinaten in der Remapping-Phase: Eine winzige Abweichung von der Dezimalzahl kann zu Fehlern führen, die dazu führen, dass UI-Elemente, die jetzt gekachelt werden sollen, über eine Naht verfügen.

Wenn Sie über einen Bildschirm mit fester Auflösung verfügen, bedeutet dies, dass es sowohl bei normalisierten als auch bei virtuellen Koordinaten sehr schwierig ist, eine 1: 1-Zuordnung zwischen den fein gestalteten Pixeln Ihres Künstlers im Bild der Benutzeroberfläche und den Pixeln auf dem Bildschirm zu gewährleisten Böse Skalierungsartefakte (vorausgesetzt, Sie rendern als strukturierte Quads auf dem Bildschirm).

Wir haben uns für die virtuelle Koordinierung entschieden, um Unklarheiten in Bezug auf das Seitenverhältnis zu vermeiden. Wenn Sie also auf einem 16:10-Bildschirm rendern, ist der UI-Bereich (0,0) -> (1600,1000), aber wenn Sie auf 4: 3 rendern, ist der nutzbare UI-Bereich tatsächlich (133,0) -> (1467) , 0).

Gibt es bessere Lösungen, die mir einfach nicht bekannt sind? Gibt es gute Strategien, um die Probleme dieser drei Ansätze zu minimieren?

Ich glaube, ich bin damit einverstanden, dass normalisierte Koordinaten nicht wirklich gut auf UI-Sachen abgebildet werden.

Was ich normalerweise für 2D-Layouts mache, ist im Grunde Ihr "virtueller" Koordinatenraum, aber ich wähle einen Raum aus, der 1: 1 mit meiner bevorzugten Zielauflösung (zum Beispiel 1280x720) abgebildet wird. Es ist nicht festgelegt, aber es ist intuitiv zu handhaben und ich weiß, dass es in 90% der Fälle genau richtig aussieht. Offensichtlich ist es wichtig, nicht selbstgefällig zu werden und tatsächlich häufig unterschiedliche Auflösungen zu überprüfen .

Um die Auflösung beim erneuten Zuordnen zu verbessern, möchte ich einige Tipps zum Rendern von Schriftarten ausleihen und Hinweise geben. Stellen Sie also sicher, dass Dinge, die fortlaufend sein müssen, in irgendeiner Weise markiert sind, und runden Sie auf exakte Pixel, bei denen eine scharfe Ausrichtung erforderlich ist.

Vielleicht sollten Sie auch überlegen, die Dinge relativer zu gestalten. Anstatt "Position Objekt 1 bei absolutem X, Y" zu sein, können Sie "Position unten links von Objekt 2 etwas versetzt von unten rechts von Objekt 1" angeben. Es ist einfacher, Dinge neu zu skalieren und / oder zu verschieben, ohne wichtige Beziehungen zu verlieren.

Das Koordinatensystem von CEGUI scheint wirklich gut durchdacht zu sein. Das einheitliche Koordinatensystem verbindet die absolute Positionierung mit der relativen Positionierung. Sie können Orte wie die folgenden angeben:

• in der Mitte des Bildschirms
  UDim(0.5,0)
• fünf Pixel links vom rechten Rand
  UDim(1.0,-5)
• zwei Widgets in der Mitte, aber durch 10 Pixel getrennt
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

Wenn Sie Zweifel haben, warum nicht mit dem CSS-Box-Modell oder einer Vereinfachung davon gehen?

Sie können Positionen in Prozent oder Pixel angeben. Sie können Container mit Prozentsätzen positionieren, die darin enthaltenen Elemente jedoch beispielsweise pixelweise.

Ich benutze gerne virtuelle Koordinaten, aber basierend auf einer gemeinsamen Zielauflösung (vorzugsweise einer der höchsten Auflösungen, mit denen das Spiel ausgeführt werden soll).

In diesen Tagen kann eine gute Wahl 1920x1080 sein.

Alle Grafik- und Bildschirmmodelle können mit dieser Auflösung erstellt werden, und es ist einfach, Positionen / Abstände in Pixeln zu messen.

Wenn Sie ein anderes Seitenverhältnis als die virtuellen Koordinaten verwenden, können Sie festlegen, wie das Bild an den Bildschirm angepasst werden soll (Letterboxing, Beschneiden der Seiten oder ein bisschen von beidem).

Beim Codieren finde ich das "Denken in Pixeln" viel einfacher als das Denken in normalisierten Koordinaten! - Ich möchte, dass der Text "50 (virtuelle) Pixel hoch" und nicht "0,0463 Einheiten hoch" ist.

Es kommt ganz darauf an, welche Art von GUI Sie haben, aber in Spielen sind oft Dinge an den Rändern des Bildschirms und in Ecken verankert, und dann haben sie möglicherweise ein Kästchen in der Mitte des Bildschirms für einen modalen Dialog oder so.

Wenn dies für Sie der Fall ist, kann ich dann vorschlagen, ein Schema zu verwenden, in dem Sie einen Anker und einen Versatz (x, y) angeben? Dies ähnelt dem BorderLayout von Java (aber möglicherweise mit vier Ecken, vier mittleren Kanten und einer Bildschirmmitte). So können Sie beispielsweise einen Versatz von (0,0) von der linken oberen Ecke angeben. dann würde das Element genau in der Ecke des Bildschirms verankert. Unabhängig von Auflösung, Seitenverhältnis usw. befindet sich die Statusanzeige in der Ecke des Bildschirms. Wenn Sie dann ein Element in der rechten oberen Ecke verankern, wird das Element natürlich relativ zu seinem rechten oberen Punkt (anstelle von links oben) verankert, sodass es unabhängig von der Auflösung automatisch in der Ecke des Bildschirms verankert wird.

Ich empfehle definitiv gegen normalisierte 0.0-1.0 Koordinaten; Diese können je nach Gleitkommagenauigkeit variieren. GUIs sollten auf Pixel abgebildet werden, es sei denn, Sie haben eine 3D-GUI.

Viel hängt von der Art des Spiels und der Situation ab. Für schnelle und schmutzige Prototypen bevorzuge ich es, die Benutzeroberfläche auf Millimeterpapier zu planen, eine Liste mit numerischen Koordinaten für eine feste Fenstergröße aufzuschreiben und alles fest zu codieren - das ist für mich einfacher und schneller. Aber für ein "echtes" Projekt, bei dem Sie Fenstergröße ändern oder Bildschirmauflösungen ändern möchten, wäre dies offensichtlich nicht ideal, und eine Lösung, die eine Skalierung in beide Richtungen ermöglicht, wäre besser.