Posicionando e Dimensionando Objetos de UI | Documentação

A menos que os objetos da interface estejam sob o controle de uma estrutura de layout ou modificador/restrição de tamanho, você tem controle completo sobre sua posição e 2>tamanho2>. Você também pode configurar a ordem de 5>camadas5> que os objetos sobreposição.

Propriedades de Núcleo

Todos GuiObjects compartilham um conjunto central de propriedades para posição, tamanho, 1>ancorar1> e 4>camada4> eles dentro de um contêiner on-screen ou na experiência.

Posição

A propriedade Position é um conjunto de set de coordenadas UDim2 que posiciona o objeto ao longo dos eixos X e 1>Y1>. Um 4> Datatype.UDim24>

Escala — Valores que representam um porcentagem do tamanho do contêiner ao longo do eixo correspondente, aditivo de qualquer valor Deslocamento .
Deslocamento — Valores que representam quantos pixels paraShift o objeto na eixe correspondente, aditivo de qualquer valor Scale valores.

Para editar a posição de um selecionado GuiObject, clique no campo Posição na janela Propriedades e insira um novo configurarde coordenadas 1> Datatype.UDim21>.

Esteira e espaços são opcionais quando você inserir um Datatype.UDim2 em Studio — você pode simplesmente inserir os quatro valores separados por vírgulas, por exemplo UDim2 , e o Studio inferirá o configurarde valores intencional.

O Studio também infer

Tamanho

A propriedade Size é um conjunto de set de coordenadas UDim2 que escala o objeto ao longo dos eixos X e 1>Y1>. Um 4> Class.GuiObject.Size|Scale|Offset|

Escala — Valores que representam um porcentagem do tamanho do contêiner ao longo do eixo correspondente, aditivo a qualquer valor de Deslocamento .
Deslocamento — Valores que representam o tamanho Pixel do Objetoao longo do eixo correspondente, aditivo a qualquer valor de Escala .

Para editar o tamanho de um GuiObject selecionado, clique no campo Tamanho na janela Propriedades e insira um novo configurarde coordenadas 2> Datatype.UDim22>.

E espaços são opcionais ao inserir um UDim2 no Studio — você pode simplesmente inserir os quatro valores separados por vírgulas, como 0.75,0,0.25,0, e o Studio inferirá o configurarde valores intencional.

O Studio também infer

Ponto de Ancoragem

A propriedade AnchorPoint define o ponto de origem do qual o Objetomuda a posição e o tamanho e . Os valores padrão 1> Class.GuiObject.AnchorPoint|AnchorPoint1> são 4> 8> (0, 0)8> e</

AnchorPoint valores são uma fração de 0 para

Para ver e editar o ponto de ancoragem de um selecionado GuiObject :

Na janela Propriedades, clique dentro do campo AncorarPonto .
Insira uma nova coordenada Vector2 e pressione Enter.

O Studio inferiu o par de valores pretendido quando um único número é inserido. Por exemplo, entrar simplesmente 0.5 será convertido em 0.5, 0.5 para um ponto de ancoragem central.

Índice Z

A propriedade ZIndex define a ordem de camadas em que GuiObjects renderizam e sobreposição um ao outro. Se você quiser criar novas camadas de renderização, você deve definir a propriedade ZIndex para diferentes valores de inteiro positivo ou negativo para cada Objeto.

Para contêineres de UI, como ScreenGui, o padrão ZIndexBehavior sempre rende filhos acima de seus pais, e cada filho de ZIndex é usado para decidir a ordem em que ele rende sobre os outros.

Para editar um Objeto's ZIndex , localize um ZIndex na janela Propriedades e insira um novo valor de número.

Estruturas de Modelo

Estruturas de layout permitem que você organize e exibir rapidamente Class.GuiObject|GuiObjects ', por exemplo, em uma lista horizontal ou vertical , um grid de tamanhos iguais, uma 1> sequência de páginas1> e muito mais. As estruturas de layout geralmente sobrescrevem ou influenciam o 4>posição4> / 7>tamanho

Diseño	Descripción
Lista	UIListLayout posiciones hermanas GuiObjects dentro de filas horizontales o columnas verticales dentro de su contenedor padre.
Cuadrícula	UIGridLayout posiciones hermanas GuiObjects en una cuadrícula de celdas de uniforme del mismo tamaño dentro de su contenedor padre.
Tabla	UITableLayout posiciones hermanas de Class.GuiObject\|GuiObjects y sus hijos en formato de tabla.
Página	UIPageLayout organiza su hermano menor GuiObjects en páginas únicas que puedes transitar a través de scripting.

Fatores de Plataforma Cruzada

O Roblox é intrinsicamente 跨平台 , como os jogadores podem descobrir e se juntar a experiências em um PC ou console, então mais tarde pegar seu telefone e continuar onde eles desligado. Você deve projetar suas experiências Roblox para serem acessíveis e divertidas em todas as plataformas que você escolheu para Suporte, em vez de otimizar para uma plataforma e negar outras.

Zonas Reservadas

Em dispositivos móveis, os controles padrão ocupam uma parte dos cantos inferior esquerdo e inferior direito da tela. Ao projetar a UI de uma experiência, evite colocar botões importantes ou virtuais nessas zonas.

Se sua experiência usar a configuração de controle padrão de DevTouchMovementMode.UserChoice, os jogadores em dispositivos móveis poderão escolher seu entrada a partir de Dynamic Thumbstick , Classic Thumbstick ou 1> Tap to Move1>, causando que os controles e zonas reservadas variam um pouco. Lembre

Zonas de Polegares

A maioria dos jogadores móveis usa dois dedos — um na alavanca virtual e um no botão de pulo. Dependendo do tamanho físico do dispositivo e das mãos do jogador, chegar muito longe dos cantos inferiores se torna desconfortável ou impossível, então você deve evitar colocar botões comumente usados fora das zonas de fácil acesso.

Botão confortável dentro da alcançabilidade do dedo direito do jogador

Botão difícil de alcançar a menos que o jogador estique a mão ou o dedo

Lembre-se de que as zonas de dedos confortáveis diferem entre telefones e tablets porque tablets têm uma tela maior. Um botão colocado 40% abaixo do lado superior da tela é alcançável em um telefone, mas quase inalcançável em um tablet.

Botão 40% na borda superior do telefone, dentro do alcance do dedo do jogador

Botão 40% da borda superior do tablet, difícil de alcançar sem esticar

Um abordagem confiável em ambos os telefones e tablets é relativo posicionamento de botões personalizados perto de controles frequentemente usados, como o botão de pulo padrão, colocando-os dentro de alcance fácil.

O seguinte código, colocado em um script do lado do cliente dentro de StarterPlayerScripts, extrai a posição do botão de pulo e cria um placeholder botão 20 pixels à sua esquerda.

Script do Cliente - Botão Personalizado Perto do Botão de Pulo
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Aguarde o botão de pulo carregado
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Coloque um novo botão personalizado à esquerda do botão de pulo
	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

UI Baseado em Contexto

O espaço de tela é limitado em dispositivos móveis, então você deve mostrar apenas as informações mais importantes durante o jogabilidadeativo. Por exemplo, se sua experiência incluir uma ação de entrada especial para abrir portas e baús do tesouro, não faz sentido mostrar um botão aberto na tela. Em vez disso, use um método de proximidade ou similar para aceitar a entrada apenas quando o personagem se aproxima de uma porta ou baú.