Posicionar y dimensionar objetos UI

A menos que los objetos UI estén bajo el control de una estructura de diseño o un modificador/constraint de tamaño, tienes control total sobre su posición y tamaño. También puedes establecer el orden de capas del índice Z en el que los objetos se superponen.

Propiedades básicas

Todos los GuiObjects comparten un conjunto básico de propiedades para posicionar, dimensionar, anclar y ordenar dentro de un contenedor en pantalla o dentro de la experiencia.

Posición

La propiedad Position es un conjunto de coordenadas UDim2 que posiciona el objeto a lo largo de los ejes X y Y. Un UDim2 está representado tanto por los valores de Scale como por los valores de Offset para cada eje:

• Los valores de Scale representan un porcentaje del tamaño del contenedor a lo largo del eje correspondiente, aditivo de cualquier valor de Offset.
• Los valores de Offset representan cuántos píxeles desplazar el objeto en el eje correspondiente, aditivo de cualquier valor de Scale.

Para editar la posición de un GuiObject seleccionado, haz clic en el campo Position en la ventana de Propiedades e ingresa un nuevo conjunto de coordenadas UDim2.

Tamaño

La propiedad Size es un conjunto de coordenadas UDim2 que dimensiona el objeto a lo largo de los ejes X y Y. Un UDim2 está representado tanto por los valores de Scale como por los valores de Offset para cada eje:

• Scale — Valores que representan un porcentaje del tamaño del contenedor a lo largo del eje correspondiente, aditivos a cualquier valor de Offset.
• Offset — Valores que representan el tamaño en píxeles del objeto a lo largo del eje correspondiente, aditivos a cualquier valor de Scale.

Para editar el tamaño de un GuiObject seleccionado, haz clic en el campo Size en la ventana de Propiedades e ingresa un nuevo conjunto de coordenadas UDim2.

AnchorPoint

La propiedad AnchorPoint define el punto de origen desde donde el objeto cambia su posición y tamaño. Los valores predeterminados de AnchorPoint son (0, 0), lo que coloca el ancla en la esquina superior izquierda del objeto.

Los valores de AnchorPoint son una fracción de 0 a 1, relativa al tamaño del objeto, lo que significa que un objeto con valores de AnchorPoint de (0.5, 0.5) coloca el punto de anclaje a la mitad (50%) del objeto tanto horizontal como verticalmente, y cualquier cambio en su posición o tamaño moviera y escalara de manera radial hacia afuera desde este punto.

Para ver y editar el punto de anclaje de un GuiObject seleccionado:

1. En la ventana de Propiedades, haz clic dentro del campo AnchorPoint.

   

2. Ingresa un nuevo conjunto de coordenadas Vector2 y presiona Enter.

   Studio infiere el par de valores deseados cuando se ingresa un solo número. Por ejemplo, ingresar simplemente 0.5 se convertirá en 0.5, 0.5 para un punto de anclaje centrado.

ZIndex

La propiedad ZIndex define el orden de las capas en que se renderizan y se superponen los GuiObjects. Si deseas crear nuevas capas de renderizado, debes establecer la propiedad ZIndex a diferentes valores enteros positivos o negativos para cada objeto.

Para contenedores UI como ScreenGui, el comportamiento predeterminado de ZIndexBehavior siempre renderiza a los hijos por encima de sus padres, y el ZIndex de cada hijo se utiliza para decidir el orden en que se renderiza sobre otros.

Para editar el ZIndex de un objeto, localiza ZIndex en la ventana de Propiedades e ingresa un nuevo valor entero.

Estructuras de diseño

Las estructuras de diseño te permiten organizar y mostrar rápidamente GuiObjects, por ejemplo en una lista horizontal o vertical, una rejilla de mosaicos del mismo tamaño, una secuencia de páginas, y más. Los diseños suelen anular o influir en la posición/tamaño de los objetos bajo su control.

Factores multiplataforma

Roblox es inherentemente multiplataforma, ya que los jugadores pueden descubrir y unirse a experiencias en su teléfono o tableta, y luego continuar donde lo dejaron en su PC o consola. Debes diseñar tus experiencias de Roblox para que sean accesibles y agradables en todas las plataformas que elijas soportar, en lugar de optimizar para una plataforma y descuidar a las demás.

Zonas reservadas

En dispositivos móviles, los controles predeterminados ocupan una parte de las esquinas inferiores izquierda y derecha de la pantalla. Cuando diseñes la UI de una experiencia, evita colocar información importante o botones virtuales en estas zonas.

Zonas de pulgar

La mayoría de los jugadores móviles usan dos pulgares — uno en el joystick virtual y otro en el botón de salto. Dependiendo del tamaño físico del dispositivo y de las manos del jugador, alcanzar demasiado lejos desde las esquinas inferiores se vuelve incómodo o imposible, por lo que deberías evitar colocar botones de uso frecuente fuera de zonas de fácil acceso.

Botón cómodamente al alcance del pulgar derecho del jugador

Botón difícil de alcanzar a menos que el jugador estire la mano o el pulgar

Recuerda que las zonas de pulgar cómodas difieren entre teléfonos y tabletas porque las tabletas tienen una pantalla más grande. Un botón colocado al 40% por debajo del borde superior de la pantalla es alcanzable en un teléfono, pero casi inalcanzable en una tableta.

Botón al 40% del borde superior del teléfono, al alcance del pulgar del jugador

Botón al 40% del borde superior de la tableta, difícil de alcanzar sin estirarse

Un enfoque confiable en teléfonos y tabletas es el posicionamiento relativo de botones personalizados cerca de controles de uso frecuente como el botón de salto predeterminado, colocándolos dentro de fácil acceso.

El siguiente código, colocado en un script del lado del cliente dentro de StarterPlayerScripts, obtiene la posición del botón de salto y crea un marcador de posición botón a 20 píxeles a la izquierda.

Script del Cliente - Botón Personalizado Cerca del Botón de Salto
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Esperar a que el botón de salto esté completamente cargado
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Colocar un nuevo botón personalizado a la izquierda del botón de 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("¡El dispositivo no es compatible con toque o Studio no está emulando un dispositivo compatible con toque!")
end

UI basada en contexto

El espacio de pantalla es limitado en dispositivos móviles, por lo que deberías mostrar solo la información más vital durante el juego activo. Por ejemplo, si tu experiencia incluye una acción de entrada especial para abrir puertas y cofres, no tiene sentido mostrar constantemente un botón de "abrir" en la pantalla. En su lugar, usa un proximity prompt o un método similar para aceptar la entrada solo cuando el personaje se acerque a una puerta o cofre.