Roblox is van nature cross‑platform, aangezien spelers games kunnen ontdekken en deelnemen op hun telefoon of tablet, en later kunnen doorgaan waar ze waren gebleven op hun pc of console. Om een groeiende reeks platforms te ondersteunen, moet je gebruikersinterfaces bouwen die naadloos aanpassen aan het type invoer (aanraking, gamepad, muis/toetsenbord), schermgrootte en apparaatoriëntatie. Deze gids, de adaptive design gids, en de gelinkte bronnen kunnen je helpen een echt cross‑platform spel te ontwerpen dat compatibel, toegankelijk en plezierig is op alle platforms.
Om een vooraf gemaakt spel te verkennen dat de volgende cross‑platform ontwerpconcepten toont, bekijk de Interactivity Showcase.
Invoer
Een zorgvuldig ontworpen spel moet alle primaire invoertypen ondersteunen, waaronder muis en toetsenbord, aanraking en gamepads.
Cross-platform acties
Ondersteun alle primaire invoertypen (muis/toetsenbord, aanraking en gamepads) met behulp van het Input Action System.
Om cross‑platform invoer te vereenvoudigen, biedt Roblox het Input Action System om acties zoals "springen", "rennen" of "schieten" te definiëren en bindingen voor meerdere hardware-invoeren in te stellen om die acties aan te sturen. Je hoeft niet na te denken over alle technische aspecten van hardware-invoeren en wanneer je naar specifieke invoertriggers moet luisteren; je definieert eenvoudig welke invoeren welke acties uitvoeren.
Invoertype detectie
Zorg ervoor dat UI-elementen reageren en zich aanpassen aan het primaire invoertype van de speler zoals beschreven in invoertype detectie. Overweeg ook ondersteunende hints om spelers te helpen specifieke invoerwijzigingen te begrijpen.
Bij cross-platform ontwikkeling is het belangrijk dat je het primaire invoertype dat een speler gebruikt, bepaalt en erop reageert, normaal gesproken om ervoor te zorgen dat UI-elementen zoals knoppen en menu's elegant werken en interactie ondersteunen tussen apparaten.
Bijvoorbeeld, een apparaat met aanraakfunctionaliteit gaat ervan uit dat aanraking de standaard invoer is en dat aanraakknoppen kunnen verschijnen voor acties, maar een speler kan ervoor kiezen om een bluetooth gamepad aan te sluiten. In dit geval blijft aanraking een geldige invoer, maar je kunt aannemen dat de speler wil overschakelen naar de aangesloten gamepad als het primaire invoertype en mogelijk aanraking als een back-up invoer voor de UI op het scherm gebruiken.
Als je het Input Action System gebruikt, complementeert de PreferredBinding eigenschap de detectie van primaire invoer: net zoals PreferredInput het huidige primaire invoertype van de speler rapporteert, rapporteert PreferredBinding de specifieke InputBinding die overeenkomt met het huidige apparaat van de speler. Beide worden automatisch bijgewerkt wanneer de speler van apparaat wisselt, zodat je apparaatbewuste UI kunt aansturen zonder zelf logica voor apparaatwisseling te schrijven.
Ondersteunende hints
Op basis van het primaire invoertype wordt aanbevolen dat je ondersteunende UI-hints opneemt wanneer mogelijk. Bijvoorbeeld, wanneer je gereedschappen selecteert om uit te rusten, toon invoer-specifieke hints zoals 1–5 wanneer de speler een toetsenbord gebruikt, of gamepad-trigger hints wanneer de speler een gamepad gebruikt.
Voor no-code ondersteunende hints die automatisch worden bijgewerkt wanneer de speler van apparaat wisselt, gebruik InputActionLabel en wijs het aan een InputAction om de juiste invoer per platform weer te geven. Zie bindingen weergeven voor volledige details.
Voor meer gedetailleerde controle, of als je de hintweergave verder wilt aanpassen dan wat InputActionLabel biedt, kun je de UserInputService methoden hieronder gebruiken om handmatig platform-specifieke afbeeldingen en strings te verzamelen:
De GetImageForKeyCode() en GetStringForKeyCode() methoden zijn nuttig om een platform-specifieke afbeelding of string te verzamelen voor gebruik in een UI-hint, zoals de volgende voorbeelden:
| Toetscode | Xbox Afbeelding | PlayStation Afbeelding | String |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n.v.t. | n.v.t. | 1 |
| Enum.KeyCode.Five | n.v.t. | n.v.t. | 5 |
Gebruikersinterface
Een goed ontworpen gebruikersinterface is essentieel voor spelers op alle platforms om met je spel te interageren.
Positie en grootte
Zorg ervoor dat alle UI-elementen zichtbaar zijn op alle schermformaten en oriëntaties.
Zorg ervoor dat alle knoppen/bedieningen interactief zijn en dat ze niet worden geblokkeerd of verborgen door apparaat uitsparingen of Roblox UI-elementen.
Alle UI-elementen moeten gepositioneerd en grootte zijn om zichtbaarheid en interactiviteit over meerdere schermformaten te waarborgen. Het positioneren van UI-elementen met Scale is een veelgebruikte aanpak, aangezien het is gebaseerd op een percentage van de X en Y grenzen van het scherm, niet op een pixelwaarde (pixels kunnen willekeurig variëren in zowel aantal als dichtheid tussen apparaten). Je kunt ook het AnchorPoint van het element gebruiken om de positionele oorsprong in te stellen. Bijvoorbeeld, de UI-container die de edelsteen/munt tellers in de volgende afbeelding vasthoudt, is gepositioneerd op een X schaal van 1 (rechts) en Y schaal van 0 (boven) met een bovenste-rechthoekige ankerpunt.
Scale wordt ook aanbevolen voor grootte van UI-elementen, zoals het maken van een UI-container die 75% breedte op elk scherm beslaat. Echter, 75% zou een enorme grootte renderen op 4K TV's voor console spelers, dus het wordt aanbevolen dat je aanpassing van schermgrootte verkent als een manier om UI-indelingen aan te passen over verschillende weergaven.
Aanpassing van schermgrootte
Pas UI aan verschillende weergaveformaten aan door te controleren en te luisteren naar wijzigingen in de viewport weergavegrootte.
Met een veelheid aan mogelijke schermformaten die toegankelijk zijn voor het Roblox-platform, leidt het vaak tot misinterpretatie om schermgrootte op pixels te voorspellen. Om te helpen bij het bepalen van de schermgrootte van een speler om de grootte/positie van UI-elementen aan te passen, biedt Roblox de alleen-lezen ViewportDisplaySize eigenschap die de intern gecategoriseerde rendergrootte van de viewport vertegenwoordigt.
| ViewportDisplaySize | Samenvatting |
|---|---|
| Small | De meeste tablet/mobiele/handheld apparaten |
| Medium | De meeste laptops en monitoren |
| Large | De meeste TV's of groter |
Voor meer native aanpassing kun je de UI Style Editor gebruiken om Style Queries voor zowel ViewportDisplaySize als PreferredInput waarden te configureren. Het gebruik van intrinsieke selectors zoals @ViewportDisplaySizeSmall of @PreferredInputTouch stelt je in staat om je UI automatisch tokens te laten verwisselen voor tekstgroottes, containerafmetingen en andere metingen naarmate de apparaatomgeving of de primaire invoermethode van de speler verandert.
Lay-out containers
Gebruik lay-outs om individuele UI-componenten te organiseren en zorg ervoor dat containers responsief aanpassen aan de kindelementen binnenin.
Voor een eenvoudigere organisatie van de UI moet je lay-outcomponenten gebruiken om kinderen te organiseren. Wanneer je lay-out containers gebruikt, zorg ervoor dat de kinderen leesbaar, toegankelijk en niet rommelig zijn. Een veelvoorkomende lay-outcomponent is UIListLayout, die broeder GuiObjects in rijen of kolommen positioneert en dienovereenkomstig aanpast telkens wanneer je een broederobject toevoegt of verwijdert.
Je moet ook de distributie en relatieve positionering van elementen binnen lay-outcontainers overwegen voor de beste gebruikerservaring. Het integreren van flex in een lijstlay-out is een krachtige manier om gelijkmatig te vullen/distribueren of uit te lijnen/strekken items over hun lijn, of flex specifieke items over een variabele ruimte.
Toegankelijkheid
Zorg ervoor dat alle tekst leesbaar is op alle schermen. Zorg er ook voor dat alle UI voldoende contrast heeft en dat niets uitsluitend op kleur vertrouwt om een actie of uitkomst te onderscheiden.
Zelfs met UI-elementen juist geconfigureerd over alle apparaatschermformaten, moet het algehele spel voldoen aan toegankelijkheidsnormen voor spelers met een verminderd gezichtsvermogen of kleurenblindheid. De tekstgrootte kan een grote rol spelen in de leesbaarheid van tekst-gebaseerde UI, dus je moet een tekstgroottebeperking opnemen om ervoor te zorgen dat tekst niet onleesbaar (te klein) of visueel te groot wordt op grotere schermen zoals 4K TV's.
Voor meer tips over toegankelijkheid, zie toegankelijkheidsrichtlijnen.
Laatste tips & trucs
Terwijl je werkt aan een volledig cross‑platform spel, overweeg de volgende tips en trucs:
- Apparaatemulatie is essentieel voor het ontwerpen van een optimaal spel op Roblox. Maak gebruik van de ingebouwde Device Emulator en Controller Emulator om verschillende apparaten en gamepads direct in Studio te emuleren.
- Roblox's UI-styling pijplijn, vergelijkbaar met CSS, stelt je in staat om overrides voor UI-instantie-eigenschappen te declareren en wereldwijd toe te passen. Samen met de geïntegreerde Style Editor kun je een complete en eenvoudig aan te passen gebruikersinterface opzetten.
- Zodra je spel effectief cross-platform is, verken native functies zoals haptische feedback op mobiele en gamepads, aanraakgebaren zoals TouchSwipe en TouchPinch, of versnellingsmeter en gyroscoopfunctionaliteit op AccelerometerEnabled en GyroscopeEnabled apparaten.