A menos que los objetos de 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 superposición del índice Z en el que los objetos se superponen.
Propiedades principales
Todos los GuiObjects comparten un conjunto básico de propiedades para posicionar, dimensionar, anclar y capa dentro de un contenedor en pantalla o en el juego.
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 se representa mediante valores de Scale y Offset para cada eje:
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.
Los corchetes y espacios son opcionales al ingresar un UDim2 en Studio — puedes simplemente ingresar los cuatro valores separados por comas, por ejemplo 0.25,40,0.1,20, y Studio inferirá el conjunto de valores deseado.
Studio también infiere el conjunto de valores deseado cuando se ingresa un solo número. Por ejemplo, ingresar simplemente 0.5 se convertirá en {0.5, 0},{0.5, 0} ya que 0.5 es probablemente un valor de Scale del 50%. Por el contrario, ingresar 20 se convertirá en {0, 20},{0, 20} ya que 20 es probablemente un valor de Offset de 20 píxeles y no una escala del 2000%.
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 se representa mediante valores de Scale y Offset para cada eje:
- Scale — Valores que representan un porcentaje del tamaño del contenedor a lo largo del eje correspondiente, aditivo a cualquier valor de Offset.
- Offset — Valores que representan el tamaño en píxeles del objeto a lo largo del eje correspondiente, aditivo 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.
Los corchetes y espacios son opcionales al ingresar un UDim2 en Studio — puedes simplemente ingresar los cuatro valores separados por comas, por ejemplo 0.75,0,0.25,0, y Studio inferirá el conjunto de valores deseado.
Studio también infiere el conjunto de valores deseado cuando se ingresa un solo número. Por ejemplo, ingresar simplemente 0.5 se convertirá en {0.5, 0},{0.5, 0} ya que 0.5 es probablemente un valor de Scale del 50%. Por el contrario, ingresar 20 se convertirá en {0, 20},{0, 20} ya que 20 es probablemente un valor de Offset de 20 píxeles y no una escala del 2000%.
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) que colocan 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%) a través del objeto tanto horizontal como verticalmente, y cualquier cambio en su posición o tamaño mueve y escala hacia afuera desde este punto.
Para ver y editar el punto de anclaje de un GuiObject seleccionado:
En la ventana de Propiedades, haz clic dentro del campo AnchorPoint.
Ingresa un nuevo conjunto de coordenadas Vector2 y presiona Enter.
Studio infiere el par de valores deseado 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 central.
ZIndex
La propiedad ZIndex define el orden de capa en el que los GuiObjects se renderizan y se superponen entre sí. Si deseas crear nuevas capas de renderizado, debes establecer la propiedad ZIndex en diferentes valores enteros positivos o negativos para cada objeto.
Para contenedores de 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 el 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 de tamaño uniforme, una secuencia de páginas, y más. Los diseños generalmente anulan o influyen en la posición/tamaño de los objetos bajo su control.
| Diseño | Descripción |
|---|---|
| Lista | UIListLayout posiciona a los hermanos GuiObjects en filas horizontales o columnas verticales dentro de su contenedor padre. |
| Rejilla | UIGridLayout posiciona a los hermanos GuiObjects en una rejilla de celdas uniformes del mismo tamaño dentro de su contenedor padre. |
| Tabla | UITableLayout posiciona a los hermanos GuiObjects y sus hijos en formato de tabla. |
| Página | UIPageLayout organiza a sus hermanos GuiObjects en páginas únicas a las que puedes transitar a través de scripting. |
Factores multiplataforma
Roblox es inherentemente multiplataforma, ya que los jugadores pueden descubrir y unirse a juegos en su teléfono o tableta, y luego continuar donde lo dejaron en su PC o consola. Debes diseñar tus juegos 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 porción de las esquinas inferiores izquierda y derecha de la pantalla. Cuando diseñas la UI de un juego, evita colocar información importante o botones virtuales en estas zonas.
Zonas de pulgar
La mayoría de los jugadores móviles utilizan 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 debes evitar colocar botones de uso frecuente fuera de las 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 un fácil alcance.
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 botón de marcador de posición 20 píxeles a su izquierda.
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 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 el tacto o Studio no está emulando un dispositivo compatible con el tacto!")
endUI basada en contexto
El espacio en pantalla es limitado en dispositivos móviles, por lo que debes mostrar solo la información más vital durante el juego activo. Por ejemplo, si tu juego 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, utiliza un prompt de proximidad o un método similar para aceptar la entrada solo cuando el personaje se acerque a una puerta o cofre.
