Roblox ist von Natur aus plattformübergreifend, da Spieler Spiele auf ihrem Telefon oder Tablet entdecken und beitreten können und später dort weitermachen, wo sie auf ihrem PC oder ihrer Konsole aufgehört haben. Um eine wachsende Suite von Plattformen zu unterstützen, sollten Sie Benutzeroberflächen erstellen, die sich nahtlos an die Eingabetypen (Berührung, Gamepad, Maus/Tastatur), Bildschirmgrößen und Geräteorientierungen anpassen. Diese Anleitung, die adaptive Design Anleitung und die verlinkten Ressourcen können Ihnen helfen, ein echtes plattformübergreifendes Spiel zu entwerfen, das kompatibel, zugänglich und angenehm auf allen Plattformen ist.
Um ein vorgefertigtes Spiel zu erkunden, das die folgenden plattformübergreifenden Designkonzepte zeigt, schauen Sie sich die Interaktivitätsausstellung an.
Eingabe
Ein sorgfältig gestaltetes Spiel sollte alle primären Eingabetypen unterstützen, einschließlich Maus und Tastatur, Berührung und Gamepads.
Plattformübergreifende Aktionen
Unterstützen Sie alle primären Eingabetypen (Maus/Tastatur, Berührung und Gamepads) mithilfe des Input Action Systems.
Um plattformübergreifende Eingaben zu vereinfachen, bietet Roblox das Input Action System an, um Aktionen wie "springen", "rennen" oder "schießen" zu definieren und Bindings für mehrere Hardware-Eingaben einzurichten, die diese Aktionen auslösen. Sie müssen sich nicht um alle technischen Aspekte der Hardware-Eingaben kümmern und wann Sie auf bestimmte Eingabetrigger hören; Sie definieren einfach, welche Eingaben welche Aktionen ausführen.
Eingabetyp-Erkennung
Stellen Sie sicher, dass UI-Elemente auf den primären Eingabetyp des Spielers reagieren und sich anpassen, wie in der Eingabetyp-Erkennung beschrieben. Berücksichtigen Sie auch assistive Hinweise, um den Spielern zu helfen, spezifische Eingabeänderungen zu verstehen.
Bei der plattformübergreifenden Entwicklung ist es wichtig, dass Sie den primären Eingabetyp ermitteln und darauf reagieren, den ein Spieler verwendet, normalerweise um sicherzustellen, dass UI-Elemente wie Bildschirmtasten und Menüs elegant funktionieren und Interaktionen über Geräte hinweg unterstützen.
Zum Beispiel geht ein berührungsgestütztes Gerät davon aus, dass Berührung die Standard-Eingabe ist und dass Berührungstasten für Aktionen angezeigt werden können, aber ein Spieler kann sich entscheiden, ein Bluetooth-Gamepad anzuschließen. In diesem Fall bleibt Berührung eine gültige Eingabe, aber Sie können davon ausgehen, dass der Spieler auf das verbundene Gamepad als primären Eingabetyp umschalten möchte und möglicherweise Berührung als Backup-Eingabe für die Bildschirm-UIs verwendet.
Assistive Hinweise
Basierend auf dem primären Eingabetyp wird empfohlen, dass Sie assistive UI-Hinweise wann immer möglich einfügen. Zum Beispiel, wenn Werkzeuge ausgewählt werden, zeigen Sie eingabespezifische Hinweise wie 1–5 an, wenn der Spieler eine Tastatur verwendet, oder Gamepad-Trigger-Hinweise, wenn der Spieler ein Gamepad verwendet.
Die Methoden GetImageForKeyCode() und GetStringForKeyCode() sind hilfreich, um ein plattform spezifisches Bild oder einen String zu sammeln, der in einem UI-Hinweis verwendet werden kann, wie in den folgenden Beispielen:
| Taste | Xbox-Bild | PlayStation-Bild | String |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Benutzeroberfläche
Eine gut gestaltete Benutzeroberfläche ist entscheidend, damit Spieler auf allen Plattformen mit Ihrem Spiel interagieren können.
Position und Größe
Stellen Sie sicher, dass alle UI-Elemente auf allen Bildschirmgrößen und -orientierungen sichtbar sind.
Stellen Sie sicher, dass alle Schaltflächen/Steuerelemente interaktiv sind und dass sie nicht durch Geräteausschnitte oder Roblox-UI-Elemente blockiert oder verdeckt werden.
Alle UI-Elemente sollten positioniert und großzügig gestaltet werden, um Sichtbarkeit und Interaktivität über mehrere Bildschirmgrößen hinweg zu gewährleisten. Die Positionierung von UI-Elementen anhand von Scale ist ein gängiger Ansatz, da es auf einem Prozentsatz der X- und Y-Grenzen des Bildschirms basiert, nicht auf einem Pixelwert (Pixel können zwischen Anzahl und Dichte über Geräte hinweg willkürlich variieren). Sie können auch den AnchorPoint des Elements nutzen, um seinen Positionsursprung festzulegen. Zum Beispiel ist der UI-Container, der die Edelstein-/Münzzähler auf dem folgenden Bild hält, an einer X-Skala von 1 (rechts) und einer Y-Skala von 0 (oben) mit einem oberen rechten Ankerpunkt positioniert.
Scale wird auch für die Größe von UI-Elementen empfohlen, z. B. um einen UI-Container auf jeder Anzeige eine Breite von 75 % zu geben. Allerdings würde 75 % auf 4K TVs für Konsolenspieler zu einer riesigen Größe führen, daher wird empfohlen, dass Sie die Anpassung der Bildschirmgröße als Möglichkeit erkunden, um UI-Layouts über verschiedene Ansichten hinweg anzupassen.
Anpassung der Bildschirmgröße
Passen Sie die UI an verschiedene Anzeigengrößen an, indem Sie Änderungen der Sichtfeld-Anzeigengröße überprüfen und darauf hören.
Angesichts der Vielzahl möglicher Bildschirmgrößen, die der Roblox-Plattform zugänglich sind, führt der Versuch, die Bildschirmgröße nach Pixeln vorherzusagen, oft zu Fehlinterpretationen. Um den Bildschirm eines Spielers zu bestimmen, um die Größe/Position von UI-Elementen anzupassen, bietet Roblox die schreibgeschützte Eigenschaft ViewportDisplaySize, die die intern kategorisierte Rendering-Größe des Sichtfelds darstellt.
| ViewportDisplaySize | Zusammenfassung |
|---|---|
| Small | Die meisten Tablets/Mobile/tragbaren Geräte |
| Medium | Die meisten Laptops und Monitore |
| Large | Die meisten Fernseher oder größere |
Für mehr native Anpassung können Sie den UI Style Editor verwenden, um Style Queries sowohl für ViewportDisplaySize als auch für PreferredInput Werte zu konfigurieren. Die Verwendung von intrinsischen Selektoren wie @ViewportDisplaySizeSmall oder @PreferredInputTouch ermöglicht es Ihrer UI, Tokens für Textgrößen, Containerabmessungen und andere Maßstäbe automatisch auszutauschen, während sich die Geräteeinstellungen des Spielers oder die primäre Eingabemethode ändern.
Layout-Container
Verwenden Sie Layouts, um einzelne UI-Komponenten zu organisieren, und stellen Sie sicher, dass Container sich reaktionsschnell an die Kindelemente innerhalb von ihnen anpassen.
Um die Organisation der UI zu erleichtern, sollten Sie Layoutkomponenten verwenden, um Kinder zu organisieren. Achten Sie beim Verwenden von Layout Containern darauf, dass die Kinder lesbar, zugänglich und nicht überladen sind. Eine gängige Layoutkomponente ist UIListLayout, die Geschwister-GuiObjects in Reihen oder Spalten positioniert und sich entsprechend anpasst, wenn Sie ein Geschwisterobjekt hinzufügen oder entfernen.
Sie sollten auch die Verteilung und relative Positionierung von Elementen innerhalb von Layoutcontainern für die beste Benutzererfahrung in Betracht ziehen. Die Integration von Flex in ein Listenlayout ist eine leistungsstarke Methode, um gleichmäßig zu füllen/verteilen oder auszurichten/strecken von Elementen über ihre Zeile oder spezifische Elemente über einen variablen Raum hinweg.
Barrierefreiheit
Stellen Sie sicher, dass alle Texte auf allen Bildschirmen lesbar sind. Stellen Sie auch sicher, dass alle UIs ausreichenden Kontrast haben und dass nichts ausschließlich auf Farbe angewiesen ist, um eine Aktion oder ein Ergebnis zu unterscheiden.
Selbst wenn UI-Elemente ordentlich dimensioniert sind, sollte das gesamte Spiel Barrierefreiheitsstandards für Spieler mit Sehbehinderungen oder Farbenblindheit entsprechen. Die Textgröße kann erheblich zur Lesbarkeit von textbasierten UI beitragen, daher sollten Sie eine Textgrößenbeschränkung einfügen, um sicherzustellen, dass der Text nicht unleserlich (zu klein) oder visuell zu groß auf größeren Bildschirmen wie 4K TVs wird.
Für weitere Tipps zur Barrierefreiheit siehe hier.
Abschließende Tipps und Tricks
Während Sie auf ein vollständiges plattformübergreifendes Spiel hinarbeiten, sollten Sie die folgenden Tipps und Tricks in Betracht ziehen:
- Die Emulation von Geräten ist entscheidend für die Gestaltung eines optimalen Spiels in Roblox. Nutzen Sie den integrierten Geräteemulator und Controller-Emulator, um verschiedene Geräte und Gamepads direkt im Studio zu emulieren.
- Robloxs UI-Stilpipeline, ähnlich wie CSS, ermöglicht es Ihnen, Overrides für UI-Instanz-Eigenschaften zu deklarieren und global anzuwenden. Zusammen mit dem integrierten Style Editor können Sie eine vollständige und einfach zu modifizierende Benutzeroberfläche einrichten.
- Sobald Ihr Spiel effektiv plattformübergreifend ist, erkunden Sie native Funktionen wie haptisches Feedback auf Mobilgeräten und Gamepads, Berührungsgesten wie TouchSwipe und TouchPinch, oder die Funktionalität von Beschleunigungssensoren und Gyroskopen auf AccelerometerEnabled und GyroscopeEnabled Geräten.