Botones Interactivos

Este tutorial le muestra cómo hacer botones en la pantalla para menús, acciones de interfaz y más.

Tipos de botón

Hay dos tipos de objetos de botón que puedes usar en tus diseños de UI:

Texto	Botón de imagen
Un TextButton es similar a un TextLabel excepto que los jugadores pueden activarlo con un clic/toque. También comparte muchas de las mismas propiedades visuales — fuente, color de fondo, color de trazo, etc.	Un ImageButton es como una versión interactiva del objeto ImageLabel. También comparte la mayoría de las propiedades de su versión no de botón.

Crear un Botón

Las siguientes etapas muestran cómo agregar un ImageButton a la pantalla y alternarlo entre tres apariencias dependiendo de la interacción del jugador.

1. En la ventana Explorer, pasa el mouse sobre el objeto StarterGui , haz clic en el botón + yrea un ScreenGui .

   

2. Seleccione el nuevo objeto ScreenGUI y, de manera similar, insértelo un ImageButton .

   

   Esto agregará un botón de imagen vacía a la esquina de la vista del juego.

3. Como mejor práctica, renombre el nuevo botón según su propósito, por ejemplo Botón de Mapa .

   

Tamaño

Para que el botón se ajuste dinámicamente en varios dispositivos y pantallas, es mejor usar propiedades escala .

1. En la ventana Propiedades , localice la propiedad Tamaño y haga clic en la flecha para expandir su árbol.

   

2. Establece las siguientes propiedades de tamaño:

   

3. Restricte el botón a una caja de contorno cuadrada al establecer SizeLimit a Y Relativo .

   

Dimensiones

El tamaño actual debería funcionar bien en un teléfono, pero la escala de X/Y de 0.15 (15%) puede parecer demasiado grande en una pantalla de ordenador. Para corregir esto, puede agregar un UISizeConstraint .

1. Pase el mouse sobre el objeto Botón de mapa y Insertar un UISizeConstraint .

   

2. Seleccione el nuevo objeto de restricción de tamaño y establezca su propiedad MaxSize en 90, 90 .

   

Posición

Los botones generalmente deben marse dentro del área de pulgar de un jugador, por ejemplo, el área inferior derecha de la pantalla.

1. Cambia la propiedad de AnclarPunto del botón a 0.5, 1 para que la posición se basará en torno a su punto inferior central.

   

2. Expande el árbol de posición del botón y establece los siguientes valores de propiedad. Esto moverá el botón cerca del botón de salto predeterminado que aparece en teléfonos/tabletas.

   

Imágenes

Este botón necesita tres imágenes personalizadas: su apariencia normal en la pantalla, una aspecto, lookde hover-over y una imagen final para cuando el jugador lo presione.

Normal

Pasar el cursor

Presionado

Se pueden configurar estas apariencias a través de las propiedades Imagen , HoverImage y PresetImage .

1. Ubique la propiedad de imagen del botón y pegue en rbxassetid://6025368017 o use su propia propiedad .

   

2. Para la propiedad HoverImage , pegue en rbxassetid://6025452347 .

   

3. Para la propiedad PressedImage , pegue en rbxassetid://6025454897 .

   

Estilos

Para finalizar la apariencia del botón en la pantalla, realice los ajustes siguientes:

1. Establece Transparencia de Fondo a un valor de 1 para hacer que el fondo sea transparente.

   

2. Gire el botón ligeramente al establecer Rotación a -5 .

   

Funcionalidad del botón

La tarea final es conectar la funcionalidad básica del botón.

1. En la ventana Explorer, pasa el cursor sobre el objeto Botón de mapa y haz clic en un LocalScript .

   

2. En el script, copia y pega en estas nuevas líneas:

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- Realice la acción de botón esperada(s) aquí
   end
   
   button.Activated:Connect(onButtonActivated)

Este simple script de botón funciona como sigue:

• La primera línea establece un botón de variable que le dice al script qué objeto específico está vinculado. En este caso está vinculado al ImageButton , el padre del script.
• La función onButtonActivated maneja la activación del botón. Dentro de él, deberás realizar la acción intencionada como abrir el menú principal del juego.
• La última línea conecta el botón a la función onButtonActivated con el evento Activated . Esto causará que la función se ejecute cada vez que un jugador activa el botón en el juego.

Solucionando problemas

Si el botón no funciona como debería, verifique lo siguiendo:

• Asegúrese de que ha usado un cliente LocalScript , no un servidor Script .
• Asegúrese de que el LocalScript es un hijo directo del objeto de botón (no es un hijo del contenedor ScreenGui).
• Asegúrese de que las propiedades de su botón Imagen , HoverImage y PresetImagen estén configuradas con las imágenes y recursos de imágenes apropiados.