Roblox est intrinsèquement multiplateforme, car les joueurs peuvent découvrir et rejoindre des jeux sur leur téléphone ou tablette, puis continuer là où ils s'étaient arrêtés sur leur PC ou console. Pour soutenir une suite de plateformes en expansion, vous devez construire des interfaces utilisateur qui s'adaptent sans effort 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 véritable jeu multiplateforme qui est compatible, accessible et agréable sur toutes les plateformes.
Pour explorer un jeu préconçu 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'Action d'Entrée.
Pour simplifier les entrées multiplateformes, Roblox fournit le Système d'Action d'Entrée pour définir des actions telles que "sauter", "courir" ou "tirer" et configurer des liaisons pour plusieurs entrées matérielles afin de déclencher 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'interface utilisateur réagissent et s'adaptent au type d'entrée principal du joueur comme détaillé dans la détection du type d'entrée. Pensez également aux indices 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 s'assurer que les éléments de l'interface utilisateur comme les boutons et les menus à l'écran fonctionnent élégamment et supportent l'interaction entre les appareils.
Par exemple, un appareil compatible avec le 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'interface utilisateur à l'écran.
Si vous utilisez le Système d'Action d'Entrée, la propriété PreferredBinding complète la détection de l'entrée principale : tout comme PreferredInput rapporte le type d'entrée principal actuel du joueur, PreferredBinding rapporte la InputBinding spécifique qui correspond à l'appareil actuel du joueur. Les deux se mettent à jour automatiquement lorsque le joueur change d'appareil, vous permettant de gérer une interface utilisateur consciente de l'appareil sans écrire vous-même de logique de changement d'appareil.
Indices d'assistance
En fonction du type d'entrée principal, il est recommandé d'inclure des indices d'interface utilisateur d'assistance chaque fois que cela est possible. Par exemple, lors de la sélection d'outils à équiper, affichez des indices spécifiques à l'entrée tels que 1–5 lorsque le joueur utilise un clavier, ou des indices de déclencheur de manette lorsque le joueur utilise une manette.
Pour des indices d'assistance sans code qui se mettent à jour automatiquement lorsque le joueur change d'appareils, utilisez InputActionLabel et pointez-le vers n'importe quel InputAction pour afficher l'entrée correcte par plateforme. Consultez affichage des liaisons pour plus de détails.
Pour un contrôle plus granulaire, ou si vous devez personnaliser l'affichage des indices au-delà de ce que InputActionLabel offre, vous pouvez utiliser les méthodes UserInputService ci-dessous pour rassembler manuellement des images et des chaînes spécifiques à la plateforme :
Les méthodes GetImageForKeyCode() et GetStringForKeyCode() sont utiles pour rassembler une image ou une chaîne spécifique à la plateforme à utiliser dans un indice d'interface utilisateur, 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 interagissent avec votre jeu.
Position et taille
Assurez-vous que tous les éléments de l'interface utilisateur sont visibles sur toutes les tailles et orientations d'écran.
Assurez-vous que tous les boutons/contrôles sont interactifs et qu'ils ne sont pas bloqués ou obscurcis par des découpes d'appareil ou des éléments d'interface utilisateur Roblox.
Tous les éléments de l'interface utilisateur doivent être positionnés et dimensionnés de manière appropriée pour garantir leur visibilité et leur interactivité sur plusieurs tailles d'écran. Positionner les éléments de l'interface utilisateur 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 arbitrairement en nombre et en densité selon les appareils). Vous pouvez également utiliser le AnchorPoint de l'élément pour définir son origine positionnelle. Par exemple, le conteneur d'interface utilisateur contenant les compteurs de gemmes/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 de l'interface utilisateur, comme faire en sorte qu'un conteneur d'interface utilisateur s'étende sur 75 % de la largeur de chaque écran. Cependant, 75 % donnerait une taille énorme sur des téléviseurs 4K pour les joueurs sur console, il est donc recommandé d'explorer l'adaptation de la taille de l'écran comme moyen d'adapter les mises en page de l'interface utilisateur à travers différents affichages.
Adaptation de la taille de l'écran
Adaptez l'interface utilisateur à différentes 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 à des interprétations erronées. Pour aider à déterminer la taille de l'écran d'un joueur afin d'adapter la taille/la position des éléments de l'interface utilisateur, Roblox fournit la propriété en lecture seule ViewportDisplaySize qui représente la taille de rendu classée en interne du viewport.
| ViewportDisplaySize | Résumé |
|---|---|
| Small | La plupart des appareils 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'interface utilisateur 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 interface utilisateur peut automatiquement échanger des jetons pour les tailles de texte, les dimensions des conteneurs et d'autres mesures à mesure que 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'interface utilisateur et assurez-vous que les conteneurs s'ajustent de manière réactive aux éléments enfants qui s'y trouvent.
Pour une organisation plus facile de l'interface utilisateur, vous devriez 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 sont lisibles, accessibles et non 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 supprimez un objet frère.
Vous devriez également considérer la distribution et le positionnement relatif des éléments au sein des conteneurs de mise en page pour la meilleure expérience utilisateur. Intégrer flex dans une mise en page de liste est un moyen puissant de remplir/distribuer également ou aligner/étirer des éléments sur leur ligne, ou flexibiliser des éléments spécifiques sur un espace variable.
Accessibilité
Assurez-vous que tout le texte est lisible sur tous les écrans. Assurez-vous également que toute l'interface utilisateur a 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 de l'interface utilisateur correctement dimensionnés sur toutes les tailles d'écran des appareils, le jeu dans son ensemble doit répondre aux normes d'accessibilité pour les joueurs ayant une vision altérée ou une daltonisme. La taille du texte peut jouer un rôle important dans la lisibilité de l'interface utilisateur basée sur le texte, il est donc conseillé d'inclure une contrainte de taille de texte pour garantir que le texte ne devienne pas illisible (trop petit) ou visuellement trop grand sur des écrans plus grands comme les téléviseurs 4K.
Pour plus de conseils sur l'accessibilité, consultez les directives d'accessibilité.
Derniers conseils et astuces
Alors que vous travaillez vers un jeu entièrement multiplateforme, considérez les conseils et astuces suivants :
- 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'interface utilisateur de Roblox, similaire au CSS, vous permet de déclarer et d'appliquer globalement des remplacements aux propriétés des instances d'interface utilisateur. Avec l'Éditeur de Style intégré, vous pouvez configurer 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 les appareils mobiles et les manettes, les gestes tactiles tels que TouchSwipe et TouchPinch, ou la fonctionnalité d'accéléromètre et de gyroscope sur les appareils AccelerometerEnabled et GyroscopeEnabled.