Jakiego układu współrzędnych użyć do obsługi interfejsu 2D?

Kontynuując pytanie o proporcje , jestem zainteresowany usłyszeniem, czego używają inni ludzie podczas pracy nad systemami 2D UI (najprawdopodobniej własnymi rozwiązaniami własnymi). W szczególności, jak radzisz sobie z układami współrzędnych. Moim zdaniem istnieją trzy opcje:

1. Współrzędne zakodowane na stałe (np .: 0 -> 720, 0 -> 576)
2. Znormalizowane współrzędne (0,0 -> 1,0, 0,0 -> 1,0), odwzorowane na rzeczywiste współrzędne przed renderowaniem
3. Współrzędne wirtualne (np .: 0 -> 1600, 0 -> 1000), odwzorowane na rzeczywiste współrzędne przed renderowaniem

Kodowanie jest oczywiście przydatne tylko wtedy, gdy jesteś na stałej platformie i wiesz z góry, jakie są twoje współrzędne przestrzeni ekranu, lub jeśli jesteś przygotowany do tworzenia układów ekranu dla każdego możliwego zestawu wymiarów ekranu.

Znormalizowane współrzędne są ładne, ale cierpią z powodu niejednoznaczności, gdy proporcje ekranu nie są stałe (np. 0,75 odwzorowuje inną fizyczną współrzędną podczas pracy w trybie panoramicznym niż w przypadku 4: 3). Ponadto dla autorów deklarowanie elementu interfejsu użytkownika jako 0,2 (0,2 x 0,2) jest naprawdę sprzeczne z intuicją, ale okazuje się, że nie jest kwadratowe podczas renderowania.

Współrzędne wirtualne są jednoznaczne, ale występują na nich te same problemy, co znormalizowane współrzędne na etapie odwzorowywania: niewielka rozbieżność dziesiętna może powodować błędy „jeden po drugim”, co oznacza, że ​​elementy interfejsu, które powinny być ułożone, mają teraz szew między nimi.

Podobnie, gdy masz ekran o stałej rozdzielczości, zarówno znormalizowane, jak i wirtualne współrzędne oznaczają, że bardzo trudno jest zagwarantować odwzorowanie 1: 1 między precyzyjnie spreparowanymi pikselami artysty na obrazie interfejsu użytkownika a pikselami na ekranie, co oznacza, że ​​ryzykujesz nieprzyjemne skalowanie artefaktów (zakładając, że renderujesz jako teksturowane kwadraty na ekranie).

Zastosowaliśmy wirtualne podejście do współrzędnych, aby uniknąć niejednoznaczności co do proporcji obrazu. Podczas renderowania na ekran 16:10 przestrzeń interfejsu użytkownika wynosi (0,0) -> (1600,1000), ale podczas renderowania do 4: 3, użyteczna przestrzeń interfejsu użytkownika to (133,0) -> (1467 , 0).

Czy są jakieś lepsze rozwiązania, których po prostu nie jestem świadomy? Czy są jakieś dobre strategie minimalizacji problemów, jakie mają te 3 podejścia?

Myślę, że zgadzam się, że znormalizowane współrzędne nie bardzo dobrze odwzorowują elementy interfejsu użytkownika.

To, co zwykle robię dla układów 2D, to zasadniczo „wirtualna” przestrzeń współrzędnych, ale wybieram przestrzeń, która odwzorowuje 1: 1 z moją preferowaną rozdzielczością docelową (na przykład 1280x720). Nie jest to naprawione, ale intuicyjne w obsłudze i wiem, że w 90% przypadków będzie wyglądać dobrze. Oczywiście ważne jest, aby nie popadać w samozadowolenie i często sprawdzać różne rozdzielczości.

Aby uzyskać ostrość podczas mapowania rozdzielczości, pożyczę kilka wskazówek z renderowania czcionek i udzielę wskazówek. Upewnij się więc, że rzeczy, które muszą być ciągłe, są w jakiś sposób oznakowane, wykonując jednocześnie zaokrąglanie do dokładnych pikseli, w których konieczne jest wyraźne wyrównanie.

