Objets d'interface utilisateur de position et de taille

À moins que les objets d'interface utilisateur soient sous le contrôle d'une structure de mise en page ou d'un modifieur/contrôleur de taille , vous avez un contrôle complet sur leur position et leur taille .Vous pouvez également définir l'ordre de l'index Z décalage dans lequel les objets se chevaucher.

Propriétés principales

Tous les GuiObjects partagent un ensemble de propriétés de base pour positionner , taille , ancre et couche les dans un conteneur sur écran ou dans l'expérience.

Position

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

• Scale les valeurs représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnel de toute valeur Offset.
• Offset les valeurs représentent le nombre de pixels pour déplacer l'objet sur l'axe correspondant, additionnel de toute valeur Scale.

Pour modifier la position d'un élément sélectionné GuiObject, cliquez sur le champ Position dans la fenêtre Propriétés et entrez un nouveau configurerde coordonnées UDim2.

Taille

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

• Échelle — Valeurs qui représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnel à toutes les valeurs de décalage .
• Déséquilibre — Valeurs qui représentent la taille pixel de l'objet le long de l'axe correspondant, additif à toutes les valeurs échelle .

Pour modifier la taille d'un élément sélectionné GuiObject, cliquez sur le champ Taille dans la fenêtre Propriétés et entrez un nouveau configurerde coordonnées UDim2.

Point d'ancrage

La propriété définit le point d'origine où l'objet change de position et de taille .Les valeurs par défaut sont qui placent l'ancre dans le coin supérieur gauche de l'objet.

les valeurs de fraction à partir de à sont relatives à la taille de l'objet, ce qui signifie qu'un objet avec des valeurs de de places 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 se déplace et s'élargit à partir de ce point.

Pour afficher et modifier le point d'ancrage d'un sélecteur GuiObject :

1. Dans la fenêtre propriétés, cliquez à l'intérieur du champ point d'ancrage .

   

2. Entrez une nouvelle coordonnée Vector2 et appuyez sur Enter .

   Studio infère la paire de valeur prévue lorsqu'un seul nombre est entré.Par exemple, l'entrée simple 0.5 sera convertie en 0.5, 0.5 pour un point d'ancrage central.

ZIndex

La propriété ZIndex définit l'ordre des couches dans lequel GuiObjects rendre et se chevaucher les uns les autres.Si vous souhaitez créer de nouvelles couches de rendu, vous devez définir la propriété ZIndex à différentes valeurs positives ou négatives entières pour chaque objet.

Pour les conteneurs d'interface utilisateur comme ScreenGui , le défaut de ZIndexBehavior rend toujours les enfants au-dessus de leurs parents, et chaque enfant de ZIndex est utilisé pour décider de l'ordre dans lequel il s'affiche sur les autres.

Pour modifier la valeur 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 présentation vous permettent d'organiser et d'afficher rapidement , par exemple dans une liste horizontale ou verticale , une grille de tuiles de taille égale, une séquence de pages et plus encore.Les layouts remplacent ou influent généralement sur la position de la position / de l'objet sous leur contrôle.

Facteurs cross-plateforme

Roblox est par nature cross-plateforme , car les joueurs peuvent découvrir et rejoindre des expériences sur un PC ou une console, puis plus tard récupérer leur téléphone et poursuivre là où ils ont laissé off.Vous devez concevoir vos expériences Roblox pour qu'elles soient accessibles et agréables sur toutes les plates-formes que vous choisissez de assistance, au lieu d'optimiser pour une plate-forme et de忽略 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'interface utilisateur d'une expérience, évitez de placer des informations importantes ou des boutons virtuels dans ces zones.

Zones pouces

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, vous devez donc éviter de placer des boutons fréquemment utilisés en dehors des zones facilement accessibles.

Bouton confortablement à portée du pouce droit du joueur

Bouton difficile à atteindre sauf si le joueur étire sa main ou son pouce

Rappelez-vous 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 accessible sur un téléphone mais presque inatteignable sur une tablette.

Bouton 40% à partir 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 la position relative des boutons personnalisés près des commandes souvent utilisées 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 de remplacement de 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
	-- Attendez que le bouton de saut soit entièrement chargé
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Placez un 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

Interface utilisateur contextuelle

L'espace d'écran est limité sur les appareils mobiles, vous devez donc montrer seulement les informations les plus vitales pendant le partieactif.Par exemple, si votre expérience inclut une action d'entrée spéciale pour ouvrir des portes et des coffres au trésor, il n'a pas de sens de montrer constamment un bouton « ouvert » sur l'écran.Au lieu de cela, utilisez une invite de proximité ou une méthode similaire pour accepter l'entrée seulement lorsque le personnage approche d'une porte ou d'un coffre.