Position et taille des objets UI | Documentation

À moins que les objets UI ne soient sous le contrôle d'une structure de mise en page ou d'un modificateur/restriction 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 couche dans lequel les objets se chevauchent.

Propriétés de base

Tous les GuiObjects partagent un ensemble de propriétés de base pour positionner, dimensionner, ancrer et coucher ces objets dans un conteneur à l'écran ou dans l'expérience.

Position

La propriété Position est un ensemble de coordonnées de type UDim2 qui positionne l'objet le long des axes X et Y. Un UDim2 est représenté par des valeurs de Scale et de Offset pour chaque axe :

Les valeurs de Scale représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnées de toutes les valeurs de Offset.
Les valeurs de Offset représentent combien de pixels déplacer l'objet sur l'axe correspondant, additionnées de toutes les valeurs de Scale.

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 parenthèses 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 en inférera l'ensemble de valeurs prévu.

Studio infère également l'ensemble de valeurs prévu lorsqu'un seul nombre est saisi. Par exemple, saisir simplement 0.5 sera converti en {0.5, 0},{0.5, 0} puisque 0.5 est probablement une valeur Scale de 50%. Inversement, saisir 20 sera converti en {0, 20},{0, 20} puisque 20 est probablement une valeur Offset de 20 pixels et non un scale de 2000%.

Taille

La propriété Size est un ensemble de coordonnées de type UDim2 qui dimensionne l'objet le long des axes X et Y. Un UDim2 est représenté par des valeurs de Scale et de Offset pour chaque axe :

Scale — Les valeurs qui représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnées de toutes les valeurs Offset.
Offset — Les valeurs qui représentent la taille pixel de l'objet le long de l'axe correspondant, additionnées de 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 parenthèses 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 en inférera l'ensemble de valeurs prévu.

AnchorPoint

La propriété AnchorPoint définit le point d'origine à partir duquel l'objet change sa position et taille. Les valeurs par défaut de AnchorPoint sont (0, 0) qui placent l'ancre dans le coin supérieur gauche de l'objet.

Les valeurs de AnchorPoint sont une fraction de 0 à 1, par rapport à la taille de l'objet, ce qui signifie qu'un objet avec des valeurs de 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 taille déplace et redimensionne vers l'extérieur à partir de ce point.

Pour visualiser 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 une nouvelle coordonnée Vector2 et appuyez sur Entrée.

Studio infère la paire de valeurs prévue lorsqu'un seul nombre est saisi. Par exemple, saisir 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 des valeurs entières positives ou négatives différentes pour chaque objet.

Pour les conteneurs UI comme ScreenGui, le ZIndexBehavior par défaut 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 typiquement ou influencent la position/taille des objets sous leur contrôle.

Mise en page	Description
Liste	UIListLayout positionne des GuiObjects frères dans des rangées horizontales ou des colonnes verticales au sein de leur conteneur parent.
Grille	UIGridLayout positionne des GuiObjects frères dans une grille de cellules uniformes de même taille à l'intérieur de leur conteneur parent.
Table	UITableLayout positionne des GuiObjects frères et leurs enfants au format table.
Page	UIPageLayout organise ses GuiObjects frères en pages uniques auxquelles vous pouvez accéder par la programmation.

Facteurs multiplateformes

Roblox est par nature multiplateforme, car les joueurs peuvent découvrir et rejoindre des expériences sur leur téléphone ou tablette, puis continuer là où ils s'étaient arrêtés sur leur PC ou console. Vous devriez concevoir vos expériences Roblox pour qu'elles soient accessibles et agréables sur toutes les plateformes que vous choisissez de soutenir, 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 une interface utilisateur d'expérience, évitez de placer des informations importantes ou des boutons virtuels dans ces zones.

Zones de pouce

La plupart des joueurs sur mobile 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, vous devriez donc é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 sa main ou son 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 inaccessibe 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 tant sur les téléphones que sur les tablettes est le positionnement relatif de boutons personnalisés à proximité de 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 d'espace réservé 20 pixels à sa gauche.

Script Client - Bouton Personnalisé Près du Bouton de Saut
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'évalue pas un appareil compatible avec le toucher!")
end

UI basée sur le contexte

L'espace d'écran est limité sur les appareils mobiles, donc vous devriez montrer uniquement les informations les plus vitales pendant le gameplay actif. Par exemple, si votre expérience inclut une action d'entrée spéciale pour ouvrir des portes et des coffres, il n'est pas logique d'afficher constamment un bouton "ouvrir" à l'écran. Au lieu de cela, utilisez une invite 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.