Positionner et redimensionner les objets de l'interface utilisateur

A moins que les objets de l'interface utilisateur ne soient sous le contrôle d'une structure de disposition ou d'un modificateur de taille, vous avez le contrôle complet sur leur Position et 2>Taille2>. Vous pouvez également définir l'ordre de 5>couche5> dans lequel les objets se superposent.

Propriétés de base

Tous les GuiObjects partagent un ensemble de propriétés clé à positionner, tailler, 1>ancrer1> et 4>couche4> dans un conteneur sur l'écran ou dans une expérience.

Position

La propriété Position est un ensemble de coordonnées UDim2 qui positionne l'objet le long des axes X et 1> Y1>. Un 4> Datatype.UDim24> est représenté par les vale

• Échelle — Valeurs qui représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, ajoutif de n'importe quelle valeur d'<a href=\"#Offset\">Offset</a>.
• Offset — Valeurs qui représentent le nombre de pixels pour déplacer l'objet sur l'axe correspondant, ajoutif de n'importe quelle valeur Scale .

Pour modifier la position d'un sélectionné GuiObject, cliquez sur le champ Position dans la Fenêtre propriétés et entrez un nouveau configurerde coordonnées 1> Datatype.UDim21>.

Taille

La propriété Size est un ensemble de UDim2 coordonnées qui agrandit l'objet le long des axes X et 1> Y1>. Un 4> Datatype.UDim24> est représenté par les vale

• Échelle — Valeurs qui représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, ajoutif à n'importe quelle valeur d'<a href=\"#Offset\">Offset</a>.
• Offset — Valeurs qui représentent la taille pixel de l'objet le long de l'axe correspondant, ajoutif à n'importe quelle valeur Scale .

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

Point d'ancrage

La propriété AnchorPoint définit le point d'origine duquel le objet change de position et de taille. Les valeurs par défaut 1>Class.GuiObject.AnchorPoint1> sont 4> 5> Class.GuiObject.AnchorPoint5> et 8> Class.GuiObject.

AnchorPoint valeurs sont un fraction de 0

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 AncrePoint .

   

2. Saisissez une nouvelle coordonnée Vector2 et appuyez sur Entrer.

   Studio infère la paire de valeur souhaitée lorsqu'un seul nombre est entré. 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étermine l'ordre de couche dans lequel GuiObjects rendu et se superpose l'un à l'autre. Si vous voulez créer de nouvelles couches de rendu, vous devez définir la propriété ZIndex sur différents valeurs de chaque objet.

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

Pour modifier l'objet, ZIndex, localisez ZIndex dans la fenêtre propriétés et entrez une nouvelle valeur d'intervalle.

Structures de mise en page

Les structures de mise en page vous permettent de créer et d'afficher rapidement GuiObjects , par exemple dans une liste horizontale ou verticale , une grille de tailles égales, une page séquentziée de 10 et plus encore. Les structures de mise en page ont généralement pour rôle d'écraser ou d'influer sur la position 3> /3> de l'objet sous leur contr

Facteurs entre plates-formes

Roblox est intrinsèquement plateforme , car les joueurs peuvent découvrir et rejoindre des expériences sur un PC ou une console, puis plus tard choisir leur téléphone et continuer là où ils se sont 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'opter pour une plate-forme 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érieurs gauches et droites de l'écran. Lorsque vous concevez l'interface de l'utilisateur d'une expérience, évitez de placer des boutons importants ou des boutons virtuels dans ces zones.

Zone de pouces

La plupart des joueurs mobiles utilisent deux pouces - un sur le joystick virtuel et un sur le bouton de saut. Selon la taille physique du dispositif et des mains du joueur, atteindre trop loin des coins inférieurs devient inconfortable ou impossible, alors vous devriez éviter de placer des boutons fréquemment utilisés en dehors des zones faciles à atteindre.

Bouton confortablement dans la portée de la main droite du joueur

Bouton difficile à atteindre s'il ne soulève pas la main ou le pouce

N'oubliez pas que les zones de thumbs confortables diffèrent entre les téléphones et les tablettes parce que les tablettes ont un écran plus grand. Un bouton placé 40 % en dessous du coin supérieur de l'écran est atteignable sur un téléphone, mais presque inatteignable sur une tablette.

Bouton 40% de l'encoche supérieure du téléphone, dans la portée de la main du joueur

Bouton 40% de l'edge supérieure du tablette, difficile à atteindre sans étirer

Une approche fiable sur les deux appareils et les tablettes est la relative positionnement des boutons personnalisés près des commandes fréquemment utilisées comme le bouton de saut par défaut, les plaçant dans une portée facile.

Le code suivant, placé dans un script côté client dans StarterPlayerScripts, récupère le position du bouton de saut et crée un paramètre de substitution bouton 20 pixels à sa gauche.

Script du 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 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)

	-- 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

IU basée sur le contexte

L'espace d'écran est limité sur les appareils mobiles, vous devez donc montrer uniquement 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 un bouton « ouvert » sur l'écran. Au lieu de cela, utilisez une méthode de proximité ou similaire pour accepter l'entrée uniquement