Posizionamento e ridimensionamento degli oggetti UI

A meno che gli oggetti UI non siano sotto il controllo di una struttura di layout o di un modificatore di dimensioni, hai il controllo completo su loro posizione e 2>dimensione2>. Puoi anche impostare l'ordine di 5>sovrapposizione5> degli oggetti.

Proprietà del Re

Tutti GuiObjects condividono un insieme di proprietà principale in posizione, dimensione, 1>ancora1> e 4>livello4> .

Posizione

La proprietà Position è un set di coordinate UDim2 che posiziona l'oggetto lungo gli assi X e 1> Y1>. Un 4> Datatype.UDim24> è rappresentato da

• Scale — Valori che rappresentano un percentuale della dimensione del container lungo l'asse corrispondente, aggiungibile di qualsiasi valore Offset .
• Offset — Valori che rappresentano il numero di pixel per spostare l'oggetto sull'asse corrispondente, aggiungitivo di qualsiasi valore di Scala .

Per modificare la posizione di un GuiObject selezionato, fai clic sul campo Posizione nella finestra Proprietà e inserisci un nuovo Impostaredi posizione 2> Datatype.UDim22>.

Dimensione

La proprietà Size è un set di coordinate UDim2 che ingrandisce l'oggetto lungo gli assi X e 1> Y1>. Un 4> Class.GuiObject.Size|Size4> è rappresentato

• Scale — Valori che rappresentano un percentuale della dimensione del container lungo l'asse corrispondente, aggiuntivo a qualsiasi valore di Offset .
• Offset — Valori che rappresentano la dimensione pixel dell'oggetto lungo l'asse corrispondente, aggiuntivo a qualsiasi valore Scala .

Per modificare la dimensione di un GuiObject selezionato, fai clic sul campo Size nella finestra Proprietà e inserisci un nuovo Impostaredi coordinate 2> Datatype.UDim22>.

Punto di ancoraggio

La proprietà AnchorPoint definisce il punto di origine dove l'oggetto cambia posizione e dimensione . I valori predefiniti 1>Class.GuiObject.AnchorPoint1> sono 4> 5> (0, 0)5> che posiziona l

AnchorPoint valori sono una frazione da 0

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

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

   

2. Inserisci una nuova Vector2 coordinata e premi Inserisci.

   Studio infersisce il paio di valore inteso quando viene inserito un singolo numero. Ad esempio, entrando semplicemente 0.5 sarà convertito in 0.5, 0.5 per un punto di ancoraggio del centro.

ZIndice

La proprietà ZIndex definisce l'ordine di livello in cui GuiObjects rende e si sovrappone l'uno sull'altro. Se vuoi creare nuovi livelli di rendimento, devi impostare la proprietà ZIndex su valori positivi o negativi per ciascun oggetto.

For UI containers like ScreenGui , the default ZIndexBehavior always renders children above their parents, and each child's ZIndex is used to decide the order in which it renders over others.

Per modificare l'oggetto di ZIndex, individua ZIndex nella finestra Proprietà e inserisci un nuovo valore numerico.

Strutture di layout

Le strutture di layout ti consentono di organizzare e visualizzare rapidamente GuiObjects , ad esempio in una lista orizzontale o verticale , un' griglia di pixel di dimensioni pari, una sequenza di pagine 1> e molto altro. Le strutture di layout di solito sovrascrivere o influenzare la posizione 4> / 7> della posizione7> dei

Fattori cross-platform

Roblox è per sua natura piattaforma-gestita , poiché i giocatori possono scoprire e unirsi alle esperienze su PC o console, quindi raccogliere il loro telefono e continuare dove hanno Off. Dovresti progettare le tue esperienze Roblox per essere accessibili e godibili su tutte le piattaforme che scegli di Assistenza, invece di ottimizzare per una piattaforma e ignorare gli altri.

Aree riserve

Su dispositivi mobili, i controlli predefiniti occupano una parte dei lati inferiori e superiori della schermata. Quando progetti l'interfaccia utente di un'esperienza, evita di posizionare pulsanti o pulsanti virtuali importanti in queste aree.

Thumb Zone

La maggior parte dei giocatori su cellulare usa due dita - una sulla virtuale dita del mouse e una sul pulsante di avvio. A seconda della dimensione fisica del dispositivo e delle mani del Giocatore, raggiungere troppo lontano dalle zone di facile accesso diventa comfortevole o impossibile, quindi dovresti evitare di posizionare i pulsanti frequentemente utilizzati fuori dalle aree facilmente raggiungibili.

Il pulsante è comodamente all'interno della portata del Giocatore

Il pulsante è difficile da raggiungere a meno che il giocatore non allunga la mano o il dito

Ricorda che le comode zone del pollice differiscono tra telefoni e tablet poiché i tablet hanno uno schermo più grande. Un pulsante posizionato 40% sotto l'angolo superiore dello schermo è raggiungibile su un telefono ma quasi impossibile su un tablet.

Il pulsante 40% dalla parte superiore del telefono, nella portata della pollicina del Giocatore

Il pulsante 40% dalla parte superiore del tablet, difficile da raggiungere senza allungare

Un approccio affidabile su entrambi i telefoni e le tablet è relativo posizionamento dei pulsanti personalizzati vicino a controlli frequentemente utilizzati come il pulsante di salto predefinito, posizionandoli all'interno di una portata facile.

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

Script del client - pulsante personalizzato vicino al pulsante di salto
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Abbiamo aspettato 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

Interfaccia utente basata sul contesto

Lo spazio sullo schermo è limitato su dispositivi mobili, quindi dovresti mostrare solo le informazioni più importanti durante il Partitaattivo. Ad esempio, se la tua esperienza include un'azione di input speciale per aprire porte e forzieri del tesoro, non ha senso mostrare costantemente un pulsante "aperto" sullo schermo. Invece, usa un promemoria di prossimità o un metodo simile per accettare l'input solo quando il personaggio si avvic