Roblox ist von Natur aus plattfomübergreifend, da Spieler Spiele auf ihrem Telefon oder Tablet entdecken und beitreten können, um später dort fortzufahren, wo sie auf ihrem PC oder ihrer Konsole aufgehört haben. Um eine wachsende Palette von Plattformen zu unterstützen, sollten Sie Benutzeroberflächen erstellen, die sich nahtlos an den Eingabetyp (Touch, Gamepad, Maus/Tastatur), die Bildschirmgröße und die Geräteausrichtung anpassen. Dieser Leitfaden, der adaptive Design Leitfaden und die verlinkten Ressourcen können Ihnen helfen, ein echtes plattformübergreifendes Spiel zu entwerfen, das kompatibel, zugänglich und auf allen Plattformen angenehm 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, Touch und Gamepads.
Plattformübergreifende Aktionen
Unterstützen Sie alle primären Eingabetypen (Maus/Tastatur, Touch und Gamepads) mit dem Input Action System.
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 Hardwareeingaben einzurichten, um diese Aktionen auszuführen. Sie müssen sich nicht um alle technischen Aspekte der Hardwareeingaben kümmern und wann Sie auf bestimmte Eingabetrigger hören; Sie definieren einfach, welche Eingaben welche Aktionen ausführen.
Eingabetypenerkennung
Stellen Sie sicher, dass UI-Elemente auf den primären Eingabetyp des Spielers reagieren und sich anpassen, wie im Abschnitt Eingabetypenerkennung beschrieben. Berücksichtigen Sie auch assistive Hinweise, um den Spielern zu helfen, spezifische Eingabeveränderungen zu verstehen.
Bei der plattformübergreifenden Entwicklung ist es wichtig, dass Sie den primären Eingabetyp, den ein Spieler verwendet, bestimmen und darauf reagieren, normalerweise um sicherzustellen, dass UI-Elemente wie Bildschirmtasten und Menüs elegant funktionieren und die Interaktion über Geräte hinweg unterstützen.
Zum Beispiel geht ein touchfähiges Gerät davon aus, dass Touch die Standard-Eingabe ist und dass Touch-Tasten für Aktionen erscheinen können, aber ein Spieler kann sich entscheiden, ein Bluetooth-Gamepad anzuschließen. In diesem Fall bleibt Touch eine gültige Eingabe, aber Sie können davon ausgehen, dass der Spieler das angeschlossene Gamepad als primären Eingabetyp verwenden möchte und möglicherweise Touch als Backup-Eingabe für die Bildschirm-UI verwendet.
Wenn Sie das Input Action System verwenden, ergänzt die PreferredBinding-Eigenschaft die primäre Eingabenerkennung: genau wie PreferredInput den aktuellen primären Eingabetyp des Spielers meldet, meldet PreferredBinding das spezifische InputBinding, das mit dem aktuellen Gerät des Spielers übereinstimmt. Beide aktualisieren sich automatisch, wenn der Spieler die Geräte wechselt, sodass Sie gerätebewusste UI steuern können, ohne selbst Logik für den Gerätewechsel zu schreiben.
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 zum Ausrüsten 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.
Für assistive Hinweise ohne Code, die sich automatisch aktualisieren, wenn der Spieler die Geräte wechselt, verwenden Sie InputActionLabel und verweisen Sie auf jede InputAction, um die korrekte Eingabe pro Plattform anzuzeigen. Siehe Bindings anzeigen für vollständige Details.
Für eine granularere Kontrolle oder wenn Sie die Anzeige von Hinweisen über das hinaus anpassen müssen, was InputActionLabel bietet, können Sie die Methoden von UserInputService unten verwenden, um plattformspezifische Bilder und Strings manuell zu sammeln:
Die Methoden GetImageForKeyCode() und GetStringForKeyCode() sind hilfreich, um ein plattformspezifisches Bild oder einen String zu sammeln, der in einem UI-Hinweis verwendet werden kann, wie in den folgenden Beispielen:
| Key Code | 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 -ausrichtungen sichtbar sind.
Stellen Sie sicher, dass alle Tasten/Steuerelemente interaktiv sind und dass sie nicht von Geräteausschnitten oder Roblox-UI-Elementen blockiert oder verdeckt werden.
Alle UI-Elemente sollten positioniert und größentechnisch angemessen gestaltet sein, um Sichtbarkeit und Interaktivität über mehrere Bildschirmgrößen hinweg zu gewährleisten. Die Positionierung von UI-Elementen nach Scale ist ein gängiger Ansatz, da sie auf einem Prozentsatz der X- und Y-Grenzen des Bildschirms basiert, nicht auf einem Pixelwert (Pixel können je nach Anzahl und Dichte auf verschiedenen Geräten 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 im folgenden Bild hält, auf einem X-Skalierungswert von 1 (rechts) und einem Y-Skalierungswert 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 Bildschirmbreite 75 % groß zu machen. Allerdings würde 75 % auf 4K TVs für Konsolenspieler eine riesige Größe ergeben, daher wird empfohlen, dass Sie Bildschirmgrößenanpassung als Möglichkeit zur Anpassung von UI-Layouts über verschiedene Ansichten hinweg erkunden.
Bildschirmgrößenanpassung
Passen Sie die UI an verschiedene Displaygrößen an, indem Sie Änderungen an der Anzeigegröße des Viewports überprüfen und darauf hören.
Mit einer Vielzahl möglicher Bildschirmgrößen, die der Roblox-Plattform zugänglich sind, führt der Versuch, die Bildschirmgröße in Pixeln vorherzusagen, oft zu Fehlinterpretationen. Um zu helfen, die Bildschirmgröße eines Spielers zu bestimmen, um die Größe/Position von UI-Elementen anzupassen, bietet Roblox die schreibgeschützte ViewportDisplaySize-Eigenschaft, die die intern kategorisierte Rendering-Größe des Viewports darstellt.
| ViewportDisplaySize | Zusammenfassung |
|---|---|
| Small | Die meisten Tablet-/Mobil-/Handheld-Geräte |
| Medium | Die meisten Laptops und Monitore |
| Large | Die meisten Fernseher oder größere |
Für eine 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. Durch die Verwendung von intrinsischen Selektoren wie @ViewportDisplaySizeSmall oder @PreferredInputTouch kann Ihre UI automatisch Tokens für Textgrößen, Containerabmessungen und andere Maße austauschen, während sich die Geräteumgebung oder die primäre Eingabemethode des Spielers ändert.
Layout-Container
Verwenden Sie Layouts, um einzelne UI-Komponenten zu organisieren und sicherzustellen, dass Container sich responsiv an die darin enthaltenen Kind-Elemente anpassen.
Für eine einfachere Organisation der UI sollten Sie Layout-Komponenten verwenden, um Kinder zu organisieren. Wenn Sie Layout- Container verwenden, stellen Sie sicher, dass die Kinder lesbar, zugänglich und nicht überladen sind. Eine gängige Layout-Komponente ist UIListLayout, die Geschwister-GuiObjects in Reihen oder Spalten anordnet und sich entsprechend anpasst, wann immer Sie ein Geschwisterobjekt hinzufügen oder entfernen.
Sie sollten auch die Verteilung und die relative Positionierung von Elementen innerhalb von Layout-Containern für die beste Benutzererfahrung berücksichtigen. Die Integration von Flex in ein Listenlayout ist eine leistungsstarke Möglichkeit, um gleichmäßig zu füllen/verteilen oder Elemente auszurichten/zu dehnen oder spezifische Elemente flexibel zu gestalten über einen variablen Raum.
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 die Zugänglichkeitsstandards für Spieler mit eingeschränktem Sehvermögen oder Farbenblindheit erfüllen. Die Textgröße kann erheblich zur Lesbarkeit von textbasierten UIs 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 die Richtlinien zur Barrierefreiheit.
Abschließende Tipps & 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 das Design eines optimalen Spiels auf Roblox. Nutzen Sie den integrierten Geräteemulator und den Controller-Emulator, um verschiedene Geräte und Gamepads direkt im Studio zu emulieren.
- Robloxs UI-Styling-Pipeline, ähnlich wie CSS, ermöglicht es Ihnen, Überschreibungen 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 mobilen Geräten und Gamepads, Touch-Gesten wie TouchSwipe und TouchPinch oder die Funktionalität von Beschleunigungsmesser und Gyroskop auf AccelerometerEnabled und GyroscopeEnabled-Geräten.