A meno che gli oggetti UI non siano sotto il controllo di una struttura di layout o di un modificatore/ vincolo di dimensione, hai il completo controllo sul loro posizionamento e dimensione. Puoi anche impostare l'ordine di sovrapposizione Z‑index in cui gli oggetti si sovrappongono.
Proprietà principali
Tutti gli GuiObjects condividono un insieme fondamentale di proprietà per posizionare, dimensionare, ancorare e stratificare all'interno di un contenitore sullo schermo o in gioco.
Posizione
La proprietà Position è un insieme 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:
Per modificare la posizione di un GuiObject selezionato, fai clic sul campo Position nella finestra Properties e inserisci un nuovo insieme di coordinate UDim2.
Le parentesi e gli spazi sono opzionali quando si inserisce un UDim2 in Studio — puoi semplicemente inserire i quattro valori separati da virgole, ad esempio 0.25,40,0.1,20, e Studio dedurrà l'insieme di valori previsto.
Studio deduce anche l'insieme di valori previsto quando viene inserito un singolo numero. Ad esempio, inserendo semplicemente 0.5 verrà convertito in {0.5, 0},{0.5, 0} poiché 0.5 è probabilmente un valore di Scale del 50%. Al contrario, inserendo 20 verrà convertito in {0, 20},{0, 20} poiché 20 è probabilmente un valore di Offset di 20 pixel e non una scala del 2000%.
Dimensione
La proprietà Size è un insieme 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:
- Scale — Valori che rappresentano una percentuale della dimensione del contenitore lungo l'asse corrispondente, additiva a qualsiasi valore di Offset.
- Offset — Valori che rappresentano la dimensione in pixel dell'oggetto lungo l'asse corrispondente, additiva a qualsiasi valore di Scale.
Per modificare la dimensione di un GuiObject selezionato, fai clic sul campo Size nella finestra Properties e inserisci un nuovo insieme di coordinate UDim2.
Le parentesi e gli spazi sono opzionali quando si inserisce un UDim2 in Studio — puoi semplicemente inserire i quattro valori separati da virgole, ad esempio 0.75,0,0.25,0, e Studio dedurrà l'insieme di valori previsto.
Studio deduce anche l'insieme di valori previsto quando viene inserito un singolo numero. Ad esempio, inserendo semplicemente 0.5 verrà convertito in {0.5, 0},{0.5, 0} poiché 0.5 è probabilmente un valore di Scale del 50%. Al contrario, inserendo 20 verrà convertito in {0, 20},{0, 20} poiché 20 è probabilmente un valore di Offset di 20 pixel e non una scala del 2000%.
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 di AnchorPoint sono una frazione da 0 a 1, relativa alla dimensione dell'oggetto, il che significa che un oggetto con valori di AnchorPoint di (0.5, 0.5) posiziona il punto di ancoraggio a metà strada (50%) attraverso l'oggetto sia orizzontalmente che verticalmente, e qualsiasi modifica alla sua posizione o dimensione sposta e scala verso l'esterno da questo punto.
Per visualizzare e modificare il punto di ancoraggio di un GuiObject selezionato:
Nella finestra Properties, fai clic all'interno del campo AnchorPoint.
Inserisci un nuovo insieme di coordinate Vector2 e premi Enter.
Studio deduce la coppia di valori prevista quando viene inserito un singolo numero. 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 degli strati in cui GuiObjects vengono renderizzati e si sovrappongono l'uno all'altro. Se desideri creare nuovi strati di rendering, devi impostare la proprietà ZIndex su valori interi positivi o negativi diversi per ciascun oggetto.
Per i contenitori UI come ScreenGui, il comportamento predefinito di ZIndexBehavior rende sempre i figli sopra i loro genitori, e il ZIndex di ciascun figlio viene utilizzato per decidere l'ordine in cui viene renderizzato rispetto agli altri.
Per modificare lo ZIndex di un oggetto, trova ZIndex nella finestra Properties e inserisci un nuovo valore intero.
Strutture di layout
Le strutture di layout ti consentono di organizzare e visualizzare rapidamente GuiObjects, ad esempio in un elenco orizzontale o verticale, in una griglia di piastrelle di dimensioni uniformi, in una sequenza di pagine e altro ancora. I layout sovrascrivono o influenzano tipicamente il posizionamento/dimensione degli oggetti sotto il loro controllo.
| Layout | Descrizione |
|---|---|
| Elenco | UIListLayout posiziona i GuiObjects fratelli in righe orizzontali o colonne verticali all'interno del loro contenitore genitore. |
| Griglia | UIGridLayout posiziona i GuiObjects fratelli in una griglia di celle uniformi della stessa dimensione all'interno del loro contenitore genitore. |
| Tabella | UITableLayout posiziona i GuiObjects fratelli e i loro figli in formato tabella. |
| Pagina | UIPageLayout organizza i suoi GuiObjects fratelli in pagine uniche a cui puoi passare tramite scripting. |
Fattori cross-platform
Roblox è intrinsecamente cross‑platform, poiché i giocatori possono scoprire e unirsi ai giochi sul loro telefono o tablet, per poi continuare da dove avevano interrotto sul loro PC o console. Dovresti progettare i tuoi giochi Roblox per essere accessibili e divertenti su tutte le piattaforme che scegli di supportare, invece di ottimizzare per una piattaforma e trascurare le altre.
Zone riservate
Su dispositivi mobili, i controlli predefiniti occupano una porzione degli angoli in basso a sinistra e in basso a destra dello schermo. Quando progetti l'interfaccia utente di un gioco, 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 frequentemente utilizzati al di fuori delle zone facilmente raggiungibili.
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 per il pollice comode differiscono tra telefoni e tablet perché i tablet hanno uno schermo più grande. Un pulsante posizionato al 40% sotto il 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 allungarsi
Un approccio affidabile sia su telefoni che su tablet è il posizionamento relativo di pulsanti personalizzati vicino ai controlli frequentemente utilizzati come il pulsante di salto predefinito, posizionandoli a portata di mano.
Il seguente codice, posizionato in uno script lato client all'interno di StarterPlayerScripts, recupera la posizione del pulsante di salto e crea un pulsante personalizzato 20 pixel a sinistra.
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
if UserInputService.TouchEnabled then
-- Aspetta che il pulsante di salto sia completamente caricato
while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
task.wait()
end
local jumpButton = playerGui:FindFirstChild("JumpButton", true)
-- Posiziona un 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!")
endUI 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 il tuo gioco 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 input solo quando il personaggio si avvicina a una porta o a un forziere.
