Posizionare e dimensionare oggetti UI

A meno che gli oggetti UI non siano sotto il controllo di una struttura di layout o di un modificatore/ vincolo di dimensione, hai completo controllo sulla loro posizione e dimensione. Puoi anche impostare l'ordine di stratificazione dell'indice Z in cui gli oggetti si sovrappongono.

Proprietà fondamentali

Tutti i GuiObjects condividono un insieme fondamentale di proprietà per posizionare, dimensionare, ancorare e stratificare all'interno di un contenitore sullo schermo o in esperienza.

Posizione

La proprietà Position è un set di coordinate UDim2 che posiziona l'oggetto lungo gli assi X e Y. Un UDim2 è rappresentato sia da valori Scale che Offset per ciascun asse:

• I valori Scale rappresentano una percentuale della dimensione del contenitore lungo l'asse corrispondente, additivi a qualsiasi valore Offset.
• I valori Offset rappresentano quanti pixel spostare l'oggetto sull'asse corrispondente, additivi a qualsiasi valore Scale.

Per modificare la posizione di un GuiObject selezionato, fai clic sul campo Posizione nella finestra Proprietà e inserisci un nuovo set di coordinate UDim2.

Dimensione

La proprietà Size è un set di coordinate UDim2 che dimensiona l'oggetto lungo gli assi X e Y. Un UDim2 è rappresentato sia da valori Scale che Offset per ciascun asse:

• Scala — Valori che rappresentano una percentuale della dimensione del contenitore lungo l'asse corrispondente, additivi a qualsiasi valore Offset.
• Offset — Valori che rappresentano la dimensione pixel dell'oggetto lungo l'asse corrispondente, additivi a qualsiasi valore Scale.

Per modificare la dimensione di un GuiObject selezionato, fai clic sul campo Dimensione nella finestra Proprietà e inserisci un nuovo set di coordinate UDim2.

AnchorPoint

La proprietà AnchorPoint definisce il punto di origine da cui l'oggetto cambia posizione e dimensione. I valori predefiniti di AnchorPoint sono (0, 0) che posizionano l'ancora nell'angolo in alto a sinistra dell'oggetto.

I valori AnchorPoint sono una frazione da 0 a 1, relativa alla dimensione dell'oggetto, il che significa che un oggetto con valori AnchorPoint di (0.5, 0.5) posiziona il punto di ancoraggio a metà strada (50%) attraverso l'oggetto sia orizzontalmente che verticalmente, e qualsiasi cambiamento alla sua posizione o dimensione sposterà e scalerà all'esterno da questo punto.

Per visualizzare e modificare il punto di ancoraggio di un GuiObject selezionato:

1. Nella finestra Proprietà, fai clic all'interno del campo AnchorPoint.

   

2. Inserisci un nuovo set di coordinate Vector2 e premi Enter.

   Studio inferisce la coppia di valori intesa quando viene inserito un numero singolo. Ad esempio, inserendo semplicemente 0.5 verrà convertito in 0.5, 0.5 per un punto di ancoraggio centrale.

ZIndex

La proprietà ZIndex definisce l'ordine di livello in cui i GuiObjects si rendono e si sovrappongono. Se desideri creare nuovi livelli di rendering, devi impostare la proprietà ZIndex su valori interi positivi o negativi diversi per ciascun oggetto.

Per i contenitori UI come ScreenGui, il predefinito ZIndexBehavior rende sempre i figli sopra i loro genitori, e il ZIndex di ciascun figlio viene utilizzato per decidere l'ordine in cui si rende sopra gli altri.

Per modificare il ZIndex di un oggetto, trova ZIndex nella finestra Proprietà e inserisci un nuovo valore intero.

Strutture di layout

Le strutture di layout ti consentono di organizzare e visualizzare rapidamente i GuiObjects, ad esempio in un elenco orizzontale o verticale, in una griglia di tasselli di dimensioni uniformi, in una sequenza di pagine e altro ancora. I layout sovrascrivono tipicamente o influenzano la posizione/dimensione degli oggetti sotto il loro controllo.

Fattori cross-platform

Roblox è intrinsecamente cross‑platform, in quanto i giocatori possono scoprire e unirsi a esperienze sul loro telefono o tablet, per poi continuare dove avevano lasciato sulla loro PC o console. Dovresti progettare le tue esperienze Roblox in modo che siano accessibili e piacevoli su tutte le piattaforme che scegli di supportare, invece di ottimizzare per una piattaforma e trascurare le altre.

Zone riservate

Sui dispositivi mobili, i controlli predefiniti occupano una porzione degli angoli in basso a sinistra e in basso a destra dello schermo. Quando progetti l'UI di un'esperienza, evita di posizionare informazioni importanti o pulsanti virtuali in queste zone.

Zone per il pollice

La maggior parte dei giocatori mobili utilizza due pollici — uno sul joystick virtuale e uno sul pulsante di salto. A seconda delle dimensioni fisiche del dispositivo e delle mani del giocatore, raggiungere troppo lontano dagli angoli inferiori diventa scomodo o impossibile, quindi dovresti evitare di posizionare pulsanti utilizzati frequentemente al di fuori delle zone di facile accesso.

Pulsante comodamente alla portata del pollice destro del giocatore

Pulsante difficile da raggiungere a meno che il giocatore non allunghi la mano o il pollice

Ricorda che le zone di pollice confortevoli differiscono tra telefoni e tablet poiché i tablet hanno uno schermo più grande. Un pulsante posizionato al 40% al di sotto del bordo superiore dello schermo è raggiungibile su un telefono ma quasi irraggiungibile su un tablet.

Pulsante al 40% dal bordo superiore del telefono, alla portata del pollice del giocatore

Pulsante al 40% dal bordo superiore del tablet, difficile da raggiungere senza allungare

Un approccio affidabile su telefoni e tablet è il posizionamento relativo di pulsanti personalizzati vicino a controlli utilizzati frequentemente come il pulsante di salto predefinito, posizionandoli a portata di mano.

Il seguente codice, inserito in uno script lato client all'interno di StarterPlayerScripts, recupera la posizione del pulsante di salto e crea un pulsante personalizzato a 20 pixel a sinistra di esso.

Client Script - Custom Button Near Jump Button
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- Attendere che il pulsante di salto sia completamente carico
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Posiziona il nuovo pulsante personalizzato a sinistra del pulsante di salto
	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("Il dispositivo non è abilitato al tocco o Studio non sta emulando un dispositivo abilitato al tocco!")
end

UI basata sul contesto

Lo spazio dello schermo è limitato sui dispositivi mobili, quindi dovresti mostrare solo le informazioni più vitali durante il gameplay attivo. Ad esempio, se la tua esperienza include un'azione di input speciale per aprire porte e forzieri, non ha senso mostrare costantemente un pulsante "apri" sullo schermo. Invece, utilizza un prompt di prossimità o un metodo simile per accettare l'input solo quando il personaggio si avvicina a una porta o a un forziere.