UI Roblox responsive : 6 règles pour passer du PC au mobile sans tout casser

TL;DR

En 2024, Roblox comptait 82,9 millions de joueurs actifs par jour — et 80 % d'entre eux jouaient sur mobile. Le PC ne représentait que 17 % de la base. Autrement dit : si votre UI est conçue uniquement pour un écran 1920×1080, vous décevez la grande majorité de vos joueurs dès qu'ils lancent votre jeu sur téléphone.

Ce guide couvre les 6 règles fondamentales pour créer une UI Roblox qui s'adapte proprement à tous les formats d'écran, sans bidouillages ni plugins magiques.

Pourquoi l'UI "PC-first" est une erreur structurelle

Une UI qui semble parfaite en 1920×1080 peut complètement se déformer sur mobile si elle n'est pas conçue de façon responsive. Le problème vient presque toujours de la même source : l'utilisation d'Offset (pixels fixes) là où il faudrait du Scale (proportionnel).

Scaler son UI pour tous les appareils est essentiel pour une expérience fluide. Un mauvais scaling donne un rendu non professionnel, et pire encore, rend le jeu injouable.

Règle 1 — Bannir les Offset purs pour Position et Size

X.Scale et Y.Scale définissent la taille ou la position d'un élément de façon proportionnelle à son parent. X.Offset et Y.Offset, eux, définissent la taille ou la position en pixels absolus.

Sur un PC 1920px de large, un bouton UDim2.new(0, 300, 0, 60) fait 300px. Sur un iPhone SE (~375px de large), ce même bouton dépasse ou s'écrase complètement.

Pour les UIs responsives, il faut toujours utiliser les valeurs Scale dans UDim2 plutôt que les valeurs Offset. À éviter : UDim2.new(0, 200, 0, 50) (pixels fixes). À privilégier : UDim2.new(0.25, 0, 0.08, 0) (scaling responsive).

-- ❌ À éviter : taille fixe en pixels
myButton.Size     = UDim2.new(0, 300, 0, 60)
myButton.Position = UDim2.new(0, 50, 0, 100)

-- ✅ Correct : tout en Scale
myButton.Size     = UDim2.fromScale(0.3, 0.08)
myButton.Position = UDim2.fromScale(0.05, 0.1)

Attention aux valeurs mixtes. Size = UDim2.new(0.1, 25, 0.2, 50) — les valeurs d'offset (25, 50) ne scalent pas avec la taille de l'écran. Ce genre de mélange passe inaperçu sur PC et explose sur mobile.

Règle 2 — Maîtriser l'AnchorPoint

Beaucoup laissent l'AnchorPoint à (0, 0) partout, puis compensent avec des positions absurdes comme UDim2.new(0.449, 0, 0.332, 0).

En règle générale, si votre AnchorPoint ou votre Scale n'est pas 0, 0.5 ou 1, vous faites probablement quelque chose d'incorrect.

Référence rapide :

Avec AnchorPoint = Vector2.new(0.5, 0.5) et Position = UDim2.fromScale(0.5, 0.5), votre élément reste au centre quelle que soit la résolution — sans calculs d'offsets négatifs.

Règle 3 — UIAspectRatioConstraint pour les éléments iconiques

Le Scale seul ne préserve pas les proportions quand le ratio d'écran change (16:9 → 9:16 en portrait). Vos frames se déforment même avec du Scale pur.

Le UIAspectRatioConstraint impose un ratio largeur/hauteur à un GuiObject, quelle que soit sa taille de base. Par exemple, AspectRatio = 2 (2:1) garde la largeur du frame toujours à deux fois sa hauteur.

local slot = Instance.new("Frame")
slot.Size = UDim2.fromScale(0.12, 0.12)

local constraint = Instance.new("UIAspectRatioConstraint")
constraint.AspectRatio = 1  -- carré parfait, toujours
constraint.Parent = slot

Attention : quand un objet UI est contrôlé à la fois par un UIListLayout et un UIAspectRatioConstraint, la contrainte remplace le layout et contrôle la taille de l'objet.

Règle 4 — TextScaled + UITextSizeConstraint

TextScaled = true adapte automatiquement la taille du texte au conteneur, mais sans bornes, un texte peut devenir illisible sur petit écran.

Le UITextSizeConstraint spécifie une taille de police minimale et maximale. Si TextScaled est activé, la taille du texte s'adapte à la taille du conteneur tout en respectant les contraintes.

Ne pas descendre sous MinTextSize = 9 — le texte deviendrait difficile à lire.

label.TextScaled = true

local constraint = Instance.new("UITextSizeConstraint")
constraint.MinTextSize = 12   -- plancher lisible
constraint.MaxTextSize = 36   -- plafond pour titres
constraint.Parent = label

Règle 5 — Touch targets suffisamment grands

Sur mobile, les joueurs utilisent leurs pouces. Un bouton visuellement correct peut être frustrant à toucher.

Pour des cibles tactiles fiables sur mobile, utilisez une taille minimale de 0.15 en largeur et 0.08 en hauteur (Scale). Ajoutez du padding proportionnel entre les éléments interactifs.

Aucun bouton interactif ne devrait avoir une hauteur Scale inférieure à 0.07. Sur un écran de 720px de haut, cela donne ~50px — le minimum raisonnable pour le touch.

local button = Instance.new("TextButton")
button.Size        = UDim2.fromScale(0.4, 0.09)
button.AnchorPoint = Vector2.new(0.5, 1)
button.Position    = UDim2.fromScale(0.5, 0.95)

Règle 6 — Tester en temps réel avec UI-Response

Concevoir dans Studio en 1920×1080 et croiser les doigts pour le mobile, c'est la pire approche.

Le plugin UI-Response (Creator Marketplace) améliore le workflow cross-platform en montrant des aperçus en temps réel de l'UI dans différents ratios et résolutions.

Résolutions à valider systématiquement :

Si votre UI passe ces 5 checkpoints, elle est bonne pour 95 % de vos joueurs.

Récap : erreurs classiques

FAQ

Peut-on utiliser un peu d'Offset quand même ?

Oui, dans des cas très précis — contour de 2px (UIStroke), padding interne de quelques pixels dans un conteneur déjà en Scale. Mais pour la Size et la Position de vos éléments principaux, restez sur du Scale pur.

Les plugins AutoScale sont-ils recommandés ?

Malheureusement, la plupart des nouveaux développeurs entendent le conseil mal avisé "utilise juste la propriété Scale", ce qui les amène à n'utiliser que Scale pour tout, pensant que ça fonctionne, puis à être confus quand ça ne fonctionne qu'à moitié. AutoScale peut aider à convertir rapidement des valeurs existantes, mais il ne remplace pas la compréhension des contraintes. Apprenez les bases d'abord.

Comment gérer la notch iPhone ?

Sur Roblox, les ScreenGui avec SafeAreaCompatibility activé gèrent automatiquement la safe area. Assurez-vous que la propriété est configurée pour respecter la notch et la barre de navigation Android.

Des composants UI déjà configurés en Scale ? Jetez un œil au marketplace GM Market — certains packs incluent des templates responsive prêts à l'emploi.

Sources : Roblox Creator Docs — Size Modifiers · SuperbulletStudios UI Guide · DevForum — Scaling UI for all devices · PocketGamer — Roblox stats 2024 · Plugin UI-Response