ImageButton
*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.
Un ImageButton se comporta de manera similar a un ImageLabel en términos de renderizado, con los comportamientos adicionales de un GuiButton .
Resumen
Propiedades
Un ID de textura que se usará cuando se esté pasando el ImageButton .
El contenido de imagen mostrado por el elemento ImageButton. Lees y escribes a ImageContent.
Determina cómo se coloreará una imagen renderizada.
El contenido de imagen mostrado por el elemento de la interfaz de usuario. Soporta direcciones de recursos y objetos EditableImage .
El desplazamiento en píxeles de la subárea de una imagen para mostrar.
Determina el tamaño en píxeles de la subárea de una imagen para mostrar.
Determina la transparencia de la imagen renderizada.
Indica si la imagen se ha terminado de cargar desde el sitio web de Roblox.
Un ID de textura que se usará cuando se presione un ImageButton .
Selecciona el modo de recorte de imagen para el botón.
Determina cómo se escalará una imagen si se muestra en un elemento de interfaz de usuario cuyo tamaño difiere de la imagen de origen.
Establece los límites de una rebanada de una imagen de 9 rebanadas.
Escala los bordes de las 9 piezas por la relación especificada.
Establece la escala de azulejos del botón de imagen.
Determina si el botón cambia automáticamente de color cuando el mouse se desplaza sobre él o lo hace clic.
Una instancia HapticEffect que se reproducirá cuando se esté pasando por encima del GuiButton .
Si true mientras el elemento de la interfaz de usuario es visible, el ratón no se bloqueará a menos que el botón derecho del ratón esté hacia abajo.
Una instancia HapticEffect que se reproducirá cuando se presione el GuiButton.
Una propiedad binaria que indica si el objeto ha sido seleccionado.
Establece el estilo del GuiButton basado en una lista de estilos predeterminados.
Determina si este elemento de interfaz de usuario sienta la entrada.
Determina el punto de origen de un GuiObject , relativo a su tamaño absoluto.
Determina si se produce un redimensionamiento basado en el contenido de los hijos.
Determina el color de fondo GuiObject.
Determina la transparencia del fondo y del borde GuiObject.
Determina el color del borde GuiObject .
Determina de qué manera se coloca el borde GuiObject relativo a sus dimensiones.
Determina el ancho de píxel del borde GuiObject .
Determina si el descendiente GuiObjects fuera de los límites de un elemento GUI padre debe Renderizar.
Determina si el mouse del jugador está presionado activamente en el GuiObject o no.
Determina si el GuiButton se puede interactuar o no, o si el GuiState del GuiObject está cambiando o no.
Controla el orden de clasificación del GuiObject cuando se usa con un UIGridStyleLayout .
Establece el GuiObject que se seleccionará cuando el selector de gamepad se mueva hacia abajo.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva a la izquierda.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva a la derecha.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva hacia arriba.
Determina la posición píxel y escalar del GuiObject .
Determina el número de grados por los cuales se gira el GuiObject .
Determine si el GuiObject se puede seleccionar por un controlador para juego.
Anula el adorno de selección predeterminado utilizado para los gamepads.
El orden de GuiObjects seleccionado por la selección de la interfaz de usuario del gamepad.
Determina el tamaño píxel y escalar del GuiObject .
Establece los ejes Size que el GuiObject se basará, en relación con el tamaño de su padre.
Una propiedad mixta de BackgroundTransparency y TextTransparency.
Determina si se renderizarán los GuiObject y sus descendientes.
Determina el orden en que un GuiObject renderiza en relación con los demás.
Describe la posición actual de la pantalla de un elemento GuiBase2d , en píxeles.
Describe la rotación de la pantalla actual de un elemento GuiBase2d en grados.
Describe el tamaño de la pantalla actual de un elemento GuiBase2d , en píxeles.
Cuando se establece en true, la localización se aplicará a este GuiBase2d y a sus descendientes.
Una referencia a un LocalizationTable para usar para aplicar localización automatizada a este GuiBase2d y sus descendientes.
Personaliza el comportamiento de selección del gamepad en la dirección de abajo.
Personaliza el comportamiento de selección del gamepad en la dirección izquierda.
Personaliza el comportamiento de selección del gamepad en la dirección correcta.
Personaliza el comportamiento de selección del gamepad en la dirección de arriba.
Permite la personalización del movimiento de selección del gamepad.
Métodos
Métodos heredados de GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Mueve suavemente una GUI a una nueva UDim2.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Mueve suavemente una GUI a un nuevo tamaño y posición.
Eventos
Eventos heredados de GuiButtonSe activa cuando el botón está activado.
Se enciende cuando el mouse del usuario hace clic completo en el GuiButton .
Se enciende cuando el usuario presiona el botón izquierdo del mouse hacia abajo en el GuiButton .
Se enciende cuando el usuario suelta el botón izquierdo del mouse fuera del GuiButton .
Se enciende cuando el mouse del usuario hace clic derecho completo en el GuiButton .
Se enciende cuando el usuario presiona el botón derecho del ratón hacia abajo en el GuiButton .
Se enciende cuando el usuario suelta el botón derecho del mouse fuera del GuiButton .
Despedido cuando un usuario comienza a interactuar a través de un dispositivo de interfaz humana-computadora (botón del mouse hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Despedido cuando un usuario cambia la forma en que interactúa a través de un dispositivo de interfaz humana-computadora (botón del mouse hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Despedido cuando un usuario deja de interactuar a través de un dispositivo de interfaz humana-ordenador (botón del ratón hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Se activa cuando un usuario mueve el mouse a un elemento de interfaz gráfica.
Se activa cuando un usuario mueve el mouse fuera de un elemento de interfaz gráfica.
Se activa cada vez que un usuario mueve el mouse mientras está dentro de un elemento de interfaz gráfica.
Se activa cuando un usuario desplaza la rueda del ratón hacia atrás cuando el ratón está sobre un elemento de interfaz gráfica.
Se activa cuando un usuario desplaza la rueda del ratón hacia adelante cuando el ratón está sobre un elemento de interfaz gráfica.
Se desfija cuando el GuiObject se está enfocando con el seleccionador de Gamepad.
Despedido cuando el seleccionador de Gamepad deja de centrarse en el GuiObject.
Se enciende cuando el jugador comienza, continúa y detiene presionando largamente el elemento de la interfaz de usuario.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Se activa cuando el jugador mueve el dedo en el elemento de la interfaz de usuario.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Se activa cuando el jugador realiza un gesto de pinzamiento o de tiro usando dos dedos en el elemento de la interfaz de usuario.
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Se activa cuando el jugador realiza un gesto de rotación usando dos dedos en el elemento de la interfaz de usuario.
Se activa cuando el jugador realiza un gesto de deslizamiento en el elemento de la interfaz de usuario.
Se activa cuando el jugador realiza un gesto de toque en el elemento de la interfaz de usuario.
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Se enciende cuando la selección del gamepad se mueve a, deja o cambia dentro del conectado GuiBase2d o cualquier descendiente GuiObjects .
Propiedades
HoverImageContent
Image
Esta propiedad es una propiedad de tipo de contenido que debe contener el ID del activo de una etiqueta o imagen subida a Roblox.Funciona de manera idéntica a Decal.Texture con respecto a la carga de la imagen de Roblox.La imagen renderizada se coloreará usando ImageColor3 .
Tenga en cuenta que es posible hacer que la imagen se renderice como azulejada, escalada para encajar o de 9 slices al ajustar la propiedad ScaleType.
Muestras de código
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()ImageColor3
Esta propiedad determina cómo se colorea una imagen.Cuando se establece en blanco, no ocurre colorización.Esta propiedad es muy útil para reutilizar recursos de imagen: si la imagen de origen es completamente blanca con transparencia, puedes establecer todo el color de la imagen a la vez con esta propiedad.
Muestras de código
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()ImageContent
Esta propiedad debe contener un URI de activo o una referencia a un objeto EditableImage.La URI de activo puede referenciar una etiqueta o imagen subida a Roblox.Funciona de forma idéntica a Decal.Texture con respecto a la carga de la imagen.
La imagen renderizada se coloreará usando ImageColor3 .Es posible hacer que la imagen se renderice como azulejada, escalada para encajar o 9‑cortada al ajustar la propiedad ScaleType.
ImageRectOffset
Esta propiedad determina el desplazamiento de píxeles (desde la parte superior izquierda) del área de imagen a mostrar, permitiendo el desplazamiento parcial de una imagen junto con ImageRectSize .
Muestras de código
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
endImageRectSize
Esta propiedad determina el tamaño de píxel de la zona de imagen a mostrar, permitiendo la visualización parcial de una imagen junto con ImageRectOffset .Si ambas dimensiones se establecen en 0, se muestra la imagen completa en su lugar.
Muestras de código
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
endImageTransparency
Esta propiedad determina el alfa de la imagen renderizada del elemento.Un valor de 0 es completamente opaco y un valor de 1 es completamente transparente (invisible).Esta propiedad se comporta de manera similar a GuiObject.BackgroundTransparency o BasePart.Transparency .
Si desactivas la renderización de imágenes al establecer ImageTransparency a 1, resultará en un rectángulo simple que se puede usar como botón.Sin embargo, puede ser mejor usar un vacío TextButton en su lugar.
IsLoaded
Esta propiedad indica si la propiedad Image ha terminado de cargarse desde Roblox. Las imágenes rechazadas por la moderación nunca se cargarán.
Muestras de código
This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.
local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))PressedImage
Un ID de textura que se puede establecer como una propiedad ImageButton. Cuando se presiona el botón, renderizará esta imagen.
PressedImageContent
ResampleMode
Determina cómo se ve la imagen cuando se escala.Por defecto, la imagen suaviza la textura cuando se muestra más grande o más pequeña que su tamaño en la memoria de textura.En contraste, Enum.ResamplerMode.Pixelated preserva los bordes afilados de los píxeles de imagen.
ScaleType
Esta propiedad determina de qué manera se renderiza la propiedad Image cuando el tamaño absoluto del elemento de la interfaz de usuario difiere del tamaño de la imagen fuente.
Por defecto, esta propiedad es Enum.ScaleType.Stretch la cual simplemente estirará/compactará las dimensiones de la imagen para que encaje exactamente en el espacio del elemento de la interfaz de usuario.Dado que los píxeles transparentes se establecen en negro al subir a Roblox, las imágenes transparentes deberían aplicar mezcla alfa para evitar un contorno negro alrededor de imágenes escaladas.
Para Enum.ScaleType.Slice , al aumentar la escala, las esquinas seguirán siendo el tamaño de imagen de origen.Los bordes de la imagen se extenderán a la anchura/altura de la imagen.Por último, el centro de la imagen se estirará para llenar el área central de la imagen.Para aprender más sobre imágenes de 9 capas, vea Diseño de interfaz de usuario de 9 capas.
Para Enum.ScaleType.Tile , el tamaño de cada azulejo de imagen se determina por la propiedad TileSize.
SliceCenter
Esta propiedad establece los límites de la porción de una imagen de 9 rebanadas cuando ScaleType se establece en Enum.ScaleType.Slice .
Para aprender más sobre imágenes de 9 capas, vea Diseño de interfaz de usuario de 9 capas.
SliceScale
Escala los bordes de las 9 piezas por la relación especificada.Esto significa que los bordes alrededor de la rebanada 9 crecerán como si hubieras subido una nueva versión de la textura escalada.Por defecto a 1.0.
Como multiplicador de los bordes de una rebanada de 9, es útil para reutilizar una imagen de esquina redondeada para múltiples radios.
Vea también ScaleType que determina cómo se escalará una imagen si se muestra en un elemento de interfaz de usuario cuyo tamaño difiere de la imagen de origen.
TileSize
Establece el tamaño de la cuadrícula de la ImageButton que comienza en la esquina superior izquierda de la imagen.Los valores predeterminados de UDim2 son
Esta propiedad solo está activa si la propiedad ScaleType está configurada como Enum.ScaleType.Tile.