一個 ImageButton 與 ImageLabel 在渲染時的行為相同，與 GuiButton 的額外行為相關。它定義了相同的圖像渲染程式屬性，與 ImageLabel 的程式相同。
您可以設置 ImageButton.ImageTransparency 為 1 來禁用圖像渲染。這將剩下一個空白的正方形，可以作為按鈕使用。但是，您可以使用 TextButton 為此。
範例程式碼
-- 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()概要
屬性
一個使用 ImageButton 被擺動時使用的材質 ID。
UI 元素顯示的圖像內容。閱取並寫入 ImageContent 。
決定如何為渲染圖像上色。
UI 元素顯示的圖像內容。支援 資產網址 和 EditableImage 對象。
顯示子區域的圖像所需的像素 Offset。
決定圖像子區域的大小。
決定渲染圖像的透明度。
指示圖像是否已從 Roblox 網站載入完畢。
一個 textureId 將在 ImageButton 按下時使用。
選擇按鈕的圖像重新處理模式。
決定圖像在源圖像和顯示的 UI 元素中尺寸是否會隨大小而變化。
設定 9 個切片圖像的片層界限。
以指定比例減少 9 個邊緣。
設定圖像按鈕的磚塊尺寸。
決定是否在滑鼠悠閒時自動變更按鈕的顏色。
如果 GUI 元素可見，否則鼠標將不會鎖定，除非右鍵已按下。
一個Boolean 屬性，表示對象是否已選擇。
設定按鈕按鈕的造型，以基於預設造型的列表。
決定這個輸入是否會沉沒在此 UI 元素。
對 GuiObject 的起始點，相對於其絕對大小。
決定是否會在基於兒童內容的重新縮放。
決定 GuiObject 背景顏色。
決定 GuiObject 背景和邊框的透明度。
決定 GuiObject 邊框的顏色。
決定GuiObject邊框的大小與邊框相對位置。
決定 GuiObject 邊框的像素寬度。
決定是否在超級父元素 GUI 元素外會成像子元素 GuiObjects。
決定玩家的滑鼠是否正在按在 GuiObject 上或不是。
決定 GuiButton 是否可以與或不與互動，或是否要檢查 GuiState 的 GuiObject 是否正在變更或不變更。
使用 GuiObject 時，控制 UIGridStyleLayout 的排序順序。
設定 GuiObject 將在遊戲控制器選擇器向下移動時選擇。
設定 GuiObject ，當遊戲控制器選擇器移動到左邊時會選擇。
設置 GuiObject 將在遊戲控制器選擇器移動到右邊時選擇。
設定 GuiObject 將在遊戲控制器選手柄上移動時選擇。
決定 GuiObject 的像素和矢量位置。
確定 GuiObject 旋轉的程度。
確認遊戲控制器可以選擇 GUI 嗎。
覆蓋遊戲手柄的預設裝飾。
遊戲控制器選擇 GuiObjects 的程序順序。
決定 GuiObject 的像素和浮點大小。
Class.GuiObject.BackgroundTransparency|BackgroundTransparency 和 TextTransparency 的混合屬性。
決定是否要渲染 GuiObject 和它的子孫。
決定 GuiObject 與其他人相對的排名。
描述介面元素的實際屏幕位置，以幣晃。
描述 UI 元素的實際螢幕旋轉度。
描述 UI 元素的實際屏幕尺寸，以幣晃。
設為真的時，本地化將適用於此 GuiBase2d 和它的後代。
一個引用 LocalizationTable 以應用自動本地化到這個 GuiBase2d 和它的後代。
在下向方向中自訂遊戲控制器選擇行為。
在左向方向中自訂遊戲控制器選擇行為。
自訂遊戲控制器選擇行為。
在上方向中自訂遊戲控制器選擇行為。
允許自訂遊戲控制器選擇動作。
方法
方法 繼承自 GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
順滑地將一個 GUI 移至新的 UDim2 。
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
順滑地將 GUI 重新調整為新的 UDim2。
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
順滑地將一個 GUI 移動到新的尺寸和位置。
活動
活動 繼承自 GuiButton按鈕啟用時會發生火焰。
發射時，鼠標完全離開時按一下 GUI 按鈕。
發射時，鼠標位於 GUI 對物件的左下狀態。
發射時，左鍵對象已釋放時，發射 GUI 對物件。
發射時，鼠標完全按下按鈕。
發射時，鼠標在 GUI 對物件上的右鍵狀態。
發射對象上的右鍵時。
發生時間發生時，使用者開始使用人機交互裝置 (滑鼠按鈕, 觸摸開始, 鍵盤按鈕等等)。
使用者改變人機交互裝置 (滑鼠按鈕、觸摸開始、鍵盤按鈕等) 時發生時間。
發生時間當使用者停止使用人類電腦介面裝置 (滑鼠按鈕關閉, 觸摸開始, 鍵盤按鈕下等) 時。
使用者移動滑鼠到 GUI 元素時會發生火焰。
發射一個使用者從 GUI 元素移動滑鼠時。
在使用者移動鼠標時，發射 GUI 元素內的任何時間。
發射時，使用者將鼠標輪向返回，當滑鼠位於一個 GUI 元素上。
發射時，使用者將鼠標輪向前移動，當滑鼠位於 GUI 元素上。
發射時 GuiObject 與遊戲控制器選擇器專注。
發射時Gamepad選擇器停止專注在GUI對象上。
玩家開始時、繼續和停止按長按 UI 元素。
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
玩家移動指針時發射。
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
發射時玩家使用兩個手指在 UI 元素上執行點擊或拉動動作時。
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
發生時玩家使用兩個手指在 UI 元素上執行旋轉動作時。
發射玩家在介面元素上執行擺動手勢時。
發射玩家在介面元素上執行點擊動作時。
- SelectionChanged(amISelected : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
發射在遊戲控制器選擇移動到，離開，或變更連接的 GuiBase2d 或任何子選項 GuiObjects。
屬性
Image
此屬性是內容類型屬性，該屬性應該包含裝飾或圖像上傳到 Roblox 的資產 ID。它與 Class.Decal.Texture 與關於從 Roblox 網站載入圖像的方式相同。 裝飾圖像將以 Class.ImageButton
範例程式碼
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
ImageColor3 屬性決定圖像的顏色化方式。當設為白色時，沒有顏色化發生。這個屬性對於重用圖像資產非常有用：如果來源圖像為完全白色並且透明，您可以使用此屬性來設置整個圖像的顏色。
範例程式碼
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
此屬性應該包含一個 資產網址 或一個引用 EditableImage 對物件。
資產網址可以參照 Roblox 上傳的裝飾或圖像。它與 Decal.Texture 有關於載入圖像的方式。
渲染圖像將使用 ImageButton.ImageColor3 來上色。 您可以使用調整 ImageButton.ScaleType 屬性來調整圖像的大小、縮放和平移，以及 9 個點。
ImageRectOffset
允許在 ImageButton.ImageRectSize 與圖像的部分顯示。 此屬性決定圖像區域的Pixel Offset（從上方左邊）。
此屬性與 ImageLabel.ImageRectSize 相同。
範例程式碼
-- 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
允許在 ImageButton.ImageRectOffset 的協助下顯示圖像的部分顯示。這個屬性將圖像區域的像素尺寸設為所顯示區域的大小。如果兩個尺寸都設為 0，則會顯示整個圖像。
此屬性與 ImageLabel.ImageRectOffset 相同。
範例程式碼
-- 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
圖像透明度決定 UI 元素的渲染圖像的 alpha 。值 0 是完全不透明的，值 1 是完全透明的 (隱藏)。此屬性與 GuiObject.BackgroundTransparency 或 BasePart.Transparency 相同。
範例程式碼
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
載入屬性 ImageButton.Image 指示是否從 Roblox 網站載入。審核的圖像將永遠載入。
範例程式碼
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))ResampleMode
決定圖像擴大時的外觀。
由預設設定，圖像在顯示時將畫像的大小調整為大於或小於其顯示大小在圖像記憶體中的大小。 與此相反， Enum.ResamplerMode.Pixelated 會保留圖像的像素邊緣。
ScaleType
ScaleType 屬性決定在 ImageButton.Image 的尺寸是否與來源圖像的尺寸不同。
預設值為 Enum.ScaleType.Stretch ，這會簡單伸展/縮放圖像尺寸，以正確適合 UI 元素的空間。雖然透明像素在上傳到 Roblox 網站時設為黑色，因此透明圖像應該適用 alpha 漸層以避免邊緣上的黑色外觀。
對於 Enum.ScaleType.Slice ， ImageButton.SliceCenter 屬性會在屬性窗口中顯示。這是對於 9 個滑鼠掛載的 UI 的中心區域：當滑鼠掛載時，角落會保持原始圖像尺寸。圖像的邊緣會延伸到圖像的寬
最後，對於 Enum.ScaleType.Tile， ImageButton.TileSize 屬性會在屬性窗口中顯示。這是對於由磚塊圖形表示的圖像，其每個圖像磚塊的大小是由 ImageButton.TileSize 屬性決定。
範例程式碼
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
Class.ImageButton.ScaleType 設置為 Enum.ScaleType.Slice 時，會設定切片邊界。請注意，此屬性僅在 Studio 屬性欄中顯示。 <
要了解更多關於 9 分割圖像的內容，請查看此教學：UI 9 Slice Design。
範例程式碼
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
以指定比例擴展 9 個邊緣。這意味著邊緣在 9 個邊緣上方的長度會增加。預設為 1.0。
作為 9 個斷片的邊緣乘數，它對於重用一個圓形角落圖像以多個範圍的圖像
也看：
- ImageButton.ScaleType，決定圖像在源圖像和顯示的 UI 元素中顯示時會怎麼縮放
- ImageLabel.ScaleCenter，決定了 9 個片子圖像的中心
- ImageButton.SliceScale，相同的功能性，但是 ImageButtons
TileSize
TileSize 設定圖像按鈕的尺寸。預設值 UDim2 為 1,0,1,0。UDim2 的縮放元件會根據圖像按鈕的大小調整尺寸。 Offset 是在原始像素的左上角開始。例如，將縮放 0.5 設為 1.0 將使圖像按��
此屬性只有在將 ScaleType 設為 Tile 而不是 Slice 或 Stretch 時才會啟用。
範例程式碼
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