Jak poradziłbyś sobie z różnymi proporcjami obrazu w platformówce 2D?

Dawno temu 4: 3 było właściwie jedynym współczynnikiem apekcji, jaki można znaleźć na PC. Dzisiaj najpopularniejszym jest 16:10, ale większość nowych monitorów (zwłaszcza laptopów) ma format 16: 9

Piszę platformówkę 2D i nie mogę się zdecydować, jak powinienem obsługiwać wszystkie różne proporcje.

Oto kilka pomysłów:

1. 4: 3 dostaje więcej treści, ekrany panoramiczne są wycinane na górze i na dole
2. 16: 9 dostaje więcej treści, pozostałe są wycinane w lewo iw prawo
3. Gra jest w formacie 16: 9 z czarnymi poziomymi paskami dla innych AR
4. Gra jest w formacie 4: 3 z czarnymi pionowymi paskami dla innych AR

Jeśli nie masz istotnych powodów, aby uczynić grę „szeroką” (w takim przypadku użyj podejścia 3) lub wąską (w takim przypadku użyj podejścia 4), wybierz kombinację 1 i 2 (lub ewentualnie 3 i 4, jeśli chcesz ukryj rzeczy poza ekranem).

Wybierz kompromisowy format obrazu (16:10 jest dobry, a nawet 16:11). Jeśli użytkownik ma 16: 9, daj mu więcej treści z boku, a jeśli ma 4: 3, daj mu więcej treści na górze i na dole.

W każdym razie - uważam, że najlepiej jest to zaimplementować w swojej klasie kamer:

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

W tym momencie możesz po prostu eksperymentować z różnymi nominalnymi rozmiarami świata (tj. Rozmiarem kamery w jednostkach światowych) i po prostu wybrać najlepszy.

Cóż, jako podstawowa rada, na PC powiedziałbym: „nie zakładaj, że użytkownik chce uruchomić pełny ekran”. W trybie okienkowym wybierz idealny współczynnik i po prostu użyj go bezpośrednio.

Użytkownicy, jak sądzę, ogólnie akceptują czarne pasy, gdy są wyświetlane na pełnym ekranie. Tak więc strategie 3 i 4 są dopuszczalne, jeśli nie idealne. Ich zaletą jest to, że zawsze wiesz, ile treści wyświetlasz: tzn. Nie ma żadnych podstępnych błędów, które występują tylko podczas uruchamiania na dużym ekranie.

Jeśli próbujesz być adaptacyjny i wykrywasz stosunek użytkowników za pomocą rozdzielczości ekranu i wyświetlasz jak najwięcej treści, musisz inaczej uwzględniać treści o wysokim i niskim priorytecie. Treści o wysokim priorytecie to rzeczy, które użytkownik absolutnie musi zobaczyć na ekranie, jeśli gra jest poza ekranem, gra się nie powiedzie. Tak więc są to elementy interfejsu użytkownika i interfejsu użytkownika, awatar gracza i wszystko, z czym wchodzą w interakcje. Treści o niskim priorytecie to takie rzeczy, które jeśli są wyświetlane na ekranie, to dobrze, ale jeśli nie są wyświetlane na ekranie, to nic wielkiego. Np .: grafika tła i rzeczy, które są dość daleko od awatara.

Zakładając, że masz interfejs użytkownika / HUD, który jest nakładany na szczyt jakiegoś „fizycznego” świata 2D, jest to dość proste. Elementy o niskim priorytecie są łatwe, po prostu upewnij się, że rzutnia 4: 3 jest wyśrodkowana na ciekawych rzeczach, a następnie narysuj jak najwięcej rzeczy o niskim priorytecie, jak możesz w lewo lub w prawo. Rzeczy o wysokim priorytecie w świecie 2D (np. Twoja postać, wrogowie, z którymi walczy twoja postać), zawsze powinny być przechowywane w okienku ekranu 4: 3. To znaczy, że Twój kod gry nie przybliża kamery, aby skorzystać z dodatkowej nieruchomości na ekranie, ponieważ wtedy kod gry będzie działał inaczej na ekranie panoramicznym niż nie. Niech kod gry zakłada, że ​​świat jest renderowany w formacie 4: 3, i niech twój kod renderujący będzie świadomy, że w rzeczywistości jest więcej niż to, co jest widoczne.

