Objetos de posição e tamanho da interface de usuário

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

Propriedades principais

Todos compartilham um conjunto de propriedades principais para posicionar, tamanho, ancorar e capa deles dentro de um contêiner na tela ou na experiência.

Posição

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

• Scale valores representam uma porcentagem da tamanho do contêiner ao longo do eixo correspondente, aditivo de qualquer Offset valores.
• Offset valores representam quantos pixels para mover o objeto no eixo correspondente, aditivo de qualquer 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 UDim2.

Tamanho

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

• Escala — Valores que representam uma porcentagem da tamanho do contêiner ao longo do eixo correspondente, aditivo a quaisquer valores de deslocamento .
• Desvio — Valores que representam o tamanho pixel do Objetoao longo do eixo correspondente, aditivo a quaisquer valores de escala .

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

Ponto de Ancoragem

A propriedade AnchorPoint define o ponto de origem a partir do qual o objeto muda de posição e tamanho.Os valores padrão são que colocam o ancor em canto superior esquerdo do Objeto.

valores são uma fração de para , em relação ao tamanho do objeto, significando que um objeto com valores de coloca o ponto de âncora a meio caminho (50%) através do objeto tanto horizontalmente quanto verticalmente, e quaisquer alterações em sua posição ou tamanho se movem e escalam para fora desse ponto.

Para ver e editar o ponto de âncora de um selecionado GuiObject :

1. Na janela Propriedades, clique dentro do campo Ponto de Ancoragem .

   

2. Insira uma nova coordenada Vector2 e pressione Enter.

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

Índice Z

A propriedade ZIndex define a ordem de camadas em que GuiObjects renderizar e sobrepor umas às outras.Se você quiser criar novas camadas de renderização, deve definir a propriedade ZIndex para diferentes valores positivos ou negativos de inteiro 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 é renderizado sobre os outros.

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

Estruturas de layout

Estruturas de layout permitem que você organize e exiba rapidamente , por exemplo, em uma lista horizontal ou vertical , uma grade de ladrilhos de tamanho igual, uma sequência de páginas e muito mais.Layouts tipicamente substituem ou influenciam a posição / tamanho de objetos sob seu controle.

Fatores cross-plataforma

O Roblox é intrinsecamente 跨平台 , pois 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 desligado.Você deve projetar suas experiências do Roblox para serem acessíveis e agradáveis em todas as plataformas que você escolher para Suporte, em vez de otimizar para uma plataforma e ignorar as demais.

Regiões reservadas

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

Zonas de polegar

A maioria dos jogadores móveis usa dois polegares - um no botão virtual do polegar 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 frequentemente usados fora de zonas de fácil acesso.

Botão confortavelmente dentro do alcance do polegar direito do jogador

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

Lembre-se de que as zonas de polegar confortáveis 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% do topo da borda do telefone, dentro do alcance do polegar do jogador

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

Uma abordagem confiável em ambos os telefones e tablets é a relativa 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 , busca a posição do botão de pulo e cria um botão de espaç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 ser totalmente 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

Interface de usuário baseada em contexto

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