Roblox jest z natury międzyplatformowy, ponieważ gracze mogą odkrywać i dołączać do gier na swoim telefonie lub tablecie, a następnie kontynuować tam, gdzie przerwali na swoim komputerze lub konsoli. Aby wspierać rozwijającą się gamę platform, powinieneś budować interfejsy użytkownika, które płynnie dostosowują się do typu wejścia (dotyk, kontroler, mysz/klawiatura), rozmiaru ekranu oraz orientacji urządzenia. Ten przewodnik, przewodnik po projektowaniu adaptacyjnym oraz powiązane zasoby mogą pomóc Ci zaprojektować prawdziwą grę międzyplatformową, która jest kompatybilna, dostępna i przyjemna na wszystkich platformach.
Aby zbadać gotową grę, która demonstruje poniższe koncepcje projektowania międzyplatformowego, sprawdź Interactivity Showcase.
Wejście
Starannie zaprojektowana gra powinna wspierać wszystkie podstawowe typy wejścia, w tym mysz i klawiaturę, dotyk oraz kontrolery.
Działania międzyplatformowe
Wspieraj wszystkie podstawowe typy wejścia (mysz/klawiatura, dotyk i kontrolery) przy użyciu Systemu Akcji Wejścia.
Aby uprościć wejścia międzyplatformowe, Roblox oferuje System Akcji Wejścia do definiowania akcje takich jak "skok", "sprint" lub "strzał" oraz do ustawiania powiązań dla wielu sprzętowych wejść, aby zrealizować te działania. Nie musisz myśleć o wszystkich technicznych aspektach wejść sprzętowych i kiedy nasłuchiwać konkretnych wyzwalaczy wejcia; po prostu definiujesz, które wejścia wykonują które akcje.
Wykrywanie typu wejścia
Upewnij się, że elementy UI reagują i dostosowują się do podstawowego typu wejścia gracza, jak opisano w wykrywaniu typu wejścia. Rozważ również podpowiedzi pomocnicze, aby pomóc graczom zrozumieć konkretne zmiany w wejściu.
W rozwoju międzyplatformowym ważne jest, aby określić i odpowiedzieć na podstawowy typ wejścia, którego używa gracz, zazwyczaj w celu zapewnienia, że elementy UI takie jak przyciski na ekranie i menu działają elegancko oraz wspierają interakcje między urządzeniami.
Na przykład, urządzenie z obsługą dotyku domyślnie zakłada, że dotyk jest domyślnym wejściem, a przyciski dotykowe mogą pojawić się dla działań, ale gracz może zdecydować się na podłączenie kontrolera bluetooth. W tym przypadku dotyk pozostaje ważnym wejściem, ale możesz założyć, że gracz chce przełączyć się na podłączony kontroler jako podstawowy typ wejścia i ewentualnie użyć dotyku jako zapasowego wejścia dla UI na ekranie.
Podpowiedzi pomocnicze
Na podstawie podstawowego typu wejścia zaleca się, abyś uwzględnił podpowiedzi pomocnicze UI zawsze, gdy to możliwe. Na przykład, przy wyborze narzędzi do wyposażenia, wyświetlaj podpowiedzi określone dla wejścia, takie jak 1–5, gdy gracz używa klawiatury, lub podpowiedzi przycisków kontrolera, gdy gracz używa kontrolera.
Metody GetImageForKeyCode() oraz GetStringForKeyCode() są przydatne do zebrania obrazu lub ciągu specyficznego dla platformy do użycia w podpowiedzi UI, takie jak poniższe przykłady:
| Kod Klawisza | Obraz Xbox | Obraz PlayStation | Ciąg |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/d | n/d | 1 |
| Enum.KeyCode.Five | n/d | n/d | 5 |
Interfejs użytkownika
Dobrze zaprojektowany interfejs użytkownika jest niezbędny, aby gracze na wszystkich platformach mogli wchodzić w interakcję z twoją grą.
Położenie i rozmiar
Upewnij się, że wszystkie elementy UI są widoczne na wszystkich rozmiarach ekranów i w różnych orientacjach.
Upewnij się, że wszystkie przyciski/sterowania są interaktywne i że nie są zablokowane ani zasłonięte przez wycięcia urządzenia lub elementy UI Roblox.
Wszystkie elementy UI powinny być umiejscowione i rozmiarowane odpowiednio, aby zapewnić widoczność i interaktywność na wielu rozmiarach ekranów. Ustalanie położenia elementów UI przy użyciu Scale jest powszechnym podejściem, ponieważ opiera się na procencie wymiarów X i Y ekranu, a nie na wartości w pikselach (piksele mogą się różnić zarówno liczbą, jak i gęstością w różnych urządzeniach). Możesz także wykorzystać AnchorPoint elementu, aby ustawić jego punkt odniesienia. Na przykład, kontener UI trzymający liczniki klejnotów/monet na poniższym obrazku znajduje się na X o skali 1 (prawo) i Y o skali 0 (góra) z górnym prawym punktem kotwiczenia.
Scale jest również zalecane do rozmiarowania elementów UI, na przykład, aby kontener UI miał szerokość 75% na każdym ekranie. Jednak 75% mogłoby wyświetlić się jako ogromny rozmiar na telewizorach 4K dla graczy na konsoli, dlatego zaleca się, abyś zbadał adaptację do rozmiaru ekranu jako sposób dostosowania układów UI w różnych widokach.
Adaptacja do rozmiaru ekranu
Dostosuj interfejs użytkownika do różnych rozmiarów wyświetlaczy poprzez sprawdzanie i nasłuchiwanie zmian w rozmiarze wyświetlacza widoku.
Z multitude różnych rozmiarów ekranów dostępnych na platformie Roblox, próby przewidzenia rozmiaru ekranu w pikselach często prowadzą do błędnych interpretacji. Aby pomóc określić rozmiar ekranu gracza, aby dostosować rozmiar/położenie elementów UI, Roblox dostarcza właściwość tylko do odczytu ViewportDisplaySize, która reprezentuje wewnętrznie sklasyfikowany rozmiar renderowania widoku.
| ViewportDisplaySize | Podsumowanie |
|---|---|
| Small | Większość tabletów/mobilnych/urządzeń przenośnych |
| Medium | Większość laptopów i monitorów |
| Large | Większość telewizorów lub większych |
Dla większej natywnej personalizacji możesz użyć Edytora Stylów UI, aby skonfigurować kwerendy stylu zarówno dla wartości ViewportDisplaySize, jak i PreferredInput. Użycie selektorów wewnętrznych, takich jak @ViewportDisplaySizeSmall lub @PreferredInputTouch, pozwala Twojemu interfejsowi użytkownika automatycznie zamieniać tokeny dla rozmiarów tekstu, wymiarów kontenerów i innych miar, gdy środowisko urządzenia gracza lub główny sposób wejścia się zmienia.
Kontenery układu
Używaj układów do organizacji pojedynczych komponentów UI i upewnij się, że kontenery dostosowują się responsywnie do dzieci elementów w nich zawartych.
Aby ułatwić organizację UI, powinieneś używać komponentów układu do organizowania dzieci. Przy użyciu kontenerów układu upewnij się, że dzieci są czytelne, dostępne i niezagracone. Powszechnym komponentem układu jest UIListLayout, który umieszcza rodzeństwo GuiObjects w wierszach lub kolumnach i dostosowuje się odpowiednio za każdym razem, gdy dodasz lub usuniesz obiekt rodzeństwa.
Powinieneś także rozważyć dystrybucję i względne położenie elementów w kontenerach układu, aby zapewnić najlepsze wrażenia dla użytkownika. Integracja flex do układu listy to potężny sposób na równe wypełnienie/dystrybucję lub wyrównanie/rozciąganie przedmiotów wzdłuż ich linii, lub flex dla specyficznych przedmiotów w zm gültig przestrzeni.
Dostępność
Upewnij się, że wszystkie teksty są czytelne na wszystkich ekranach. Upewnij się również, że cały UI ma wystarczający kontrast i że nic nie zależy wyłącznie od koloru do rozróżnienia akcji lub wyniku.
Nawet przy właściwie rozmiarowanych elementach UI na wszystkich rozmiarach ekranów urządzeń, całkowita gra powinna spełniać standardy dostępności dla graczy z osłabionym wzrokiem lub daltonizmem. Rozmiar tekstu może mieć duże znaczenie dla czytelności tekstowej UI, więc powinieneś uwzględnić ograniczenie rozmiaru tekstu, aby upewnić się, że tekst nie staje się nieczytelny (za mały) ani wizualnie zbyt duży na większych ekranach, takich jak telewizory 4K.
Aby uzyskać więcej wskazówek dotyczących dostępności, zobacz tutaj.
Ostateczne wskazówki i triki
Pracując nad w pełni międzyplatformową grą, weź pod uwagę następujące wskazówki i triki:
- Emulacja urządzenia jest niezbędna do zaprojektowania optymalnej gry na Robloxie. Wykorzystaj wbudowany Emulator Urządzenia oraz Emulator Kontrolera, aby emulować różne urządzenia i kontrolery bezpośrednio w Studio.
- Pipeline stylizacji UI w Robloxie, podobnie jak CSS, umożliwia deklarację i globalne zastosowanie nadpisów dla właściwości instancji UI. Wraz z zintegrowanym Edytorem Stylów, możesz ustawić kompletny i łatwy do modyfikacji interfejs użytkownika.
- Gdy Twoja gra jest skutecznie międzyplatformowa, zbadaj natywne funkcje, takie jak haptyczne sprzężenie zwrotne na urządzenia mobilne i kontrolery, gesty dotykowe takie jak TouchSwipe i TouchPinch, czy funkcjonalność akcelerometru i żyroskopu na urządzeniach AccelerometerEnabled i GyroscopeEnabled.