Być może rozważ także uczynienie rzeczy bardziej względnymi. Tak więc zamiast wszystkiego, co jest „pozycją obiektu 1 w absolutnym X, Y”, można określić „pozycję dolnej lewej strony obiektu 2 w pewnej odległości od prawej dolnej części obiektu 1”. Łatwiej jest wtedy przeskalować i / lub przenieść rzeczy bez utraty ważnych relacji.

Układ współrzędnych CEGUI wydaje się bardzo dobrze przemyślany. To zunifikowany układ współrzędnych łączy pozycjonowanie bezwzględne z pozycjonowaniem względnym. Możesz określić lokalizacje takie jak:

• na środku ekranu
  UDim(0.5,0)
• pięć pikseli na lewo od prawej krawędzi
  UDim(1.0,-5)
• dwa widżety pośrodku, ale oddzielone 10 pikselami
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

W razie wątpliwości dlaczego nie skorzystać z modelu pudełkowego CSS lub jego uproszczenia?

Możesz określić pozycje w procentach lub pikselach. Możesz ustawiać pojemniki w procentach, ale na przykład umieszczać w nich elementy według pikseli.

Lubię używać wirtualnych współrzędnych, ale opartych na wspólnej rozdzielczości docelowej (najlepiej jednej z najwyższych rozdzielczości, w których spodziewasz się, że gra zostanie uruchomiona).

Obecnie dobrym wyborem może być 1920x1080.

Wszystkie grafiki i makiety ekranu można tworzyć w tej rozdzielczości, co ułatwia pomiar pozycji / odległości w pikselach.

Jeśli pracujesz z innym współczynnikiem proporcji niż wirtualne współrzędne, możesz wybrać sposób dopasowania go do ekranu (litery, przycinanie boków lub trochę obu)

Podczas kodowania „myślenie w pikselach” jest znacznie łatwiejsze niż myślenie w znormalizowanych współrzędnych! - Chcę, aby tekst miał „50 (wirtualnych) pikseli wysokości” zamiast „0,0463 jednostek wysokości”

Zależy to całkowicie od rodzaju posiadanego GUI, ale często gry mają rzeczy zakotwiczone wzdłuż krawędzi ekranu i w rogach, a następnie mogą mieć pole na środku ekranu na modalne okno dialogowe lub coś w tym stylu.

Jeśli tak jest w twoim przypadku, czy mogę zasugerować użycie schematu, w którym określasz kotwicę i odsunięcie (x, y)? Byłoby to podobne do BorderLayout Javy (ale może z czterema rogami, czterema krawędziami i jednym środkiem ekranu). Na przykład można określić przesunięcie (0,0) od lewego górnego rogu; wtedy element zostanie zakotwiczony dokładnie w rogu ekranu. A następnie, bez względu na rozdzielczość, proporcje itp., Wskaźnik zdrowia będzie znajdować się w rogu ekranu. Ale jeśli zakotwiczymy element w prawym górnym rogu, element naturalnie zostanie zakotwiczony w stosunku do jego prawego górnego punktu (zamiast lewego górnego), więc ponownie zostanie automatycznie zakotwiczony w rogu ekranu bez względu na rozdzielczość.

Zdecydowanie polecam w stosunku do znormalizowanych współrzędnych 0,0-1,0; mogą się one różnić w zależności od dokładności zmiennoprzecinkowej. GUI powinny być mapowane na piksele, chyba że masz GUI 3D.

Wiele zależy od rodzaju gry i sytuacji. W przypadku szybkich i brudnych prototypów wolę planować interfejs użytkownika na papierze milimetrowym, zapisywać listę współrzędnych numerycznych dla stałego rozmiaru okna i wszystko kodować na stałe - dla mnie jest to łatwiejsze i szybsze. Ale w przypadku „prawdziwego” projektu, w którym chciałbyś mieć okna o zmiennej wielkości lub alternatywne rozdzielczości ekranu, to oczywiście nie byłoby idealne, a jakieś rozwiązanie pozwalające na skalowanie w obu kierunkach byłoby lepsze.