Posicionar y escalar objetos de la interfaz de usuario

A menos que los objetos de la interfaz de usuario estén bajo el control de una estructura de layout o un modificador de tamaño, tienes todo el control sobre su posición y 2>tamaño2>. También puedes establecer el orden de la capa de 5>layering5> en la que se superponen los objetos.

Propiedades de núcleo

Todos los GuiObjects comparten un conjunto de propiedades clave para posición, tamaño, 2>ancla2> y 5>capa5> ellos dentro de un contenedor en la pantalla o en 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 1>Y1>. Un 4> Datatype.UDim24> está represent

• escala — Valores que representan un porcentaje de el tamaño del contenedor a lo largo del eje correspondiente, agregado de cualquier valor de desplazamiento .
• Desplazamiento — Valores que representan la cantidad de píxeles para mover el objeto en el eje correspondiente, agregue cualquier valor de escala.

Para editar la posición de un seleccionado GuiObject , haz clic en el campo Posición en la ventana Propiedades y ingresa un nuevo establecerde coordenadas 1> Datatype.UDim21>.

Tamaño

La propiedad Size es un conjunto de coordenadas UDim2 que escala el objeto a lo largo de los ejes X y 1>Y1>. Un 4> Class.GuiObject.Size|Scale|Offset

• escala — Valores que representan un porcentaje de la tamaño del contenedor a lo largo del eje correspondiente, agregativo a cualquier valor de desplazamiento .
• Offset — Valores que representan el tamaño de píxeles del objeto al long de la eje correspondiente, agregativo a cualquier valor de escala.

Para editar el tamaño de un GuiObject seleccionado, haz clic en el campo Size en la ventana Propiedades y ingresa un nuevo establecerde coordenadas 2>Datatype.UDim22>.

Punto de anclaje

La propiedad AnchorPoint define el punto de origen desde el que el objeto cambia la posición y el tamaño en el tiempo y 1>en el espacio1>. Los valores predeterminados de 4>Class.GuiObject.AnchorPoint4> son 7> 8>

AnchorPoint valores son un porción de 0</

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

1. En la ventana Propiedades, haz clic dentro del campo Anclar punto .

   

2. Ingrese una nueva coordenada de Vector2 y presione Ingresar .

   Studio inferirá el par de valores deseados cuando se ingrese un solo número. Por ejemplo, ingresar simplemente 0.5 será convertido en 0.5, 0.5 > para un punto de anclaje central.

ZÍndice

La propiedad ZIndex define el orden de capas en el que se renderiza y se superpone cada GuiObjects . Si desea crear nuevas capas de renderizado, debe establecer la propiedad ZIndex para diferentes valores de números positivos o negativos para cada objeto.

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

Para editar un objeto de ZIndex, localiza ZIndex en la ventana Propiedades y ingresa un nuevo valor de número.

Estructuras de diseño

Las estructuras de layout le permiten organizar y mostrar GuiObjects , por ejemplo, en una lista horizontal o vertical lista , un grid de tamaño igual, una secuencia de páginas 1> y más. Las estructuras de layout generalmente sobresalen o afectan la posición / tamaño de los objetos bajo su control.

Factores entre plataformas

Roblox es inherentemente plataforma cruzada , ya que los jugadores pueden descubrir y unirse a experiencias en un PC o consola, luego recoger su teléfono y continuar donde lo desactivado. Deberías diseñar tus experiencias de Roblox para ser accesibles y agradables en todas las plataformas que elijas para Soporte, en lugar de optimizar para una plataforma y olvidar las demás.

Zonas reservadas

En dispositivos móviles, las controles predeterminados ocupan una parte de los esquina inferior izquierda y derecha de la pantalla. Cuando diseñas la interfaz del usuario 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 dedos: uno en el joystick virtual y uno en el botón de salto. Dependiendo del tamaño físico del dispositivo y las manos del jugador, llegar demasiado lejos de las esquinas fáciles se vuelve incómodo o imposible, por lo que debe evitar colocar botones frecuentemente usados fuera de las zonas fáciles de alcanzar.

Botón cómodamente dentro del alcance del dedo derecho del jugador

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

Recuerda que las cómodas zonas de los dedos diferen entre teléfonos y tabletas porque las tabletas tienen una pantalla más grande. Un botón colocado 40% debajo de la esquina superior del teléfono es alcanzable en un teléfono, pero casi imposible en una tablet.

Botón 40% desde la parte superior del teléfono, dentro del alcance del dedo del jugador

Botón 40% de la parte superior del tablet, difícil de alcanzar sin estirarse

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

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 20 píxeles a su 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
	-- Aguarde hasta que el botón de salto se cargue completamente
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Coloca 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

Interfaz de usuario basada en contextos

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 del tesoro, no tiene sentido mostrar un botón de abrir en la pantalla constantemente. En cambio, usa un método de proximidad o similar para aceptar la entrada solo cuando el personaje se acerca a una puerta o cofre.