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 similarmente a un ImageLabel en lo que se refiere a la renderización con los comportamientos adicionales de un GuiButton . Defina las mismas propiedades de renderizado que lo hace un ImageLabel .
Puede desactivar la renderización de imágenes estableciendo ImageButton.ImageTransparency a 1. Esto le dejará con un rectángulo simple que se puede usar como un botón. Sin embargo, puede ser mejor usar un TextButton vacío para esto.
Muestras de código
-- Place this code in a LocalScript in an ImageButton
local imageButton = script.Parent
local colorNormal = Color3.new(1, 1, 1) -- white
local colorHover = Color3.new(0, 1, 0) -- green
local colorPress = Color3.new(1, 0, 0) -- red
-- This is a 32x32 image of a backpack
imageButton.Image = "rbxassetid://787458668"
imageButton.BackgroundTransparency = 1
local function onActivated()
print("open the inventory")
end
local function onPressed()
imageButton.ImageColor3 = colorPress
end
local function onReleased()
imageButton.ImageColor3 = colorHover
end
local function onEntered()
imageButton.ImageColor3 = colorHover
end
local function onLeft()
imageButton.ImageColor3 = colorNormal
end
imageButton.MouseEnter:Connect(onEntered)
imageButton.MouseLeave:Connect(onLeft)
imageButton.MouseButton1Down:Connect(onPressed)
imageButton.MouseButton1Up:Connect(onReleased)
imageButton.Activated:Connect(onActivated)
-- Start with the default, non-hovered state
onLeft()Resumen
Propiedades
Una ID de textura que se usará cuando el ImageButton esté siendo pasado el cursor.
El contenido de la imagen que se muestra por el elemento de la interfaz de usuario.
Determina cómo se coloreará una imagen renderizada.
El desplazamiento en píxeles de la subárea de una imagen para mostrarla.
Determina el tamaño en píxeles de la subárea de una imagen para mostrarla.
Determina la transparencia de la imagen renderizada.
Indica si la Imagen ha finalizado de cargar desde el sitio web de Roblox.
Un ID de textura que se usará cuando se presione un ImageButton .
Selecciona el modo de reescritura de la imagen para el botón.
Determina cómo se escalará una imagen si se muestra en un elemento de UI cuyo tamaño difiere de la imagen de origen.
Establece los límites de la capa de un imagen de 9 capas.
Escala las 9 esquinas por el radio especificado.
Establece el tamaño de escalado de la imagen.
Determina si el botón cambia de color automáticamente cuando el mouse se posiciona sobre él o hace clic en él.
Si es cierto mientras el elemento GUI es visible, el mouse no se bloqueará a menos que el botón derecho del ratón esté abajo.
Propiedad deBooleano que indica si el objeto ha sido seleccionado.
Establece el estilo del GuiButton según una lista de estilos predeterminados.
Determina si este elemento de la interfaz de usuario acepta la entrada.
Determina el punto de origen de un GuiObject , relativo a su tamaño absoluto.
Determina si se produce el escalado en función del contenido de los hijos.
Determina el color de fondo de GuiObject
Determina la transparencia de la capa de fondo y el borde de GuiObject
Determina el color de la frontera de GuiObject .
Determina de qué manera se coloca el límite de GuiObject en relación con sus dimensiones.
Determina el ancho de píxel de la frontera 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á siendo presionado activamente en el GuiObject o no.
Determina si el GuiButton se puede interactuar con 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 seleccionador de plataforma de juego se mueva hacia abajo.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma se mueva a la izquierda.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma de juegos se mueva a la derecha.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma de juego se mueva hacia arriba.
Determina la posición de píxeles y escalares de GuiObject .
Determina el número de grados en los que se gira el GuiObject .
Determine si el GUI puede ser seleccionado por un controlador para juego.
Sobrecarga el adorno de selección predeterminado utilizado para las plataformas de juegos.
El orden de GuiObjects seleccionado por la interfaz de usuario del gamepad.
Determina el tamaño de píxeles y escalares del GuiObject .
Establece los ejes Size en los que se basará el GuiObject relativos al tamaño de su padre.
Una propiedad mixta de BackgroundTransparency y TextTransparency .
Determina si el GuiObject y sus descendientes serán renderizados.
Determina el orden en que se renderiza un GuiObject en relación con los demás.
Describe la posición de pantalla actual de un elemento de UI, en píxeles.
Describe la rotación de pantalla actual de un elemento de UI, en grados.
Describe el tamaño de pantalla actual de un elemento de UI, en píxeles.
Cuando esté configurado como verdadero, la localización se aplicará a este GuiBase2d y sus descendientes.
Una referencia a un LocalizationTable para ser usado para aplicar la localización automatizada a este GuiBase2d y sus descendientes.
Personaliza el comportamiento de la selección del gamepad en la dirección de abajo.
Personaliza el comportamiento de la selección del gamepad en la dirección de la izquierda.
Personaliza el comportamiento de la selección del gamepad en la dirección correcta.
Personaliza el comportamiento de la selección del gamepad en la dirección de arriba.
Permite la personalización del movimiento de la plataforma de juego.
Métodos
Métodos heredados de GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Mueve con suavidad un GUI a un nuevo UDim2 .
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Escala con suavidad un GUI a un nuevo UDim2 .
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Mueve con suavidad una GUI a un nuevo tamaño y posición.
Eventos
Eventos heredados de GuiButtonDispara cuando se activa el botón.
Se ha disparado cuando el mouse ha dejado completamente clicado el botón GUI.
Se activa cuando el mouse está en el estado de abajo del mouse izquierdo en el objeto GUI.
Se ha disparado cuando el mouse izquierdo ha liberado el objeto GUI.
Se ha disparado cuando el mouse ha hecho clic con el botón derecho en el botón de GUI.
Se activa cuando el mouse está en el estado correcto de abajo del ratón en el objeto GUI.
Se ha disparado cuando el botón derecho del ratón se ha liberado en un objeto GUI.
Se ha disparado cuando un usuario comienza a interactuar a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para comenzar, botón de teclado, etc).
Se activa cuando un usuario cambia cómo interactúa a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para comenzar, botón de teclado, etc).
Se ha disparado cuando un usuario deja de interactuar a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para empezar, botón de teclado, etc).
Dispara cuando un usuario mueve su mouse hacia un elemento GUI.
Se activa cuando un usuario mueve el mouse fuera de un elemento de la GUI.
Dispara cuando un usuario mueve el mouse mientras está dentro de un elemento GUI.
Dispara cuando un usuario desplaza su rueda de ratón cuando el ratón está sobre un elemento de GUI.
Se activa cuando un usuario desplaza su rueda de ratón hacia delante cuando el ratón está sobre un elemento de GUI.
Se activa cuando el GuiObject está siendo enfocado con el GamepadSelector.
Se activa cuando el GamepadSelector deja de enfocarse en el GuiObject.
Se activa cuando el jugador comienza, continúa y termina presionando el elemento de la interfaz de usuario.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Dispara cuando el jugador mueve su dedo en el elemento de la interfaz de usuario.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Dispara cuando el jugador realiza un gesto de pinchazo 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
Dispara 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 desplazamiento 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 : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Se activa cuando la selección del gamepad se mueve, se va o cambia dentro de la GuiBase2d conectada o cualquier descendiente de GuiObjetos.
Propiedades
HoverImage
Una ID de textura que se usará cuando el ImageButton esté siendo pasado el cursor.
Image
La propiedad de imagen es una propiedad de tipo de contenido que debe contener el ID de la imagen de un Decal o Image en el sitio web de Roblox. Funciona idénticamente a Decal.Texture con respecto a la carga de la imagen desde el sitio web de Roblox. La imagen renderizada se colorear
Muestras de código
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
La propiedad Color3 de la imagen determina cómo se colorea una imagen. Cuando se establece en blanco, no ocurre ningún colorado. Esta propiedad es muy útil para reutilizar los recursos de la imagen: si la imagen de origen es completamente blanca con transparencia, puede establecer el color de la imagen entero con esta propiedad.
Muestras de código
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()local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
imageLabel.ImageColor3 = Color3.fromHSV(workspace.DistributedGameTime / 8 % 1, 1, 1)
end
RunService.RenderStepped:Connect(onRenderStep)ImageContent
ImageRectOffset
Permite la presentación parcial de una imagen en conjunción con ImageButton.ImageRectSize . Esta propiedad determina el desplazamiento de píxeles (desde la parte superior izquierda) de la área de la imagen para mostrarse.
Esta propiedad se comporta idénticamente a ImageLabel.ImageRectSize .
Muestras de código
-- 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
endlocal imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
endImageRectSize
Permite la presentación parcial de una imagen en conjunción con ImageButton.ImageRectOffset . Esta propiedad determina el tamaño de los píxeles de la área de la imagen para mostrarse. Si se establece cualquiera de las dimensiones, se muestra el área de la imagen completa en su lugar.
Esta propiedad se comporta idénticamente a ImageLabel.ImageRectOffset .
Muestras de código
-- 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
endlocal imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
endImageTransparency
Transparencia de imagen determina la alfa de la imagen de renderizado de un elemento de UI. Un valor de 0 es completamente opaco, y un valor de 1 es completamente transparente (invisible). Esta propiedad se comporta similarmente a GuiObject.BackgroundTransparency o BasePart.Transparency .
Muestras de código
local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)IsLoaded
La propiedad IsLoaded indica si la propiedad ImageButton.Image se ha cargado del sitio web de Roblox. Las imágenes rechazadas por la moderación nunca se cargarán.
Muestras de código
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 propiedad de ImageButton. Cuando se presiona el botón, se renderizará esta imagen.
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 el almacenamiento de textura. En contraste, Enum.ResamplerMode.Pixelated preserva los bordes afilados de los píxeles de la imagen.
ScaleType
La propiedad ScaleType determina de qué manera se renderiza un ImageButton.Image cuando el tamaño de elemento de la interfaz de usuario difiere del tamaño de la imagen de origen.
Por defecto, esta propiedad es Enum.ScaleType.Stretch , lo que simplemente estirará / compactará las dimensiones de la imagen para que encaje exactamente con el espacio del elemento de la interfaz de usuario. Dado que los píxeles transparentes están configurados para negro al cargar en el sitio web de Roblox, las imágenes transparentes deberían aplicar el efecto de mezcla de alfa para evitar un contorno de color negro
Para Enum.ScaleType.Slice , la propiedad ImageButton.SliceCenter se revelará en la ventana Propiedades. Esto es para la interfaz de usuario de 9 pares: cuando se escala, las esquinas se mantendrán el tamaño de la imagen de origen. Las esquinas de la imagen se extenderán hasta la altura / ancho de la imagen. Final
Finalmente, para Enum.ScaleType.Tile, la propiedad ImageButton.TileSize se revelará en la ventana Propiedades. Esto es para las imágenes de azulejos, donde el tamaño de cada azulejo de imagen se determina por la propiedad ImageButton.TileSize.
Muestras de código
local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
endSliceCenter
La propiedad SliceCenter establece los límites de los márgenes de un 9-sliced image cuando ImageButton.ScaleType está configurado para Enum.ScaleType.Slice . Por favor, teng
Para aprender más sobre las imágenes de 9 espírritos, consulta este tutorial: Diseño de UI 9 Slice.
Muestras de código
local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
endSliceScale
Aumenta los lados de 9 píldoras por el modo de escalado especificado. Esto significa que los lados alrededor de las 9 píldoras crecerán como si hubieras subido una nueva versión de la textura escalada. Por defecto, 1.0.
Como multiplicador de las esquinas de un 9-Slice, es útil para reutilizar una imagen de esquina redondeada para varios radios
Véase también:
- ImageButton.ScaleType , determina cómo se escalará una imagen si se muestra en un elemento de UI cuyo tamaño difiere de la imagen de origen
- ImageLabel.ScaleCenter, determina el centro de una imagen de 9 espacios
- ImageButton.SliceScale , la misma propiedad en términos de funcionalidad pero para ImageButtons
TileSize
TileSize establece el tamaño de azulejo de la ImagenBotón. El valor predeterminado UDim2 es 1,0,1,0. El componente de escala de UDim2 escalará el azulejo en función del tamaño del ImageButton. El desplazamiento está en píxeles. El azulejo comienza en la esquina superior izquierda de la imagen. Por ejemplo, un
Esta propiedad solo está activa si el ScaleType para el ImageButton se ha establecido como Tile en lugar de Slice o Stretch.
Muestras de código
local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end