À moins que les objets UI ne soient sous le contrôle d'une structure de mise en page ou d'un modificateur/contrainte de taille, vous avez un contrôle total sur leur position et taille. Vous pouvez également définir l'ordre de superposition de l'index Z dans lequel les objets se chevauchent.
Propriétés principales
Tous les GuiObjects partagent un ensemble de propriétés de base pour positionner, dimensionner, ancrer et couche les objets dans un conteneur à l'écran ou dans le jeu.
Position
La propriété Position est un ensemble de coordonnées UDim2 qui positionne l'objet le long des axes X et Y. Un UDim2 est représenté par des valeurs Scale et Offset pour chaque axe :
Pour modifier la position d'un GuiObject sélectionné, cliquez sur le champ Position dans la fenêtre Propriétés et entrez un nouvel ensemble de coordonnées UDim2.
Les crochets et les espaces sont optionnels lors de la saisie d'un UDim2 dans Studio — vous pouvez simplement entrer les quatre valeurs séparées par des virgules, par exemple 0.25,40,0.1,20, et Studio déduira l'ensemble de valeurs prévu.
Studio déduit également l'ensemble de valeurs prévu lorsqu'un seul nombre est saisi. Par exemple, entrer simplement 0.5 sera converti en {0.5, 0},{0.5, 0} puisque 0.5 est probablement une valeur de Scale de 50 %. À l'inverse, entrer 20 sera converti en {0, 20},{0, 20} puisque 20 est probablement une valeur de Offset de 20 pixels et non une échelle de 2000 %.
Taille
La propriété Size est un ensemble de coordonnées UDim2 qui dimensionne l'objet le long des axes X et Y. Un UDim2 est représenté par des valeurs Scale et Offset pour chaque axe :
- Scale — Valeurs qui représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnelles à toutes les valeurs Offset.
- Offset — Valeurs qui représentent la taille pixel de l'objet le long de l'axe correspondant, additionnelles à toutes les valeurs Scale.
Pour modifier la taille d'un GuiObject sélectionné, cliquez sur le champ Size dans la fenêtre Propriétés et entrez un nouvel ensemble de coordonnées UDim2.
Les crochets et les espaces sont optionnels lors de la saisie d'un UDim2 dans Studio — vous pouvez simplement entrer les quatre valeurs séparées par des virgules, par exemple 0.75,0,0.25,0, et Studio déduira l'ensemble de valeurs prévu.
Studio déduit également l'ensemble de valeurs prévu lorsqu'un seul nombre est saisi. Par exemple, entrer simplement 0.5 sera converti en {0.5, 0},{0.5, 0} puisque 0.5 est probablement une valeur de Scale de 50 %. À l'inverse, entrer 20 sera converti en {0, 20},{0, 20} puisque 20 est probablement une valeur de Offset de 20 pixels et non une échelle de 2000 %.
AnchorPoint
La propriété AnchorPoint définit le point d'origine à partir duquel l'objet change de position et de taille. Les valeurs par défaut de AnchorPoint sont (0, 0) qui place l'ancre dans le coin supérieur gauche de l'objet.
Les valeurs AnchorPoint sont une fraction de 0 à 1, par rapport à la taille de l'objet, ce qui signifie qu'un objet avec des valeurs AnchorPoint de (0.5, 0.5) place le point d'ancrage à mi-chemin (50 %) à travers l'objet à la fois horizontalement et verticalement, et tout changement de sa position ou de sa taille déplace et redimensionne à partir de ce point.
Pour afficher et modifier le point d'ancrage d'un GuiObject sélectionné :
Dans la fenêtre Propriétés, cliquez à l'intérieur du champ AnchorPoint.
Entrez un nouvel ensemble de coordonnées Vector2 et appuyez sur Entrée.
Studio déduit la paire de valeurs prévue lorsqu'un seul nombre est saisi. Par exemple, entrer simplement 0.5 sera converti en 0.5, 0.5 pour un point d'ancrage central.
ZIndex
La propriété ZIndex définit l'ordre des couches dans lequel les GuiObjects se rendent et se chevauchent. Si vous souhaitez créer de nouvelles couches de rendu, vous devez définir la propriété ZIndex sur différentes valeurs entières positives ou négatives pour chaque objet.
Pour les conteneurs UI comme ScreenGui, le comportement par défaut de ZIndexBehavior rend toujours les enfants au-dessus de leurs parents, et le ZIndex de chaque enfant est utilisé pour décider de l'ordre dans lequel il se rend par rapport aux autres.
Pour modifier le ZIndex d'un objet, localisez ZIndex dans la fenêtre Propriétés et entrez une nouvelle valeur entière.
Structures de mise en page
Les structures de mise en page vous permettent d'organiser et d'afficher rapidement des GuiObjects, par exemple dans une liste horizontale ou verticale, une grille de tuiles de taille uniforme, une séquence de pages, et plus encore. Les mises en page remplacent généralement ou influencent la position/taille des objets sous leur contrôle.
| Mise en page | Description |
|---|---|
| Liste | UIListLayout positionne les GuiObjects frères dans des rangées horizontales ou des colonnes verticales au sein de leur conteneur parent. |
| Grille | UIGridLayout positionne les GuiObjects frères dans une grille de cellules uniformes de la même taille au sein de leur conteneur parent. |
| Table | UITableLayout positionne les GuiObjects frères et leurs enfants au format de table. |
| Page | UIPageLayout organise ses GuiObjects frères en pages uniques vers lesquelles vous pouvez passer par le biais de scripts. |
Facteurs multiplateformes
Roblox est intrinsèquement multiplateforme, car les joueurs peuvent découvrir et rejoindre des jeux sur leur téléphone ou leur tablette, puis continuer plus tard là où ils s'étaient arrêtés sur leur PC ou leur console. Vous devez concevoir vos jeux Roblox pour qu'ils soient accessibles et agréables sur toutes les plateformes que vous choisissez de prendre en charge, au lieu d'optimiser pour une plateforme et de négliger les autres.
Zones réservées
Sur les appareils mobiles, les contrôles par défaut occupent une partie des coins inférieur gauche et inférieur droit de l'écran. Lorsque vous concevez l'UI d'un jeu, évitez de placer des informations importantes ou des boutons virtuels dans ces zones.
Zones de pouce
La plupart des joueurs mobiles utilisent deux pouces — un sur le joystick virtuel et un sur le bouton de saut. En fonction de la taille physique de l'appareil et des mains du joueur, atteindre trop loin des coins inférieurs devient inconfortable ou impossible, donc vous devez éviter de placer des boutons fréquemment utilisés en dehors des zones faciles d'accès.
Bouton confortablement à portée du pouce droit du joueur
Bouton difficile à atteindre à moins que le joueur n'étire la main ou le pouce
N'oubliez pas que les zones de pouce confortables diffèrent entre les téléphones et les tablettes car les tablettes ont un écran plus grand. Un bouton placé à 40 % en dessous du bord supérieur de l'écran est atteignable sur un téléphone mais presque inaccessibile sur une tablette.
Bouton à 40 % du bord supérieur du téléphone, à portée du pouce du joueur
Bouton à 40 % du bord supérieur de la tablette, difficile à atteindre sans étirement
Une approche fiable sur les téléphones et les tablettes est le positionnement relatif des boutons personnalisés près des contrôles fréquemment utilisés comme le bouton de saut par défaut, les plaçant à portée facile.
Le code suivant, placé dans un script côté client dans StarterPlayerScripts, récupère la position du bouton de saut et crée un bouton personnalisé 20 pixels à sa gauche.
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
if UserInputService.TouchEnabled then
-- Attendre que le bouton de saut soit complètement chargé
while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
task.wait()
end
local jumpButton = playerGui:FindFirstChild("JumpButton", true)
-- Placer le nouveau bouton personnalisé à gauche du bouton de saut
local customButton = Instance.new("ImageButton")
customButton.AnchorPoint = Vector2.new(1, 1)
customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
customButton.Parent = jumpButton.Parent
else
warn("L'appareil n'est pas compatible avec le toucher ou Studio n'émule pas un appareil compatible avec le toucher !")
endUI basée sur le contexte
L'espace d'écran est limité sur les appareils mobiles, donc vous ne devez afficher que les informations les plus vitales pendant le gameplay actif. Par exemple, si votre jeu inclut une action d'entrée spéciale pour ouvrir des portes et des coffres au trésor, il n'est pas logique d'afficher constamment un bouton "ouvrir" à l'écran. Au lieu de cela, utilisez un prompt de proximité ou une méthode similaire pour accepter l'entrée uniquement lorsque le personnage s'approche d'une porte ou d'un coffre.
