Posicionar e dimensionar objetos de UI

A menos que os objetos de UI estejam sob controle de uma estrutura de layout ou de um modificador/limitação de tamanho, você tem controle total sobre sua posição e tamanho. Você também pode definir a ordem de sobreposição Z‑index em que os objetos se sobrepõem.

Propriedades principais

Todos os GuiObjects compartilham um conjunto central de propriedades para posicionar, dimensionar, ancorar e ordenar dentro de um contêiner na tela ou dentro da experiência.

Posição

A propriedade Position é um conjunto de coordenadas UDim2 que posiciona o objeto ao longo dos eixos X e Y. Um UDim2 é representado por valores de Scale e Offset para cada eixo:

• Valores de Scale representam uma porcentagem do tamanho do contêiner ao longo do eixo correspondente, aditiva de quaisquer valores de Offset.
• Valores de Offset representam quantos pixels deslocar o objeto no eixo correspondente, aditiva de quaisquer valores de Scale.

Para editar a posição de um GuiObject selecionado, clique no campo Position na janela de Propriedades e insira um novo conjunto de coordenadas UDim2.

Tamanho

A propriedade Size é um conjunto de coordenadas UDim2 que dimensiona o objeto ao longo dos eixos X e Y. Um UDim2 é representado por valores de Scale e Offset para cada eixo:

• Scale — Valores que representam uma porcentagem do tamanho do contêiner ao longo do eixo correspondente, aditivo a quaisquer valores de Offset.
• Offset — Valores que representam o tamanho do objeto em pixels ao longo do eixo correspondente, aditivo a quaisquer valores de Scale.

Para editar o tamanho de um GuiObject selecionado, clique no campo Size na janela de Propriedades e insira um novo conjunto de coordenadas UDim2.

AnchorPoint

A propriedade AnchorPoint define o ponto de origem a partir do qual o objeto muda de posição e tamanho. Os valores padrão de AnchorPoint são (0, 0), que coloca a âncora no canto superior esquerdo do objeto.

Os valores de AnchorPoint são uma fração de 0 a 1, em relação ao tamanho do objeto, o que significa que um objeto com valores de AnchorPoint de (0.5, 0.5) coloca o ponto de ancoragem ao meio (50%) do objeto, tanto horizontal quanto verticalmente, e quaisquer mudanças em sua posição ou tamanho movem e escalonam para fora a partir deste ponto.

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

1. Na janela de Propriedades, clique dentro do campo AnchorPoint.

   

2. Insira um novo conjunto de coordenadas Vector2 e pressione Enter.

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

ZIndex

A propriedade ZIndex define a ordem das camadas em que GuiObjects se renderizam e se sobrepõem entre si. Se você deseja criar novas camadas de renderização, deve definir a propriedade ZIndex para diferentes valores inteiros positivos ou negativos para cada objeto.

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

Para editar o ZIndex de um objeto, localize ZIndex na janela de Propriedades e insira um novo valor inteiro.

Estruturas de layout

As estruturas de layout permitem que você organize e exiba rapidamente GuiObjects, por exemplo, em uma lista horizontal ou vertical, uma grade de tiles de tamanho uniforme, uma sequência de páginas e muito mais. Os layouts normalmente substituem ou influenciam a posição/tamanho dos objetos sob seu controle.

Fatores multiplataforma

Roblox é inerentemente multiplataforma, já que os jogadores podem descobrir e entrar em experiências em seu telefone ou tablet e, em seguida, continuar de onde pararam em seu PC ou console. Você deve projetar suas experiências Roblox para serem acessíveis e agradáveis em todas as plataformas que você escolher suportar, em vez de otimizar para uma plataforma e negligenciar as outras.

Zonas reservadas

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

Zonas do polegar

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

Botão confortavelmente ao alcance do polegar direito do jogador

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

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

Botão 40% da borda superior do telefone, ao alcance do polegar do jogador

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

Uma abordagem confiável em ambos os telefones e tablets é o posicionamento relativo de botões personalizados próximos a controles frequentemente usados, como o botão padrão de pulo, posicionando-os dentro de fácil alcance.

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

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
	-- Espera até que o botão de pulo esteja totalmente carregado
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Coloca 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("O dispositivo não é habilitado para toque ou o Studio não está simulando um dispositivo habilitado para toque!")
end

UI baseada em contexto

O espaço na tela é limitado em dispositivos móveis, então você deve exibir apenas as informações mais vitais durante o gameplay ativo. Por exemplo, se sua experiência inclui uma ação de entrada especial para abrir portas e baús, não faz sentido mostrar constantemente um botão "abrir" na tela. Em vez disso, use um prompt de proximidade ou método semelhante para aceitar a entrada apenas quando o personagem se aproximar de uma porta ou baú.