Roblox est intrinsèquement multiplateforme, car les joueurs peuvent découvrir et rejoindre des jeux sur leur téléphone ou tablette, puis continuer plus tard là où ils s'étaient arrêtés sur leur PC ou console. Pour soutenir un ensemble croissant de plateformes, vous devez créer des interfaces utilisateur qui s'adaptent sans problème au type d'entrée (tactile, manette, souris/clavier), à la taille de l'écran et à l'orientation de l'appareil. Ce guide, le guide de design adaptatif et les ressources liées peuvent vous aider à concevoir un vrai jeu multiplateforme qui soit compatible, accessible et agréable sur toutes les plateformes.
Pour explorer un jeu préfabriqué qui met en avant les concepts de design multiplateforme suivants, consultez le Interactivity Showcase.
Entrée
Un jeu soigneusement conçu doit prendre en charge tous les types d'entrée principaux, y compris la souris et le clavier, le tactile et les manettes.
Actions multiplateformes
Prenez en charge tous les types d'entrée principaux (souris/clavier, tactile et manettes) en utilisant le Système d'Actions d'Entrée.
Pour simplifier les entrées multiplatformes, Roblox fournit le Système d'Actions d'Entrée pour définir des actions telles que "sauter", "courir" ou "tirer" et configurer des liens pour plusieurs entrées matérielles pour entraîner ces actions. Vous n'avez pas besoin de penser à tous les aspects techniques des entrées matérielles et à quand écouter des déclencheurs d'entrée spécifiques ; vous définissez simplement quelles entrées effectuent quelles actions.
Détection du type d'entrée
Assurez-vous que les éléments de l'UI répondent et s'adaptent au type d'entrée principal du joueur comme détaillé dans la détection du type d'entrée. Envisagez également des indications d'assistance pour aider les joueurs à comprendre les changements d'entrée spécifiques.
Dans le développement multiplateforme, il est important de déterminer et de répondre au type d'entrée principal qu'un joueur utilise, normalement pour garantir que les éléments d'UI tels que les boutons à l'écran et les menus fonctionnent élégamment et soutiennent l'interaction sur différents appareils.
Par exemple, un appareil activé au tactile suppose que le tactile est l'entrée par défaut et que des boutons tactiles peuvent apparaître pour des actions, mais un joueur peut choisir de connecter une manette bluetooth. Dans ce cas, le tactile reste une entrée valide, mais vous pouvez supposer que le joueur souhaite passer à la manette connectée comme type d'entrée principal et éventuellement utiliser le tactile comme entrée de secours pour l'UI à l'écran.
Indications d'assistance
En fonction du type d'entrée principal, il est recommandé d'inclure des indications UI d'assistance chaque fois que possible. Par exemple, lors de la sélection d'outils à équiper, affichez des indications spécifiques à l'entrée telles que 1–5 lorsque le joueur utilise un clavier, ou des indications de tir de manette lorsque le joueur utilise une manette.
Les méthodes GetImageForKeyCode() et GetStringForKeyCode() sont utiles pour rassembler une image ou une chaîne spécifique à la plateforme à utiliser dans une indication d'UI, comme les exemples suivants :
| Code de Touche | Image Xbox | Image PlayStation | Chaîne |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Interface utilisateur
Une interface utilisateur bien conçue est essentielle pour que les joueurs sur toutes les plateformes puissent interagir avec votre jeu.
Position et taille
Assurez-vous que tous les éléments de l'UI sont visibles sur toutes les tailles et orientations d'écran.
Assurez-vous que tous les boutons/contrôles sont interactables et qu'ils ne sont pas bloqués ou obscurcis par des découpes d'appareil ou des éléments d'UI Roblox.
Tous les éléments de l'UI devraient être positionnés et dimensionnés de manière appropriée pour garantir leur visibilité et interactivité sur plusieurs tailles d'écran. Positionner les éléments de l'UI par Scale est une approche courante car elle est basée sur un pourcentage des limites X et Y de l'écran, et non sur une valeur en pixels (les pixels peuvent varier de manière arbitraire tant en nombre qu'en densité sur les appareils). Vous pouvez également utiliser le AnchorPoint de l'élément pour définir son origine de position. Par exemple, le conteneur UI contenant les compteurs de gemmes/de pièces dans l'image suivante est positionné à une échelle X de 1 (droite) et à une échelle Y de 0 (haut) avec un point d'ancrage en haut à droite.
Scale est également recommandé pour dimensionner les éléments d'UI, comme faire en sorte qu'un conteneur d'UI s'étende sur 75 % de la largeur de chaque écran. Cependant, 75 % représenterait une taille énorme sur les téléviseurs 4K pour les joueurs de console, il est donc recommandé d'explorer l'adaptation à la taille de l'écran comme moyen d'adapter les mises en page d'UI sur différents affichages.
Adaptation à la taille de l'écran
Adaptez l'UI à diverses tailles d'affichage en vérifiant et en écoutant les changements de la taille d'affichage du viewport.
Avec une multitude de tailles d'écran possibles accessibles à la plateforme Roblox, tenter de prédire la taille de l'écran en pixels conduit souvent à de fausses interprétations. Pour aider à déterminer la taille de l'écran d'un joueur afin d'adapter la taille/la position des éléments d'UI, Roblox fournit la propriété en lecture seule ViewportDisplaySize qui représente la taille de rendu catégorisée en interne du viewport.
| ViewportDisplaySize | Résumé |
|---|---|
| Small | La plupart des dispositifs tablettes/mobiles/portables |
| Medium | La plupart des ordinateurs portables et des moniteurs |
| Large | La plupart des téléviseurs ou plus grands |
Pour une personnalisation plus native, vous pouvez utiliser l'Éditeur de Style de l'UI pour configurer des Requêtes de Style pour les valeurs ViewportDisplaySize et PreferredInput. En utilisant des sélecteurs intrinsèques comme @ViewportDisplaySizeSmall ou @PreferredInputTouch, votre UI peut automatiquement échanger des jetons pour les tailles de texte, les dimensions des conteneurs et d'autres mesures lorsque l'environnement de l'appareil du joueur ou la méthode d'entrée principale changent.
Conteneurs de mise en page
Utilisez des mises en page pour organiser les composants individuels de l'UI et assurez-vous que les conteneurs s'ajustent de manière réactive aux éléments enfants qu'ils contiennent.
Pour faciliter l'organisation de l'UI, vous devez utiliser des composants de mise en page pour organiser les enfants. Lorsque vous utilisez des conteneurs de mise en page, assurez-vous que les enfants soient lisibles, accessibles et peu encombrés. Un composant de mise en page courant est UIListLayout, qui positionne les GuiObjects frères en lignes ou en colonnes et s'ajuste en conséquence chaque fois que vous ajoutez ou retirez un objet frère.
Vous devriez également considérer la distribution et la position relative des éléments à l'intérieur des conteneurs de mise en page pour la meilleure expérience utilisateur. Intégrer des flex dans une mise en page de liste est un moyen puissant d'égaliser/remplir/distribuer ou d'aligner/étirer des éléments sur leur ligne, ou de flexibiliser des éléments spécifiques à travers un espace variable.
Accessibilité
Assurez-vous que tout le texte est lisible sur tous les écrans. Veillez également à ce que toute l'UI ait un contraste suffisant et que rien ne repose uniquement sur la couleur pour distinguer une action ou un résultat.
Même avec des éléments d'UI correctement dimensionnés sur toutes les tailles d'écran des appareils, le jeu dans son ensemble doit respecter les normes d'accessibilité pour les joueurs ayant une vision altérée ou une daltonisme. La taille du texte peut avoir un impact significatif sur la lisibilité de l'UI basée sur du texte, vous devriez donc inclure une contrainte de taille de texte pour vous assurer que le texte ne devient pas illisible (trop petit) ou visuellement trop grand sur des écrans plus grands comme les téléviseurs 4K.
Pour plus d'astuces sur l'accessibilité, consultez ici.
Derniers conseils et astuces
Alors que vous travaillez pour un jeu entièrement multiplateforme, voici quelques conseils et astuces à considérer :
- L'émulation d'appareil est essentielle pour concevoir un jeu optimal sur Roblox. Utilisez l'Émulateur d'Appareil intégré et l'Émulateur de Manette pour émuler divers appareils et manettes directement dans Studio.
- Le pipeline de stylisation de l'UI de Roblox, similaire au CSS, vous permet de déclarer et d'appliquer globalement des substitutions aux propriétés des instances d'UI. Avec l'Éditeur de Style intégré, vous pouvez mettre en place une interface utilisateur complète et facile à modifier.
- Une fois que votre jeu est efficacement multiplateforme, explorez des fonctionnalités natives comme le retour haptique sur mobile et manettes, les gestes tactiles tels que TouchSwipe et TouchPinch, ou la fonctionnalité de l'accéléromètre et du gyroscope sur les dispositifs AccelerometerEnabled et GyroscopeEnabled.