Roblox è intrinsecamente multipiattaforma, poiché i giocatori possono scoprire e unirsi ai giochi sul proprio telefono o tablet, per poi continuare successivamente da dove avevano interrotto sul proprio PC o console. Per supportare un insieme in espansione di piattaforme, dovresti costruire interfacce utente che si adattino senza soluzione di continuità al tipo di input (touch, gamepad, mouse/tastiera), alla dimensione dello schermo e all'orientamento del dispositivo. Questa guida, la guida al design adattivo e le risorse collegate possono aiutarti a progettare un vero gioco multipiattaforma che sia compatibile, accessibile e divertente su tutte le piattaforme.
Per esplorare un gioco predefinito che mostra i seguenti concetti di design multipiattaforma, dai un'occhiata all'Interactivity Showcase.
Input
Un gioco progettato con attenzione dovrebbe supportare tutti i principali tipi di input, inclusi mouse e tastiera, touch e gamepad.
Azioni multipiattaforma
Supporta tutti i principali tipi di input (mouse/tastiera, touch e gamepad) utilizzando il Input Action System.
Per semplificare gli input multipiattaforma, Roblox fornisce il Input Action System per definire azioni come "salta", "corri" o "spara" e impostare binding per più input hardware per attivare quelle azioni. Non è necessario pensare a tutti gli aspetti tecnici degli input hardware e quando ascoltare specifici trigger di input; devi semplicemente definire quali input eseguono quali azioni.
Rilevamento del tipo di input
Assicurati che gli elementi dell'interfaccia utente rispondano e si adattino al tipo di input principale del giocatore come dettagliato in rilevamento del tipo di input. Considera anche suggerimenti assistivi per aiutare i giocatori a comprendere specifici cambiamenti di input.
Nello sviluppo multipiattaforma, è importante determinare e rispondere al tipo di input principale che un giocatore sta utilizzando, normalmente per garantire che gli elementi dell'interfaccia utente come i pulsanti e i menu sullo schermo funzionino elegantemente e supportino l'interazione tra i dispositivi.
Ad esempio, un dispositivo abilitato al touch presume che il touch sia l'input predefinito e che i pulsanti touch possano apparire per le azioni, ma un giocatore potrebbe scegliere di collegare un gamepad bluetooth. In questo caso, il touch rimane un input valido, ma puoi presumere che il giocatore voglia passare al gamepad collegato come tipo di input principale e possibilmente utilizzare il touch come input di backup per l'interfaccia utente sullo schermo.
Se stai utilizzando il Input Action System, la proprietà PreferredBinding completa il rilevamento dell'input principale: proprio come PreferredInput riporta il tipo di input principale attuale del giocatore, PreferredBinding riporta il specifico InputBinding che corrisponde al dispositivo attuale del giocatore. Entrambi si aggiornano automaticamente mentre il giocatore passa da un dispositivo all'altro, quindi puoi gestire un'interfaccia utente consapevole del dispositivo senza scrivere tu stesso la logica di cambio del dispositivo.
Suggerimenti assistivi
In base al tipo di input principale, è consigliabile includere suggerimenti UI assistivi ogni volta che è possibile. Ad esempio, quando si selezionano strumenti da equipaggiare, visualizza suggerimenti specifici per l'input come 1–5 quando il giocatore utilizza una tastiera, o suggerimenti per i trigger del gamepad quando il giocatore utilizza un gamepad.
Per suggerimenti assistivi senza codice che si aggiornano automaticamente quando il giocatore cambia dispositivo, utilizza InputActionLabel e puntalo a qualsiasi InputAction per visualizzare l'input corretto per piattaforma. Vedi visualizzazione dei binding per tutti i dettagli.
Per un controllo più granulare, o se hai bisogno di personalizzare la visualizzazione dei suggerimenti oltre a quanto offre InputActionLabel, puoi utilizzare i metodi UserInputService qui sotto per raccogliere manualmente immagini e stringhe specifiche per la piattaforma:
I metodi GetImageForKeyCode() e GetStringForKeyCode() sono utili per raccogliere un'immagine o una stringa specifica per la piattaforma da utilizzare in un suggerimento UI, come i seguenti esempi:
| Codice tasto | Immagine Xbox | Immagine PlayStation | Stringa |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Interfaccia utente
Un'interfaccia utente ben progettata è essenziale affinché i giocatori su tutte le piattaforme possano interagire con il tuo gioco.
Posizione e dimensione
Assicurati che tutti gli elementi UI siano visibili su tutte le dimensioni e orientamenti dello schermo.
Assicurati che tutti i pulsanti/controlli siano interattivi e che non siano bloccati o oscurati da ritagli del dispositivo o elementi UI di Roblox.
Tutti gli elementi UI dovrebbero essere posizionati e dimensionati in modo appropriato per garantire visibilità e interattività su più dimensioni dello schermo. Posizionare gli elementi UI tramite Scale è un approccio comune poiché si basa su una percentuale dei limiti X e Y dello schermo, non su un valore in pixel (i pixel possono variare arbitrariamente sia per numero che per densità tra i dispositivi). Puoi anche utilizzare il AnchorPoint dell'elemento per impostare la sua origine posizionale. Ad esempio, il contenitore UI che tiene i contatori di gemme/monete nell'immagine seguente è posizionato a una scala X di 1 (destra) e una scala Y di 0 (alto) con un punto di ancoraggio in alto a destra.
Scale è anche raccomandato per dimensionare gli elementi UI, come far sì che un contenitore UI occupi il 75% della larghezza su ogni schermo. Tuttavia, il 75% si tradurrebbe in una dimensione enorme su TV 4K per i giocatori console, quindi è consigliabile esplorare l'adattamento delle dimensioni dello schermo come modo per adattare i layout UI attraverso diversi viewport.
Adattamento delle dimensioni dello schermo
Adatta l'interfaccia utente a varie dimensioni di visualizzazione controllando e ascoltando i cambiamenti nella dimensione di visualizzazione del viewport.
Con una moltitudine di possibili dimensioni dello schermo accessibili alla piattaforma Roblox, tentare di prevedere la dimensione dello schermo in pixel spesso porta a interpretazioni errate. Per aiutare a determinare la dimensione dello schermo di un giocatore per adattare la dimensione/posizione degli elementi UI, Roblox fornisce la proprietà di sola lettura ViewportDisplaySize che rappresenta la dimensione di rendering internamente categorizzata del viewport.
| ViewportDisplaySize | Riepilogo |
|---|---|
| Small | La maggior parte dei dispositivi tablet/mobile/portatili |
| Medium | La maggior parte dei laptop e dei monitor |
| Large | La maggior parte delle TV o più grandi |
Per una personalizzazione più nativa, puoi utilizzare l'editor di stile UI Style Editor per configurare Style Queries sia per ViewportDisplaySize che per i valori di PreferredInput. Utilizzando selettori intrinseci come @ViewportDisplaySizeSmall o @PreferredInputTouch, la tua interfaccia utente può automaticamente scambiare token per dimensioni del testo, dimensioni dei contenitori e altre misurazioni man mano che l'ambiente del dispositivo del giocatore o il metodo di input principale cambiano.
Contenitori di layout
Utilizza layout per organizzare i singoli componenti UI e assicurati che i contenitori si adattino in modo reattivo agli elementi figli al loro interno.
Per una più facile organizzazione dell'interfaccia utente, dovresti utilizzare componenti di layout per organizzare i figli. Quando utilizzi contenitori di layout, assicurati che i figli siano leggibili, accessibili e non disordinati. Un componente di layout comune è UIListLayout, che posiziona i GuiObjects fratelli in righe o colonne e si adatta di conseguenza ogni volta che aggiungi o rimuovi un oggetto fratello.
Dovresti anche considerare la distribuzione e il posizionamento relativo degli elementi all'interno dei contenitori di layout per la migliore esperienza utente. Integrare flex in un layout a lista è un modo potente per riempire/distribuire equamente o allineare/stirare gli elementi lungo la loro linea, o flexionare elementi specifici attraverso uno spazio variabile.
Accessibilità
Assicurati che tutto il testo sia leggibile su tutti gli schermi. Assicurati anche che tutta l'interfaccia utente abbia contrasto sufficiente e che niente dipenda esclusivamente dal colore per distinguere un'azione o un risultato.
Anche con gli elementi UI dimensionati correttamente su tutte le dimensioni degli schermi dei dispositivi, l'intero gioco dovrebbe soddisfare gli standard di accessibilità per i giocatori con problemi di vista o daltonismo. La dimensione del testo può influire notevolmente sulla leggibilità dell'interfaccia utente basata su testo, quindi dovresti includere un vincolo sulla dimensione del testo per garantire che il testo non diventi illeggibile (troppo piccolo) o visivamente troppo grande su schermi più grandi come le TV 4K.
Per ulteriori suggerimenti sull'accessibilità, consulta le linee guida sull'accessibilità.
Suggerimenti e trucchi finali
Mentre lavori per un gioco completamente multipiattaforma, considera i seguenti suggerimenti e trucchi:
- L'emulazione del dispositivo è essenziale per progettare un gioco ottimale su Roblox. Utilizza l'Emulatore di Dispositivo integrato e l'Emulatore di Controller per emulare vari dispositivi e gamepad direttamente in Studio.
- Il pipeline di stile UI di Roblox, simile al CSS, ti consente di dichiarare e applicare globalmente sovrascritture alle proprietà delle istanze UI. Insieme all'integrato Editor di Stile, puoi impostare un'interfaccia utente completa e facile da modificare.
- Una volta che il tuo gioco è effettivamente multipiattaforma, esplora funzionalità native come il feedback aptico su mobile e gamepad, gesti touch come TouchSwipe e TouchPinch, o funzionalità di accelerometro e giroscopio su dispositivi AccelerometerEnabled e GyroscopeEnabled.