Do elementów interfejsu użytkownika / interfejsu można podejść na dwa sposoby:

1. Dynamiczne pozycjonowanie: Określ wszystkie elementy względem krawędzi ekranu (tj. Nie wszystkie względem 0,0). W zależności od współczynnika kształtu elementy będą znajdować się bliżej lub dalej od środka ekranu. Plusy: Pozwala zaczepić rzeczy na rogach i pozwolić im „po prostu działać”. Wady: Trudno sprawić, by układ działał ładnie w środku, i ryzyko nakładania się elementów
2. Konserwatywne pozycjonowanie statyczne: Rozłóż wszystkie elementy w formacie 4: 3 i po prostu przesuń je podczas pracy w trybie panoramicznym. Plusy: prosta, jednoznaczna logika / współrzędne układu. Wady: pozostawia wizualną martwą przestrzeń po lewej i prawej stronie kontrolek interfejsu użytkownika, gdzie zobaczysz świat 2D w tle, ale bez interfejsu użytkownika.

Który jest najbardziej odpowiedni dla twojej gry? Jeśli tworzysz Canabalt (tj. Grę, która zależy od prędkości poziomej), szeroki współczynnik kształtu z czarnymi paskami (# 3) na węższych aspektach byłby idealny do podkreślenia ruchu bocznego. Z drugiej strony, jeśli masz bardziej powietrzną grę, taką jak Super Smash Brothers, najlepszy byłby wyższy ekran (# 2 lub # 4). Decyzję oprę na tym, co najlepiej pasuje do gry.

Zgadzam się z innymi respondentami, że należy zachować ostrożność w odniesieniu do elementów, które mogą być widoczne na jednym ekranie, ale nie na drugim.

Castle Crashers wydaje się używać trochę # 2 i trochę # 3 - otrzymujesz czarne paski na ekranie 4: 3, a także bardzo nieznacznie mniejszy widoczny obszar - ale zawsze powinieneś mieć "bezpieczny obszar" wokół krawędzi gdzie i tak nie umieszczasz nic istotnego (dla ekranów takich jak telewizory CRT przycinające krawędzie)

Jest inna opcja. Można utworzyć ramkę dla pośredniego współczynnika i wykonywać zarówno przycinanie, jak i powiększanie (lub obramowanie) dla obu normalnych rozdzielczości.

Wydaje mi się, że filmowanie w telewizorze jest w ten sposób ujęte w ramkę, dzięki czemu panoramiczny wygląd wygląda dobrze (wszyscy nie są zatłoczeni w środku sceny), podczas gdy kadrowanie w formacie 4: 3 nie jest tak drastyczne i minimalne przesuwanie.

Oto post na blogu na temat obsługi wielu rozmiarów ekranu na urządzeniach mobilnych, a tutaj jego druga część, w jaki sposób to podejście zakodowane w Javie przy użyciu libgdx . To trochę jak odpowiedź Andrew, ale może pomóc komuś innemu.

Wpis na blogu obejmuje trzy główne podejścia:

1. Żyj z czarnymi paskami na górze lub po bokach.
2. Użyj wirtualnej rzutni.
3. Używaj elementów pływających, podobnie jak w układzie Flexbox strony internetowej.

Nr 1 jest dość oczywisty.

Aby zilustrować nie. 2, załóżmy, że chcesz obsługiwać trzy różne urządzenia z trzema różnymi współczynnikami proporcji. Otwórz obraz w edytorze obrazów. Dla pierwszego urządzenia narysuj największy prostokąt o proporcjach tego urządzenia, które zmieszczą się w twoim obrazie. Zrób to samo dla drugiego urządzenia i trzeciego urządzenia. Obszar użytkowy lub wirtualna rzutnia to skrzyżowanie wszystkich trzech prostokątów. Nie można zagwarantować, że cokolwiek poza tą rzutnią będzie widoczne.

Nr 3 polega na umieszczaniu obiektów na ekranie podobnie do umieszczania elementów na stronie internetowej za pomocą Flexboksa lub elementów pływających. Na przykład umieścisz przycisk pauzy w odległości 5 pikseli od góry i 5 pikseli od prawej. Bez względu na proporcje urządzenia, przycisk pauzy zawsze będzie w prawym górnym rogu.