Botones de texto e imagen

Botones son GuiObjects que permiten a los usuarios realizar una acción. Puedes personalizar los botones para proporcionar contexto y retroalimentación, como cambiar la apariencia visual o scripting retroalimentación audible cuando un usuario hace clic en un botón.

Hay dos tipos de botones que puedes colocar en la pantalla o dentro de la experiencia:

• Un TextButton es un rectángulo con texto que provoca el evento Activated al hacer clic/tocar.

• Un ImageButton es un rectángulo con una imagen que provoca el evento Activated al hacer clic/tocar. Presenta estados adicionales para intercambiar la imagen al pasar el ratón o presionar.

Crear botones en la pantalla

Los botones en una pantalla son útiles para guiar rápidamente a los usuarios a varios menús o páginas.

Para añadir un botón a la pantalla:

1. En la ventana de Explorer, selecciona StarterGui y añade un ScreenGui.

   1. Pasa el cursor sobre StarterGui y haz clic en el botón ⊕. Se muestra un menú contextual.

   2. Inserta un ScreenGui.

2. Selecciona el nuevo ScreenGui y añade un botón.

   1. Pasa el cursor sobre ScreenGui y haz clic en el botón ⊕. Se muestra un menú contextual.

   2. Inserta ya sea un TextButton o un ImageButton.

   

Crear botones en las caras de las partes

Los botones en una parte son útiles para permitir a los usuarios interactuar con las partes. Por ejemplo, puedes permitir que los usuarios pisen un botón para completar una acción.

Para añadir un botón a la cara de una parte:

1. En la ventana de Explorer, selecciona la parte y añade un SurfaceGui.

   1. Pasa el cursor sobre la parte y haz clic en el botón ⊕. Se muestra un menú contextual.

   2. Inserta un SurfaceGui.

2. Selecciona el nuevo SurfaceGui y añade cualquier tipo de botón o entrada.

   1. Pasa el cursor sobre SurfaceGui y haz clic en el botón ⊕. Se muestra un menú contextual.

   2. Inserta ya sea un TextButton o ImageButton.

   

   Si no ves el botón, intenta elegir una cara diferente en la propiedad Face del SurfaceGui.

Cambiar la apariencia de un ImageButton

Cambiar la apariencia de un ImageButton cuando un usuario está interactuando con él proporciona una retroalimentación visual útil. Por ejemplo, cuando un ImageButton cambia de apariencia visual cuando un usuario pasa el cursor sobre él, le hace saber al usuario que no está deshabilitado y que tiene la opción de hacer clic en él si desea realizar esa acción de ImageButton.

Un ImageButton tiene tres propiedades para cambiar su apariencia visual:

• Image - La imagen que se muestra cuando un usuario no está interactuando con el ImageButton.

• HoverImage - La imagen que se muestra cuando un usuario pasa el cursor sobre el ImageButton.

• PressedImage - La imagen que se muestra cuando un usuario está haciendo clic en el ImageButton.

Para cambiar la apariencia de un ImageButton con la entrada del usuario:

1. Añade un ImageButton a una pantalla o a una superficie.

2. En la ventana de Explorer, haz clic en el objeto ImageButton.

3. En la ventana de Properties, asigna tres IDs de activo diferentes para las propiedades Image, HoverImage y PressedImage.

Script de botones

Puedes scriptar una acción cuando un usuario presiona un botón conectando el botón a un evento GuiButton.Activated. Por ejemplo, cuando pones el siguiente LocalScript como hijo a un botón, el botón cambia a un color aleatorio cada vez que un usuario hace clic en él.

local button = script.Parent
local RNG = Random.new()
local function onButtonActivated()
	-- aleatorizar el color del botón
	button.BackgroundColor3 = Color3.fromHSV(RNG:NextNumber(), 1, 1)
end
button.Activated:Connect(onButtonActivated)