Roblox è intrinsecamente multipiattaforma, poiché i giocatori possono scoprire e unirsi ai giochi sul proprio telefono o tablet, e poi continuare da dove avevano lasciato sul proprio PC o console. Per supportare una suite 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 preimpostato che mostra i seguenti concetti di design multipiattaforma, dai un'occhiata allo 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 tali 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 UI rispondano e si adattino al tipo di input principale del giocatore come dettagliato nel rilevamento del tipo di input. Considera anche suggerimenti assistivi per aiutare i giocatori a comprendere modifiche specifiche agli input.
Nello sviluppo multipiattaforma, è importante determinare e rispondere al tipo di input principale che un giocatore sta utilizzando, normalmente per garantire che gli elementi UI come i pulsanti e i menu sullo schermo funzionino elegantemente e supportino l'interazione tra i dispositivi.
Ad esempio, un dispositivo abilitato per il touch assume che il touch sia l'input predefinito e che possano apparire pulsanti touch per le azioni, ma un giocatore potrebbe scegliere di connettere un gamepad bluetooth. In questo caso, il touch rimane un input valido, ma puoi presumere che il giocatore voglia passare al gamepad connesso come tipo di input principale e possibilmente usare il touch come input secondario per l'interfaccia utente sullo schermo.
Suggerimenti assistivi
Basato sul tipo di input principale, è consigliabile includere suggerimenti UI assistivi ogni volta che è possibile. Ad esempio, quando si selezionano strumenti da equipaggiare, mostra suggerimenti specifici per l'input come 1–5 quando il giocatore sta usando una tastiera, o suggerimenti sui pulsanti del gamepad quando il giocatore sta utilizzando un gamepad.
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 nei seguenti esempi:
| Codice Chiave | 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 offuscati 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 usando 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 in numero che in densità tra i dispositivi). Puoi anche utilizzare il AnchorPoint dell'elemento per impostare la sua origine posizionale. Ad esempio, il contenitore UI che contiene 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, ad esempio facendo sì che un contenitore UI occupi il 75% della larghezza su ogni schermo. Tuttavia, il 75% apparirebbe di dimensioni enormi su TV 4K per i giocatori console, quindi è consigliabile esplorare l'adattamento della dimensione dello schermo come modo per adattare i layout UI attraverso diversi viewport.
Adattamento della dimensione dello schermo
Adatta l'interfaccia utente a varie dimensioni di display controllando e ascoltando le modifiche alla dimensione del display del viewport.
Con una moltitudine di possibili dimensioni dello schermo accessibili alla piattaforma Roblox, tentare di prevedere la dimensione dello schermo in pixel porta spesso a fraintendimenti. 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 classificata internamente del viewport.
| ViewportDisplaySize | Riassunto |
|---|---|
| Small | La maggior parte dei dispositivi tablet/mobile/portatili |
| Medium | La maggior parte dei laptop e monitor |
| Large | La maggior parte delle TV o più grandi |
Per una personalizzazione più nativa, puoi utilizzare l'Editor di Stile UI per configurare Style Queries sia per i valori ViewportDisplaySize che PreferredInput. Utilizzando selettori intrinseci come @ViewportDisplaySizeSmall o @PreferredInputTouch consente alla tua interfaccia utente di scambiare automaticamente i token per le dimensioni del testo, le dimensioni dei contenitori e altre misure man mano che cambia l'ambiente del dispositivo del giocatore o il metodo di input principale.
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 ingombrati. 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 oggetti lungo la loro linea, o flessibilizzare oggetti specifici attraverso uno spazio variabile.
Accessibilità
Assicurati che tutto il testo sia leggibile su tutti gli schermi. Inoltre assicurati che tutta l'interfaccia utente abbia un contrasto sufficiente e che nulla dipenda esclusivamente dal colore per distinguere un'azione o un risultato.
Anche con gli elementi UI correttamente dimensionati su tutte le dimensioni dello schermo 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 per la 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à, vedi qui.
Suggerimenti e trucchi finali
Mentre lavori verso 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 la sovrascrittura delle 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 caratteristiche 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.