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ący się zestaw platform, powinieneś budować interfejsy użytkownika, które płynnie dostosowują się do typu wejścia (dotyk, kontroler, mysz/klawiatura), rozmiaru ekranu i orientacji urządzenia. Ten przewodnik, przewodnik po projektowaniu adaptacyjnym oraz powiązane zasoby mogą pomóc Ci zaprojektować prawdziwie międzyplatformową grę, która jest kompatybilna, dostępna i przyjemna na wszystkich platformach.
Aby zbadać gotową grę, która prezentuje następujące koncepcje projektowania międzyplatformowego, sprawdź Interaktywną Wystawę.
Wejście
Starannie zaprojektowana gra powinna wspierać wszystkie podstawowe typy wejścia, w tym mysz i klawiaturę, dotyk oraz kontrolery.
Akcje międzyplatformowe
Wspieraj wszystkie podstawowe typy wejścia (mysz/klawiatura, dotyk i kontrolery) za pomocą Systemu Akcji Wejścia.
Aby uprościć wejścia międzyplatformowe, Roblox oferuje System Akcji Wejścia, aby zdefiniować akcje takie jak "skok", "bieg" czy "strzał" i ustawić powiązania dla wielu wejść sprzętowych, które napędzają te akcje. Nie musisz myśleć o wszystkich technicznych aspektach wejść sprzętowych i kiedy nasłuchiwać na konkretne wyzwalacze wejścia; 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ż także podpowiedzi asystujące, aby pomóc graczom zrozumieć konkretne zmiany wejścia.
W rozwoju międzyplatformowym ważne jest, aby określić i reagować na podstawowy typ wejścia, którego używa gracz, zazwyczaj aby zapewnić, że elementy UI takie jak przyciski na ekranie i menu działają elegancko i wspierają interakcję na różnych urządzeniach.
Na przykład, urządzenie obsługujące dotyk zakłada, że dotyk jest domyślnym wejściem i że przyciski dotykowe mogą pojawić się dla akcji, ale gracz może zdecydować się na podłączenie kontrolera bluetooth. W takim 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.
Jeśli korzystasz z Systemu Akcji Wejścia, właściwość PreferredBinding uzupełnia wykrywanie podstawowego wejścia: tak jak PreferredInput raportuje aktualny podstawowy typ wejścia gracza, PreferredBinding raportuje konkretne InputBinding, które odpowiada aktualnemu urządzeniu gracza. Obie aktualizują się automatycznie, gdy gracz przełącza urządzenia, więc możesz napędzać UI świadome urządzenia bez pisania logiki przełączania urządzeń samodzielnie.
Podpowiedzi asystujące
Na podstawie podstawowego typu wejścia zaleca się, abyś uwzględnił podpowiedzi asystujące UI zawsze, gdy to możliwe. Na przykład, podczas wybierania narzędzi do wyposażenia, wyświetlaj podpowiedzi specyficzne dla wejścia, takie jak 1–5, gdy gracz używa klawiatury, lub podpowiedzi dotyczące przycisków kontrolera, gdy gracz używa kontrolera.
Aby uzyskać podpowiedzi asystujące bez kodu, które automatycznie aktualizują się, gdy gracz przełącza urządzenia, użyj InputActionLabel i wskaż na dowolny InputAction, aby wyświetlić poprawne wejście dla każdej platformy. Zobacz wyświetlanie powiązań po pełne szczegóły.
Dla bardziej szczegółowej kontroli, lub jeśli musisz dostosować wyświetlanie podpowiedzi poza tym, co oferuje InputActionLabel, możesz użyć metod UserInputService poniżej, aby ręcznie zbierać obrazy i ciągi specyficzne dla platformy:
Metody GetImageForKeyCode() i GetStringForKeyCode() są pomocne w zbieraniu obrazu lub ciągu specyficznego dla platformy, który można użyć 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 interakcje z Twoją grą.
Pozycja i rozmiar
Upewnij się, że wszystkie elementy UI są widoczne na wszystkich rozmiarach ekranów i orientacjach.
Upewnij się, że wszystkie przyciski/kontrolery 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 wielkości odpowiednio, aby zapewnić widoczność i interaktywność na różnych rozmiarach ekranów. Ustalanie pozycji elementów UI za pomocą Scale jest powszechnym podejściem, ponieważ opiera się na procencie granic X i Y ekranu, a nie na wartości pikselowej (piksele mogą się różnić w liczbie i gęstości na różnych urządzeniach). Możesz również wykorzystać AnchorPoint elementu, aby ustawić jego punkt odniesienia. Na przykład, kontener UI trzymający liczniki klejnotów/monet na poniższym obrazie jest umiejscowiony na skali X 1 (prawo) i skali Y 0 (góra) z punktem kotwicznym w prawym górnym rogu.
Scale jest również zalecane do rozmiarowania elementów UI, takich jak sprawienie, aby kontener UI zajmował 75% szerokości na każdym ekranie. Jednak 75% mogłoby renderować się jako ogromny rozmiar na telewizorach 4K dla graczy konsolowych, więc zaleca się, abyś zbadał adaptację rozmiaru ekranu jako sposób na dostosowanie układów UI na różnych widokach.
Adaptacja rozmiaru ekranu
Dostosuj UI do różnych rozmiarów wyświetlaczy, sprawdzając i nasłuchując zmian w rozmiarze wyświetlacza widoku.
Z wieloma możliwymi rozmiarami ekranów dostępnymi na platformie Roblox, próba przewidzenia rozmiaru ekranu w pikselach często prowadzi do błędnej interpretacji. Aby pomóc w określeniu rozmiaru ekranu gracza w celu dostosowania rozmiaru/pozycji elementów UI, Roblox oferuje właściwość tylko do odczytu ViewportDisplaySize, która reprezentuje wewnętrznie skategoryzowany rozmiar renderowania widoku.
| ViewportDisplaySize | Podsumowanie |
|---|---|
| Small | Większość urządzeń tabletowych/mobilnych/ręcznych |
| Medium | Większość laptopów i monitorów |
| Large | Większość telewizorów lub większych |
Dla bardziej natywnej personalizacji możesz użyć edytora UI Style Editor, aby skonfigurować Zapytania Stylu dla wartości zarówno ViewportDisplaySize, jak i PreferredInput. Używanie selektorów wewnętrznych, takich jak @ViewportDisplaySizeSmall lub @PreferredInputTouch, pozwala Twojemu UI automatycznie wymieniać tokeny dla rozmiarów tekstu, wymiarów kontenerów i innych pomiarów, gdy zmienia się środowisko urządzenia gracza lub podstawowa metoda wejścia.
Kontenery układu
Używaj układów do organizowania poszczególnych komponentów UI i upewnij się, że kontenery dostosowują się responsywnie do elementów dzieci w ich wnętrzu.
Aby ułatwić organizację UI, powinieneś używać komponentów układu do organizowania dzieci. Podczas korzystania z kontenerów układu, upewnij się, że dzieci są czytelne, dostępne i nieprzeładowane. Powszechnym komponentem układu jest UIListLayout, który umieszcza rodzeństwo GuiObjects w wierszach lub kolumnach i dostosowuje się odpowiednio, gdy dodajesz lub usuwasz obiekt rodzeństwa.
Powinieneś również rozważyć rozkład i względne pozycjonowanie elementów w kontenerach układu dla najlepszego doświadczenia użytkownika. Integracja flex w układ listy to potężny sposób na równe wypełnienie/rozdysponowanie lub wyrównanie/rozciąganie elementów wzdłuż ich linii, lub elastyczne konkretne elementy w zmiennej przestrzeni.
Dostępność
Upewnij się, że cały tekst jest czytelny na wszystkich ekranach. Upewnij się również, że wszystkie UI mają wystarczający kontrast i że nic nie polega wyłącznie na kolorze, aby odróżnić akcję lub wynik.
Nawet przy odpowiednio wymiarowanych elementach UI na wszystkich rozmiarach ekranów urządzeń, cała gra powinna spełniać standardy dostępności dla graczy z upośledzeniem wzroku lub daltonizmem. Rozmiar tekstu może mieć duży wpływ na czytelność tekstu w UI, więc powinieneś uwzględnić ograniczenie rozmiaru tekstu, aby upewnić się, że tekst nie staje się nieczytelny (zbyt mały) lub wizualnie zbyt duży na większych ekranach, takich jak telewizory 4K.
Aby uzyskać więcej wskazówek dotyczących dostępności, zobacz wytyczne dotyczące dostępności.
Ostateczne wskazówki i triki
Pracując nad pełną grą międzyplatformową, rozważ następujące wskazówki i triki:
- Emulacja urządzeń jest niezbędna do zaprojektowania optymalnej gry na Roblox. Wykorzystaj wbudowaną Emulator Urządzeń i Emulator Kontrolera, aby emulować różne urządzenia i kontrolery bezpośrednio w Studio.
- Pipeline stylizacji UI Roblox, podobnie jak CSS, pozwala na deklarowanie i globalne stosowanie nadpisania właściwości instancji UI. Wraz z zintegrowanym Edytorem Stylów możesz skonfigurować kompletny i łatwy do modyfikacji interfejs użytkownika.
- Gdy Twoja gra jest skutecznie międzyplatformowa, zbadaj natywne funkcje, takie jak sprzężenie zwrotne haptyczne na urządzeniach mobilnych i kontrolerach, gesty dotykowe takie jak TouchSwipe i TouchPinch, lub funkcjonalność akcelerometru i żyroskopu na urządzeniach AccelerometerEnabled i GyroscopeEnabled.