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 do índice Z em que os objetos se sobrepõem.
Propriedades principais
Todos os GuiObjects compartilham um conjunto básico de propriedades para posicionar, dimensionar, âncora e camada dentro de um contêiner na tela ou no jogo.
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:
Para editar a posição de um GuiObject selecionado, clique no campo Position na janela Properties e insira um novo conjunto de coordenadas UDim2.
Colchetes e espaços são opcionais ao inserir um UDim2 no Studio — você pode simplesmente inserir os quatro valores separados por vírgulas, por exemplo 0.25,40,0.1,20, e o Studio inferirá o conjunto de valores pretendido.
O Studio também infere o conjunto de valores pretendido quando um único número é inserido. Por exemplo, inserir simplesmente 0.5 será convertido para {0.5, 0},{0.5, 0} uma vez que 0.5 é provavelmente um valor de Scale de 50%. Por outro lado, inserir 20 será convertido para {0, 20},{0, 20} uma vez que 20 é provavelmente um valor de Offset de 20 pixels e não uma escala de 2000%.
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, aditivos a quaisquer valores de Offset.
- Offset — Valores que representam o tamanho em pixels do objeto ao longo do eixo correspondente, aditivos a quaisquer valores de Scale.
Para editar o tamanho de um GuiObject selecionado, clique no campo Size na janela Properties e insira um novo conjunto de coordenadas UDim2.
Colchetes e espaços são opcionais ao inserir um UDim2 no Studio — você pode simplesmente inserir os quatro valores separados por vírgulas, por exemplo 0.75,0,0.25,0, e o Studio inferirá o conjunto de valores pretendido.
O Studio também infere o conjunto de valores pretendido quando um único número é inserido. Por exemplo, inserir simplesmente 0.5 será convertido para {0.5, 0},{0.5, 0} uma vez que 0.5 é provavelmente um valor de Scale de 50%. Por outro lado, inserir 20 será convertido para {0, 20},{0, 20} uma vez que 20 é provavelmente um valor de Offset de 20 pixels e não uma escala de 2000%.
AnchorPoint
A propriedade AnchorPoint define o ponto de origem a partir do qual o objeto muda sua 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, relativa ao tamanho do objeto, o que significa que um objeto com valores de AnchorPoint de (0.5, 0.5) coloca o ponto de âncora na metade (50%) do objeto, tanto horizontalmente quanto verticalmente, e quaisquer mudanças em sua posição ou tamanho movem e escalonam para fora a partir desse ponto.
Para visualizar e editar o ponto de âncora de um GuiObject selecionado:
Na janela Properties, clique dentro do campo AnchorPoint.
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 para 0.5, 0.5 para um ponto de âncora central.
ZIndex
A propriedade ZIndex define a ordem das camadas em que GuiObjects são renderizados e se sobrepõem uns aos outros. Se você quiser 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 comportamento padrão de ZIndexBehavior sempre renderiza os filhos acima de seus pais, e o ZIndex de cada filho é usado para decidir a ordem em que ele é renderizado sobre os outros.
Para editar o ZIndex de um objeto, localize ZIndex na janela Properties 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 azulejos de tamanho uniforme, uma sequência de páginas e mais. Os layouts geralmente substituem ou influenciam a posição/tamanho dos objetos sob seu controle.
| Layout | Descrição |
|---|---|
| Lista | UIListLayout posiciona os irmãos GuiObjects em linhas horizontais ou colunas verticais dentro de seu contêiner pai. |
| Grade | UIGridLayout posiciona os irmãos GuiObjects em uma grade de células uniformes do mesmo tamanho dentro de seu contêiner pai. |
| Tabela | UITableLayout posiciona os irmãos GuiObjects e seus filhos em formato de tabela. |
| Página | UIPageLayout organiza seus irmãos GuiObjects em páginas únicas que você pode transitar através de scripts. |
Fatores multiplataforma
Roblox é inerentemente multiplataforma, pois os jogadores podem descobrir e entrar em jogos em seus telefones ou tablets, e depois continuar de onde pararam em seu PC ou console. Você deve projetar seus jogos 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 inferior esquerdo e inferior direito da tela. Ao projetar a UI de um jogo, 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 joystick virtual e um no botão de pular. 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 das 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 de polegar confortáveis diferem entre telefones e tablets, pois 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 telefones e tablets é o posicionamento relativo de botões personalizados perto de controles frequentemente usados, como o botão de pular padrão, colocando-os ao 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 pular e cria um botão de espaço reservado 20 pixels à sua esquerda.
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
if UserInputService.TouchEnabled then
-- Aguarde até que o botão de pular 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)
-- Coloque o novo botão personalizado à esquerda do botão de pular
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 é compatível com toque ou o Studio não está emulando um dispositivo compatível com toque!")
endUI 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 jogo ativo. Por exemplo, se seu jogo incluir uma ação de entrada especial para abrir portas e baús de tesouro, 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ú.
