Directives de conception adaptative

La conception adaptative garantit que vos jeux Roblox sont superbes et agréables à utiliser sur différents formats d’écran, orientations et types d’entrée. En allant au-delà des catégories d'appareils traditionnelles comme mobile, bureau et console, les appareils d'aujourd'hui ont des capacités beaucoup plus dynamiques, permettant une transition fluide entre différentes entrées et affichages. Imaginez une tablette qui prend en charge plusieurs orientations (paysage et portrait), plusieurs types d'entrée (tactile, gamepad, souris et clavier), et plusieurs tailles d'affichage (affichage natif, et extension vers une grande télévision).

Ces directives vous aideront à livrer des jeux de premier ordre qui s'adaptent intelligemment à tout appareil et type d'entrée afin d'atteindre un large public. Pour plus de détails sur les flux de travail et les API pour vous aider à mettre en œuvre ces directives, consultez le guide de développement multiplateforme.

Principes de base

Chaque jeu est unique, mais suivre quelques principes clés vous aidera à livrer un jeu intuitif et poli à chaque joueur, sur chaque appareil.

1. Fluidité d'entrée — Assurez-vous que votre IU fonctionne avec différents types d'entrée comme gamepad, tactile, clavier et contrôleurs VR. Cela inclut le changement de votre mise en page IU et la fourniture d'indices d'assistance en fonction du type d'entrée.
2. Mise en page réactive — Concevez des mises en page IU qui s'ajustent automatiquement aux différentes tailles d'écran et orientations.
3. Dimensionnement dynamique — Échelle des éléments de l'IU selon les besoins pour s'adapter à diverses dimensions d'écran.
4. Lisibilité et clarté visuelle — Rendez tous les composants de l'IU, y compris le texte et les boutons, facilement lisibles et visuellement clairs.

Fluidité d'entrée

Assurez-vous que votre jeu se sente naturel sur divers appareils d'entrée, y compris les gamepads, la souris/le clavier, le tactile et la VR.

• Concevez des contrôles et des raccourcis pour plusieurs entrées — Assurez-vous que chaque action de votre jeu puisse être déclenchée à l'aide des boutons du gamepad/D-pad, des raccourcis clavier et du tactile. Les commandes devraient être visuellement et fonctionnellement focalisables pour la navigation avec un D-pad ou un stick. Testez chaque mode d'entrée pour que le gameplay principal, les menus et l'IU soient accessibles et naturels, quel que soit l'appareil.
• Fournissez un retour visuel par type d'entrée — Mettez à jour les étiquettes IU, les invites et les info-bulles pour refléter la méthode d'entrée active, par exemple afficher Appuyez sur A sur un gamepad, Pincer sur tactile, ou MajA sur le clavier. Utilisez des icônes et un langage familier aux joueurs de chaque plateforme.

Mise en page réactive

La mise en page de votre IU de jeu devrait s'adapter à différentes tailles d'écran et orientations. Sur un grand moniteur d'ordinateur, vous avez beaucoup d'espace pour afficher tous les boutons en une seule fois. Sur un petit écran de téléphone, cependant, tous ces boutons auraient l'air encombrés et désordonnés.

• Adaptez les mises en page à la taille d'écran et à l'orientation — Utilisez des modèles réactifs pour que votre IU se réorganise ou se condense de manière appropriée. Par exemple, déplacez les boutons moins importants dans un menu déroulant ("hamburger"/bouton de menu) sur les petits écrans, tout en les affichant au complet sur les bureaux. Votre IU de jeu devrait s'adapter gracieusement à la fois à l'orientation paysage et portrait si elle les supporte.
• Implémentez des composants de mise en page qui réagissent à la taille parente — Construisez des panneaux et des widgets IU qui ajustent leur taille ou leur position en fonction de leur conteneur parent. Par exemple, utilisez des mises en page en vue fractionnée où les panneaux latéraux se replient sur les écrans étroits mais s'étendent sur les plus larges.

Dimensionnement dynamique

Il s'agit de la taille de vos éléments IU, pas seulement de leur position. Votre IU devrait s'agrandir ou se rétrécir avec l'écran afin que tout reste à la bonne taille et soit toujours facile à interagir.

• Supportez un dimensionnement basé sur le contenu et le retour automatique — Implémentez des comportements de dimensionnement automatique : laissez les zones de texte se développer ou se rétrécir avec le contenu, et supportez le retour automatique de ligne afin que les étiquettes ne débordent pas ou ne deviennent pas illisibles lorsque la taille de l'écran change.
• Exposez et respectez les préférences d'accessibilité/utilisateur — Permettez à votre IU de répondre aux paramètres de mise à l'échelle du texte ou de l'IU spécifiés par l'utilisateur, liant ces paramètres directement à la taille des éléments IU afin que les préférences d'accessibilité accrues se traduisent toujours par une IU plus grande et plus lisible.

Lisibilité & clarté visuelle

Les joueurs peuvent-ils réellement lire votre texte sur un petit écran de téléphone ou une grande télévision éloignée d'eux ? Vos boutons sont-ils faciles à voir contre le fond de votre monde 3D ?

• Choisissez des tailles et des styles de police pour les petits écrans — Sélectionnez toujours des tailles de police qui sont lisibles sur les dispositifs mobiles, pas seulement sur le bureau. Testez sur de vrais dispositifs et vérifiez que le texte est lisible à la plus petite taille prévue. Évitez les polices trop décoratives ou fines.
• Assurez-vous d'un contraste élevé et d'une hiérarchie visuelle claire — Utilisez des couleurs pour le texte et les arrière-plans qui offrent suffisamment de contraste pour être lisibles dans des conditions d'éclairage in‑game variées. Employez une hiérarchie visuelle forte et faites en sorte que les actions clés et les étiquettes se démarquent par leur taille, couleur ou emplacement.

Dernières réflexions

L'adaptabilité consiste à rencontrer les joueurs là où ils se trouvent, que ce soit dans leurs mains, sur leur bureau ou sur grand écran. Les créateurs Roblox qui construisent en suivant ces directives livrent des jeux multiplateformes significatifs, accessibles et amusants. Commencez à vous adapter dès aujourd'hui et laissez vos créations s'épanouir !